وب سرویس پیامک در Flutter و React Native | ورود با OTP در اپلیکیشن

اهمیت ورود با شماره موبایل (Passwordless OTP) در اپلیکیشن‌های مدرن موبایل

امروزه ورود و ثبت‌نام با شماره موبایل و کد یکبار مصرف (OTP) به استاندارد قطعی تجربه کاربری (UX) در اپلیکیشن‌های موبایل اندروید و iOS تبدیل شده است. کاربران تمایلی به حفظ کردن گذرواژه‌های پیچیده ندارند و اگر کد تایید پیامکی بیش از چند ثانیه تاخیر داشته باشد، فرآیند ثبت‌نام را رها می‌کنند (Drop-off Rate بالا).

توسعه‌دهندگان فریم‌ورک‌های کراس‌پلتفرم محبوب Flutter (Dart) و React Native (TypeScript/JavaScript) نیازمند وب‌سرویسی با تاخیر فوق‌پایین، خطوط خدماتی بدون بلک‌لیست و معماری پایدار هستند. وب‌سرویس پترن فری اس ام اس با تحویل کدهای OTP زیر ۲ ثانیه، ایده‌آل‌ترین گزینه برای اپ‌های موبایل است.

معماری احراز هویت پیامکی در اپلیکیشن‌های موبایل

چرخه صحیح احراز هویت در موبایل شامل مراحل زیر است:

1. کاربر شماره موبایل خود را در اپلیکیشن وارد می‌کند.
2. بک‌اند اپلیکیشن یا کلاینت، درخواست OTP را به آدرس REST API فری اس ام اس ارسال می‌کند.
3. کد اعتبارسنجی با خط خدماتی اشتراکی رایگان ظرف ۱ الی ۲ ثانیه به گوشی کاربر پیامک می‌شود.
4. کاربر کد را وارد کرده یا از طریق قابلیت SMS Retriever / Auto-fill، فیلد تایید پر می‌شود.
5. توکن دسترسی JWT صادر شده و کاربر وارد برنامه می‌گردد.

نمونه کد Flutter (Dart) برای ارسال کد OTP

در فلاتر با استفاده از پکیج محبوب dio یا http، می‌توانید وب‌سرویس فری اس ام اس را با چند خط کد فراخوانی کنید:

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<bool> sendOtpCode(String mobileNumber, String verificationCode) async {
  final url = Uri.parse('https://api.free-sms.ir/v1/otp/send');
  final headers = {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_FREE_SMS_API_KEY',
  };
  
  final body = jsonEncode({
    'mobile': mobileNumber,
    'template_id': 104, // شناسه پترن OTP تایید شماره
    'parameters': {
      'code': verificationCode,
    }
  });

  try {
    final response = await http.post(url, headers: headers, body: body);
    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);
      return data['status'] == 'success';
    }
    return false;
  } catch (e) {
    print('SMS OTP Error: $e');
    return false;
  }
}

نمونه کد React Native (TypeScript) برای ارسال پیامک ورود

در ری‌اکت نیتیو با استفاده از axios پیاده‌سازی سرویس احراز هویت پیامکی به شکل زیر است:

import axios from 'axios';

interface SendOtpResponse {
  status: string;
  message_id: number;
  delivery_eta: string;
}

export const sendMobileOtp = async (mobile: string, code: string): Promise<boolean> => {
  try {
    const response = await axios.post<SendOtpResponse>(
      'https://api.free-sms.ir/v1/otp/send',
      {
        mobile,
        template_id: 104,
        parameters: { code }
      },
      {
        headers: {
          'Authorization': 'Bearer YOUR_FREE_SMS_API_KEY',
          'Content-Type': 'application/json'
        },
        timeout: 5000
      }
    );

    return response.data.status === 'success';
  } catch (error) {
    console.error('Failed to dispatch SMS OTP:', error);
    return false;
  }
};

جدول مقایسه روش ارسال معمولی و ارسال پترن اختصاصی در اپلیکیشن

قابلیت SMS Retriever API و تکمیل خودکار فیلد کد در اپلیکیشن

سیستم‌عامل‌های اندروید و iOS به منظور جلوگیری از اشتباه تایپی کاربر، به اپلیکیشن‌ها اجازه می‌دهند پیامک حاوی کد تایید را خودکار بخوانند. با استفاده از قالب‌های استاندارد پترن در فری اس ام اس و افزودن App Hash به انتهای پیامک، کد بدون دخالت دست مستقیماً در اپلیکیشن پر شده و کاربر با سرعت فوق‌العاده وارد برنامه می‌شود.

سوالات متداول (FAQ)