اتوماتیک خوندن کد OTP از SMS در وب اپلیکیشن‌ها در اندروید و IOS

اگر برنامه نویس فرانت باشید احتمالا تسکی با عنوان اتوماتیک پر شدن OTP کد سمتتون اومده.

تو این پست تجربه خودم در مورد این موضوع رو باهاتون به اشتراک میذارم و اگر سوال یا تجربه‌ای در این زمینه دارید، خوشحال می‌شم نظراتتون رو به اشتراک بذارید.

پیاده سازی OTP Autofill در IOS:

بذارید اول از IOS شروع کنیم، چون در این مورد به شکل معجزه آسایی IOS ساده تره:

برای داشتن OTP Autofill تو IOS حتی نیاز به یک خط کد JS هم ندارید در واقع اپل SMS های دریافتی شما رو چک میکنه و اگر تو اون SMS از کلید واژه هایی که اپل نسبت به اون ها حساسه استفاده کنید کد رو برمیداره و بالای کیبورد کاربر suggest میده به این شکل:

بخاطر همین هست که SMS های OTP که معمولا براتون میاد از کلید واژه های رمز یا CODE استفاده میشه مثل این SMS :

code: 707981
کد ورود شما

پیاده سازی OTP Autofill در اندروید:

اندروید مثل همیشه یک قدم از IOS تو این زمینه جلوتره، Chrome یک API به خودش اضافه کرده به اسم WebOTP API که با کمک ازش میتونید کل فرایند خوندن کد OTP رو سیستمی انجام بدین و از کاربر فقط بخواین که روی دکمه Allow بزنه.

Your verification code is 123456.
@www.example.com #123456

این فرمت SMS هست که برای استفاده از WebOTP API نیاز دارید،
قسمت اول پیام رو میتونید تغییر بدید و فارسی و یا هر زبون که دوست داشتید بنویسید، ولی قسمت دوم یعنی: @www.example.com #123456 حتما باید تو SMS باشه.
که اطلاعاتش رو با اطلاعات دامین و کد خودتون باید جابجاش کنید.

برای استفاده از این API نیازه که اپلیکیشنتون روی https بالا باشه و گواهی ssl داشته باشه.

حالا با اضافه کردن این اسکریپت هم فرایند خوندن کد OTP رو هندل کنید:

// Detect feature support via OTPCredential availability
if (&quotOTPCredential&quot in window) {
window.addEventListener(&quotDOMContentLoaded&quot, (e) => {
const input = document.querySelector('input[autocomplete=&quotone-time-code&quot]');
    if (!input) return;
    // Set up an AbortController to use with the OTP request
    const ac = new AbortController();
    const form = input.closest(&quotform&quot);
    if (form) {
      // Abort the OTP request if the user attempts to submit the form manually
      form.addEventListener(&quotsubmit&quot, (e) => {
        ac.abort();
      });
    }
    // Request the OTP via get()
    navigator.credentials
      .get({
        otp: { transport: [&quotsms&quot] },
        signal: ac.signal,
      })
      .then((otp) => {
        // When the OTP is received by the app client, enter it into the form
        // input and submit the form automatically
        input.value = otp.code;
        if (form) form.submit();
      })
      .catch((err) => {
        console.error(err);
      });
  });
}

تو هر خط توضیح کاری که انجام میشه کامنت شده ولی من داکیومنت MDN و داکیومنت Chrome Dev رو اینجا براتون میذارم تا اگر نیازتون شد داکیومنت های اصلی هم مطالعه کنید.

حالا از چه تمپلیت SMS استفاده کنیم که هم IOS رو ساپورت کنه و هم اندروید رو؟

تایید ثبت نام در ایران‌تلنت
رمز: 3930 

@www.irantalent.com #3930

این تمپلیتی هست که ما ازش تو SMS های OTP ایران‌تلنت استفاده کردیم.

از کلید واژه رمز استفاده کردیم تا IOS رو trigger کنیم و به کاربرمون suggest بده کد رو و از تمپلیت chrome استفاده کردیم تا تو اندروید هم بتونیم از این فیچر جذاب استفاده کنیم.

امیدوارم تونسته باشم تو پیاده سازی این فیچر به اپلیکیشنتون کمک کرده باشم و موفق باشید.🚀