با استفاده از WebOTP API شماره تلفن را روی دسکتاپ تأیید کنید

از Chrome 93، وب‌سایت‌ها می‌توانند شماره تلفن را از Chrome رومیزی تأیید کنند.

یی گو
ایجی کیتامورا

WebOTP به کاربران کمک می کند تا یک کد تأیید شماره تلفن را در یک وب سایت تلفن همراه بدون جابجایی بین برنامه ها با یک ضربه وارد کنند. کروم 93 این قابلیت را به دسکتاپ نیز گسترش می دهد. برای کسب اطلاعات بیشتر به ادامه مطلب مراجعه کنید.

معرفی

OTPهای پیامکی (گذرواژه های یکبار مصرف) معمولاً برای تأیید یک شماره تلفن، به عنوان مثال به عنوان مرحله دوم در تأیید اعتبار، یا تأیید پرداخت ها در وب استفاده می شوند. با این حال، کل جریان جابجایی از دسکتاپ به موبایل، باز کردن برنامه SMS، به خاطر سپردن و وارد کردن OTP در وب‌سایت اصلی بر روی دسک‌تاپ باعث ایجاد اصطکاک می‌شود. اشتباه کردن از این طریق آسان است و در برابر حملات فیشینگ آسیب پذیر است.

WebOTP API به وب‌سایت‌ها این امکان را می‌دهد که به صورت برنامه‌ریزی رمز عبور یک‌بار مصرف را از یک پیام کوتاه دریافت کنند و به‌طور خودکار فرم را برای کاربران تنها با یک ضربه بدون تغییر برنامه پر کنند. پیامک فرمت خاصی دارد و به مبدأ متصل است، بنابراین خطر سرقت OTP توسط وب‌سایت‌های فیشینگ را نیز کاهش می‌دهد.

WebOTP API در عمل.

یکی از موارد استفاده ای که هنوز در WebOTP پشتیبانی نشده است، هدف قرار دادن درخواست های تأیید شماره تلفن از یک دستگاه دسکتاپ راه دور یا یک لپ تاپ است - API فقط روی دستگاه هایی کار می کند که قابلیت های تلفنی دارند. API اکنون از گوش دادن به پیامک های دریافتی در دستگاه های دیگر پشتیبانی می کند تا به کاربران در تکمیل تأیید شماره تلفن در رایانه رومیزی در Chrome 93 کمک کند.

WebOTP API روی دسکتاپ.

آن را امتحان کنید

پیش نیازها

نسخه ی نمایشی

برای اینکه خودتان این جریان تأیید یکپارچه شماره تلفن را روی دسک‌تاپ امتحان کنید، این مراحل را دنبال کنید:

  1. در دسکتاپ به https://web-otp-demo.glitch.me/ بروید. روی دکمه Verify کلیک کنید.
  2. پیام متنی دقیقی که روی صفحه نمایش بود را از گوشی دوم به دستگاه اندرویدی ارسال کنید.
  3. هنگامی که پیامک به دستگاه Android تحویل داده می شود، یک گفتگو ظاهر می شود که از شما می پرسد آیا می خواهید شماره تلفن را روی دسکتاپ تأیید کنید یا خیر. برای تایید ، ارسال را فشار دهید.
  4. در دسکتاپ، کد تأیید ارسال شده به دستگاه Android باید به طور خودکار در قسمت ورودی تکمیل شود.

WebOTP API چگونه کار می کند

بیایید نحوه عملکرد WebOTP API را بررسی کنیم:

…
  const otp = await navigator.credentials.get({
    otp: { transport:['sms'] }
  });
  if (otp.code) input.value = otp.code;
…

پیام اس ام اس باید با کدهای یکبار مصرف فرمت شده باشد.

Your OTP is: 123456.

@web-otp-demo.glitch.me #123456

توجه داشته باشید که خط آخر حاوی مبدأ است که باید قبل از آن یک @ و سپس OTP با یک # قبل از آن مقید شود.

وقتی پیام متنی می رسد، یک نوار اطلاعات ظاهر می شود و از کاربر می خواهد شماره تلفن خود را تأیید کند. پس از اینکه کاربر روی دکمه Verify کلیک کرد، مرورگر به طور خودکار OTP را به سایت ارسال می کند و navigator.credentials.get() را حل می کند. سپس وب سایت می تواند OTP را استخراج کرده و فرآیند تأیید را تکمیل کند.

در تأیید شماره تلفن در وب با WebOTP API بیشتر بیاموزید.

نحوه استفاده از WebOTP API در دسکتاپ

تأیید شماره تلفن از طریق پیامک به طور گسترده مورد استفاده قرار می گیرد و پلتفرم آگنوستیک است. هر گونه موارد استفاده در دستگاه های تلفن همراه باید برای دستگاه های دسکتاپ قابل اجرا باشد.

استفاده از WebOTP API در دسکتاپ مانند موبایل است، بنابراین وب‌سایت‌ها می‌توانند همان کد را در پلتفرم‌ها مستقر کنند.

پشتیبانی مرورگر و قابلیت همکاری

این ویژگی توسط Chrome Sync پشتیبانی می‌شود، بنابراین در حال حاضر فقط Chrome کار می‌کند. دریافت و ارسال پیامک در iOS یا iPad OS در Chrome پشتیبانی نمی‌شود.

در حالی که موتورهای مرورگر غیر از Chromium WebOTP API را پیاده‌سازی نمی‌کنند، Safari همان قالب پیامک را با پشتیبانی از input[autocomplete="one-time-code"] به اشتراک می‌گذارد. در Safari، تا زمانی که کاربر همگام‌سازی خودکار iMessage را روشن کرده باشد، هنگامی که یک پیامک حاوی فرمت کد یکبار مصرف با مبدأ مطابق با iOS یا iPadOS وارد می‌شود، پیام به macOS ارسال می‌شود. اگر کاربر روی فیلد ورودی تمرکز کند، سافاری OTP را برای ورود به کاربر پیشنهاد می‌کند.

بازخورد

بازخورد شما در بهبود WebOTP API بسیار ارزشمند است. آن را امتحان کنید و نظر خود را با ما در میان بگذارید .

عکس لوئیس ویلاسمیل در Unsplash