https://virgool.ir/feed/@mahdi7192fa2026-11-12 17:58:03https://files.virgool.ir/upload/users/1382503/avatar/avatar.pnghttps://virgool.ir/@mahdi7192https://virgool.ir/@mahdi7192/خواندن-خودکار-پیامک-در-وب-webotp-api-apumjtxq5ud9احراز هویت شماره تلفن با ارسال توکن به صورت پیامک (OTP)در اپلیکیشن ها مرسوم ترین روش برای اعتبارسنجی شماره تلفن همراه کاربر، ارسال پیامک رمز یکبار مصرف است. در وب برخلاف اپلیکیشن های اندرویدی یا ios امکان دسترسی مستقیم به پیامک ها وجود ندارد اما WebOTP API این امکان رو فراهم میکند تا رمز یکبار مصرف یا توکن شما به صورت مستقیم از پیامک برداشته شود و دیگر نیاز به وارد کردن دستی کد نیست. در ادامه این مقاله به آموزش کامل و پیاده سازی WebOTP API میپردازیم. برای تست میتوانید با گوشی به آدرس diagon.app مراجعه کنید.این قابلیت فقط روی دامنه های امن (https) و برخی از مرورگرها قابل اجراست که در انتهای مقاله به آن اشاره شده است.نحوه پیاده سازیقالب پیامکبرای دریافت مستقیم توکن از روی پیامک، قالب پیامک حتما باید به صورت زیر باشد:hi welcome to app. your code is 12345@your-domain.com #12345ابتدای پیام میتواند شامل هر متنی باشد (به دلیل وضوح بهتر و عدم بهم ریختگی متن در حالت راست چین، متن بالا انگلیسی نوشته شده است و میتواند فارسی باشد) و خط پایانی پیام از اهمیت بالایی برخوردار است. خط پایانی باید با @ شروع و با آدرس سایت شما (بدون فاصله و بدون https) ادامه پیدا کند و سپس یک فاصله و در انتهای خط هم # و سپس توکن (بدون فاصله) به آن اضافه میشود.در انتهای مقاله لیستی از نمونه پیامک های نامعتبر ضمیمه شده است.دریافت کد سمت JSبرای دریافت کد سمت JS از قطعه کد زیر استفاده کنید:const ac = new AbortController(); navigator.credentials.get({ otp: { transport:['sms'] }, signal: ac.signal }).then(result => { // the code is in result.code input.value = result.code; if (form) form.submit(); }).catch(err => { console.log(err); });توجه داشته باشید تکه کد بالا بعد از لود کامل صفحه و قبل از دریافت پیام اجرا شده باشد. با دریافت پیامک و تایید مجوز دسترسی مقدر result به صورت زیر پر خواهد شد:{ code: "123456", // Obtained OTP type: "otp" // `type` is always "otp" }نمونه کامل قطعه کد<input type="text" autocomplete="one-time-code" inputmode="numeric">if ('OTPCredential' in window) { window.addEventListener('DOMContentLoaded', e => { const input = document.querySelector('input[autocomplete="one-time-code"]'); if (!input) return; const ac = new AbortController(); const form = input.closest('form'); if (form) { form.addEventListener('submit', e => { ac.abort(); }); } navigator.credentials.get({ otp: { transport:['sms'] }, signal: ac.signal }).then(otp => { input.value = otp.code; if (form) form.submit(); }).catch(err => { console.log(err); }); }); }در شرایطی که کاربر به صورت دستی کد را وارد کند و دکمه ثبت نهایی فرم را کلیک کند، با استفاده از AbortController تعریف شده، فرآیند دریافت خودکار فرم کنسل خواهد شد.نمونه قالب های نامعتبر پیامکHere is your code for @example.com #123456قالب بالا نامعتبر است. کاراکتر @ باید اولین کاراکتر خط آخر باشدYour verification code is 123456@example.com\t#123456قالب بالا نامعتبر است. بین @host و #code فقط باید یک فاصله (space) باشد.Your verification code is 123456@example.com #123456قالب بالا نامعتبر است. بین @host و #code فقط باید یک فاصله (space) باشد. در نمونه بالا ۲ فاصله ثبت شده است.Your verification code is 123456@https://example.com #123456قالب بالا نامعتبر است. آدرس سایت نباید با http یا https شروع شود و بدون آن باید ثبت شود.Your verification code is 123456@example.com:8080 #123456قالب بالا نامعتبر است. آدرس نمیتواند دارای پورت باشد.مرورگرهای قابل اجرامرورگر هایی که قابلیت اجرای WebOTP را دارندمنابعhttps://developer.mozilla.org/en-US/docs/Web/API/WebOTP_APIhttps://web.dev/web-otpارتباط با نویسنده ?ممنون از وقتی که برای مطالعه گذاشتید. سوالی داشتید میتونید linkedin ازم بپرسید.https://www.linkedin.com/in/mahdi-ketabdarMahdi KetabdarMahdi KetabdarSun, 20 Feb 2022 18:04:02 +0330