علی نادرلو
علی نادرلو
خواندن ۳ دقیقه·۳ ماه پیش

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


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

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

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

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

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


نحوه نمایش کد OTP در IOS
نحوه نمایش کد OTP در IOS


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

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


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


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


نحوه نمایش کد OTP در اندروید
نحوه نمایش کد OTP در اندروید


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 استفاده کردیم تا تو اندروید هم بتونیم از این فیچر جذاب استفاده کنیم.

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




کد otpotp codeotp autofillweb developmentاتوماتیک پر شدن otp
شاید از این پست‌ها خوشتان بیاید