پرشدن خودکار کد تأیید پیامکی در سایت و اپ؛ one-time-code، WebOTP و اندروید

پرشدن خودکار کد تأیید پیامکی در سایت و اپ؛ one-time-code، WebOTP و اندروید

تیم وب‌سرویس برنامه‌نویسان

هر ثانیه‌ای که کاربر برای خواندن کد از اعلان، به خاطر سپردن آن و تایپ‌کردنش صرف می‌کند، احتمال رها کردن ثبت‌نام را بالا می‌برد. گوشی‌های امروزی می‌توانند کد را خودشان از پیامک بردارند و در فرم بگذارند؛ به شرطی که سایت یا اپ و متن پیامک برای این کار آماده باشند. در این مقاله سه روش اصلی را مرور می‌کنیم.

روش ۱: ویژگی one-time-code (ساده‌ترین، برای همهٔ سایت‌ها)

کافی است فیلد کد تأیید این‌طور تعریف شود:

<input type="text" name="code"
       inputmode="numeric"
       autocomplete="one-time-code"
       maxlength="6">
  • autocomplete="one-time-code" به مرورگر و صفحه‌کلید می‌گوید این فیلد کد یک‌بارمصرف است. در آیفون و آیپد، کدی که تازه با پیامک رسیده بالای صفحه‌کلید پیشنهاد می‌شود و کاربر با یک لمس واردش می‌کند. بسیاری از صفحه‌کلیدهای اندروید هم همین رفتار را دارند.
  • inputmode="numeric" صفحه‌کلید عددی را باز می‌کند.
  • هیچ قالب خاصی برای متن پیامک لازم نیست؛ فقط کد در متن واضح باشد.

این یک خط هزینه‌ای ندارد و چیزی را هم خراب نمی‌کند؛ هر فرم کد تأییدی باید آن را داشته باشد.

روش ۲: WebOTP (پرشدن کاملاً خودکار در کروم اندروید)

رابط WebOTP به سایت اجازه می‌دهد، با اجازهٔ کاربر، کد را مستقیم از پیامک بخواند و فرم را خودش پر کند. شرط اصلی: آخرین خط پیامک باید دامنهٔ سایت و کد را با این قالب داشته باشد:

کد ورود شما به فروشگاه نمونه: 48213

@shop.example.com #48213

و در صفحه:

if ('OTPCredential' in window) {
  const ac = new AbortController();
  navigator.credentials.get({ otp: { transport: ['sms'] }, signal: ac.signal })
    .then(otp => {
      document.querySelector('[name=code]').value = otp.code;
      // در صورت تمایل: فرم را خودکار ارسال کنید
    })
    .catch(() => { /* کاربر اجازه نداد یا زمان گذشت؛ ورود دستی کار می‌کند */ });
}
  • صفحه باید روی HTTPS باشد و دامنهٔ خط آخر پیامک دقیقاً با دامنهٔ صفحه یکی باشد. همین بستگی به دامنه، جلوی استفادهٔ سایت‌های جعلی از کد را هم می‌گیرد.
  • کاربر یک بار اجازه می‌دهد و کد خودش وارد می‌شود.
  • در مرورگرهایی که پشتیبانی نمی‌کنند، شرط if برقرار نیست و روش ۱ همچنان کار می‌کند.

روش ۳: اپلیکیشن‌های اندروید

SMS Retriever API (بدون هیچ لمسی)

اپ شما منتظر پیامک می‌ماند و سرویس‌های گوگل پیامکی را که مخصوص اپ شماست، بدون نیاز به مجوز خواندن پیامک، به آن تحویل می‌دهند. شرط: پیامک باید کد را داشته باشد و به یک رشتهٔ ۱۱ نویسه‌ای (هش اپ) ختم شود که از روی نام بسته و گواهی امضای اپ ساخته می‌شود:

کد ورود شما به اپ نمونه: 48213
FA+9qCX9VSu

هش برای نسخهٔ آزمایشی و نسخهٔ منتشرشده (اگر گواهی امضا فرق کند) متفاوت است؛ هر دو را درست تولید کنید وگرنه هیچ پیامکی به اپ تحویل نمی‌شود. این روش به سرویس‌های گوگل روی گوشی نیاز دارد.

SMS User Consent API (با یک لمس)

اگر نمی‌خواهید هش را در متن بگذارید، این رابط وقتی پیامکی شامل کد برسد، از کاربر می‌پرسد «اجازه می‌دهید اپ این پیام را بخواند؟» و با تأیید او، متن را به اپ می‌دهد. پیامک قالب خاصی لازم ندارد، فقط باید یک کد (ترکیب ۴ تا ۱۰ نویسه با دست‌کم یک رقم) داشته باشد.

مجوز خواندن همهٔ پیامک‌ها را نگیرید. گوگل‌پلی گرفتن مجوزهای پیامک را جز برای اپ‌های پیام‌رسان پیش‌فرض محدود کرده و کاربران هم به آن بدبین‌اند. دو رابط بالا برای همین ساخته شده‌اند.

یک پیامک برای همهٔ روش‌ها؟

می‌شود. متنی که کد را واضح دارد، در خط آخر قالب WebOTP را دارد، و اگر اپ اندروید دارید، هش اپ را هم دارد، هر سه روش را پشتیبانی می‌کند. اما هر خط اضافه طول پیامک را بیشتر می‌کند: پیامکی که متن فارسی دارد تا ۷۰ نویسه یک بخش است و بیشتر از آن چندبخشی می‌شود و هزینه بالا می‌رود. اگر فقط وب دارید، خط WebOTP کافی است؛ اگر فقط اپ دارید، هش اپ.

یک نکتهٔ دیگر: در درگاه پیامک (SMSGate)، پیامی که یک گیرنده دارد و متنش ۶۴ نویسه یا کمتر است، خودکار از نوع «کد تأیید» شناخته می‌شود. اگر خط‌های اضافه متن را از این حد بلندتر کنند، پیام هنوز ارسال می‌شود، اما از نوع «تکی» به حساب می‌آید.

جمع‌بندی

  • همه: autocomplete="one-time-code" روی فیلد کد.
  • سایت‌ها: خط آخر @دامنه #کد و WebOTP برای پرشدن خودکار در کروم اندروید.
  • اپ‌های اندروید: SMS Retriever با هش اپ، یا SMS User Consent بدون تغییر متن.

بقیهٔ نکته‌های کد تأیید، از طول و عمر کد تا امنیت، در «ارسال کد تأیید پیامکی از سایت و اپلیکیشن» آمده است.