استفاده از WebOtp API در Nextjs / React

در برنامه های امروزی، مشاهده کرده ایم که هنگام ورود به سیستم یا انجام کارهای آنلاین حساس ، رمزهای یکبار مصرفی را به شماره تلفن ثبت شده شما ارسال میکنند تا از این فعالیت ها محافظت کنند. اما به عنوان یک کاربر، به خاطر سپردن کد و سپس تایپ کردن آن در فیلدهای مورد نیاز، کمی آزاردهنده است. در عین حال، ممکن است بتوانیم این پیامک ها را به طور خودکار در برنامه های بومی اندروید یا ios شناسایی کنیم، اما کاربران برنامه های مبتنی بر وب این کار را نمی توانند انجام دهند. اما اکنون با کمک WebOTP API این امکان وجود دارد. این API به وبسایتها این امکان را میدهد که رمز عبور یکبار مصرف را از یک پیام کوتاه دریافت کنند و بهطور خودکار فرم را برای کاربران تنها با یک ضربه بدون تغییر برنامه پر کنند.

چگونه کار می کند؟

استفاده از WebOTP API از سه بخش تشکیل شده است:

• یک تگ <input> با حاشیه نویسی مناسب
• نحوه پیاده سازی در Nextjs / React
• ارسال پیامک با فرمت مناسب

یک تگ <input> با حاشیه نویسی مناسب

اضافه کردن autocomplete="one-time-code"به تگ<input>جایی که باید OTP وارد شود.

مثال: <input autocomplete='one-time-code' />

نحوه پیاده سازی در Nextjs / React:

مثال:

useEffect(() => {
   if ('OTPCredential' in window) {
      const ac = new AbortController()
      const nav: CredentialRequestOptions | any = navigator.credentials
      setTimeout(() => {
           /*abort sms ditection after 1 minute */
            ac.abort()
      }, 0.5 * 60 * 1000)
      nav
      .get({
      otp: { transport: ['sms'] },
      signal: ac.signal,
      })
      .then((otp: any) => {
           /* Write your logic to set the value of input and then submit the form */
           ac.abort()
      })
      .catch((err) => {
            console.log(err)
      })
   }
}, [])

مطمئن شوید که از ()ac.abort پس از تکمیل فرآیند ورود به سیستم / اتمام زمان ورود Otp استفاده کرده اید.

میتوانیم کد خود را با شرط if ('OTPCredential' in window){ /* Code */} برای چک کردن قابلیت WebOTP API در مرورگر ببندیم.

فرمت پیامک

> پیام با متن قابل خواندن برای انسان (اختیاری) شروع می شود که شامل یک رشته الفبایی چهار تا ده کاراکتری با حداقل یک عدد است که آخرین خط را برای URL و OTP باقی می گذارد.
> قسمت دامنه URL وب سایتی که API را فراخوانی کرده است باید قبل از @ باشد.
> URL باید دارای علامت پوند ('#') باشد که با OTP همراه باشد.

مثال :

Your OTP is: 123456.
@www.yourdomain.com #123456

اکنون که کد ما آماده است، فرض کنید جزئیات ورود را به درستی وارد کرده اید. در پیامک ثبت شده خود یک OTP دریافت خواهید کرد. برای تست این کد می توانید از گوشی دیگری به تلفنی که در آن تست می کنید پیامک ارسال کنید.

مطمئن شوید که:

1. قابلیت Rich Communication Services) RCS) خاموش است.
2. آن شماره تلفن نباید در لیست مخاطبین شما باشد.
3. فرمت پیامک باید با نام دامنه صحیح معتبر باشد.

پس از دریافت پیامک، یک پنجره بازشو نمایش داده می شود که از شما می خواهد به برنامه وب اجازه دهید پیامک دریافتی شما را بخواند.

اگر سوالی در رابطه با این فرآیند دارید در بخش نظرات کامنت بگذارید.