OTP (One-Time Password) เป็นรหัสผ่านแบบใช้ครั้งเดียวที่ใช้สำหรับยืนยันตัวตนของผู้ใช้
เช่น การสมัครสมาชิก การเข้าสู่ระบบ หรือการยืนยันธุรกรรม ระบบ OTP
ช่วยเพิ่มความปลอดภัยให้กับแอปพลิเคชัน โดยทั่วไป OTP จะถูกส่งผ่าน
SMS, Email หรือ Push Notification

ใน Flutter การทำระบบ OTP จะต้องมีทั้งฝั่ง Mobile App และ Backend
ที่ทำหน้าที่สร้างรหัส OTP และตรวจสอบความถูกต้องของรหัส

โครงสร้างการทำงานของระบบ OTP

• ผู้ใช้กรอกเบอร์โทรศัพท์หรืออีเมล


• แอปส่งคำขอไปยัง Backend เพื่อสร้าง OTP


• Backend ส่ง OTP ไปยังผู้ใช้ (SMS หรือ Email)


• ผู้ใช้กรอกรหัส OTP ในแอป


• แอปส่ง OTP ไปตรวจสอบกับ Backend

ตัวอย่าง UI สำหรับกรอก OTP

import 'package:flutter/material.dart';
class OtpPage extends StatefulWidget {
 @override
 _OtpPageState createState() => _OtpPageState();
}
class _OtpPageState extends State<OtpPage> {
 TextEditingController otpController = TextEditingController();
 void verifyOtp() {
   String otp = otpController.text;
   print("OTP: $otp");
 }
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text("Verify OTP"),
     ),
     body: Padding(
       padding: EdgeInsets.all(20),
       child: Column(
         children: [
           TextField(
             controller: otpController,
             keyboardType: TextInputType.number,
             decoration: InputDecoration(
               labelText: "Enter OTP"
             ),
           ),
           SizedBox(height: 20),
           ElevatedButton(
             onPressed: verifyOtp,
             child: Text("Verify")
           )
         ],
       ),
     ),
   );
 }
}

การส่ง OTP ไปตรวจสอบกับ API

เมื่อผู้ใช้กรอก OTP แล้ว แอปจะต้องส่งข้อมูลไปยัง API ของ Backend
เพื่อตรวจสอบว่ารหัสถูกต้องหรือไม่

import 'dart:convert';
import 'package:http/http.dart' as http;
Future verifyOtp(String otp) async {
 final response = await http.post(
   Uri.parse("https://api.example.com/verify-otp"),
   headers: {
     "Content-Type": "application/json"
   },
   body: jsonEncode({
     "otp": otp
   })
 );
 if (response.statusCode == 200) {
   return true;
 } else {
   return false;
 }
}

ตัวอย่างโครงสร้างฐานข้อมูล OTP

ฝั่ง Backend มักจะเก็บ OTP ในฐานข้อมูลชั่วคราวเพื่อใช้ตรวจสอบ

CREATE TABLE otp_codes (
 otp_id SERIAL PRIMARY KEY,
 user_id INT,
 otp_code VARCHAR(10),
 expired_at TIMESTAMP,
 created_at TIMESTAMP DEFAULT NOW()
);

แนวทางเพิ่มความปลอดภัยของ OTP

• กำหนดอายุของ OTP เช่น 5 นาที


• จำกัดจำนวนครั้งที่กรอก OTP ผิด


• เข้ารหัส OTP ก่อนบันทึกในฐานข้อมูล


• ใช้ HTTPS ในการส่งข้อมูล

การใช้งานแพ็กเกจสำหรับ OTP

Flutter มีแพ็กเกจที่ช่วยสร้างช่องกรอก OTP ได้ง่าย เช่น

• pin_code_fields


• otp_text_field

แพ็กเกจเหล่านี้ช่วยให้ UI ของการกรอก OTP ดูเป็นช่องตัวเลข
เหมือนแอปธนาคารหรือแอปยืนยันตัวตน

สรุป

ระบบ OTP เป็นฟีเจอร์สำคัญที่ช่วยเพิ่มความปลอดภัยให้กับแอปพลิเคชัน
โดย Flutter สามารถสร้าง UI สำหรับกรอก OTP และเชื่อมต่อกับ Backend
เพื่อตรวจสอบรหัสได้ผ่าน REST API

การออกแบบระบบ OTP ที่ดีควรมีการกำหนดอายุของรหัส
จำกัดจำนวนครั้งที่กรอกผิด และใช้ระบบเข้ารหัส
เพื่อป้องกันการโจมตีและเพิ่มความปลอดภัยให้กับผู้ใช้