API Verifikasi SMS dengan Flutter

Pengaturan untuk Verifikasi SMS

Pusat Pesan adalah solusi CPaaS dengan rangkaian produk termasuk API SMS OTP, API SMS dan platform pemasaran WhatsApp.

‍

1. Buat Akun MessageCentral: Mendaftar untuk Pusat Pesan akun untuk memulai. Anda akan menerima ID pelanggan, yang akan Anda gunakan dalam aplikasi Anda.

2. Unduh dan Instal Flutter:
   
   Unduh Flutter: Buka halaman unduhan Flutter di situs web resmi Flutter: Unduhan Flutter.
   ‍
   Unduh Flutter SDK untuk sistem operasi Anda (Windows, macOS, atau Linux) .Instal Flutter:
   ‍
   Jendela:
   ‍
   Ekstrak file zip Flutter SDK yang diunduh ke lokasi di sistem Anda.
   Tambahkan direktori bin Flutter ke variabel PATH sistem Anda.
   
   MacOS/Linux:
   
   Ekstrak file Flutter SDK tar.gz yang diunduh ke lokasi di sistem Anda.
   Tambahkan direktori bin Flutter ke variabel PATH sistem Anda.
   
   Verifikasi Instalasi:
   Buka command prompt (pada Windows) atau terminal (di MacOS/Linux).
   Jalankan perintah berikut untuk memverifikasi instalasi:
   

flutter--version

‍

Ini harus mencetak versi Flutter yang diinstal. Jika diinstal dengan benar, Anda akan melihat sesuatu seperti:

Flutter x.x.x • channel stable • ...

‍

Atur Variabel Lingkungan PATH (Windows):

Klik kanan pada “PC ini” atau “My Computer” dan pilih “Properties”.

Klik “Pengaturan sistem lanjutan” dan kemudian “Variabel Lingkungan”.

Di bagian “Variabel sistem”, pilih variabel “Path” dan klik “Edit”.

Tambahkan path ke direktori bin Flutter (misalnya, C:\Flutter\bin) jika belum ada.

Klik “OK” untuk menyimpan perubahan.

‍

Atur Variabel Lingkungan PATH (macOS/Linux):

Buka terminal dan buka atau buat file.bash_profile di direktori home Anda.

‍

Tambahkan baris berikut, ganti /path/to/flutter dengan path aktual ke direktori bin Flutter Anda:

export PATH=$PATH:/path/to/flutter/bin

‍

Simpan file dan mulai ulang terminal agar perubahan berlaku.

‍

Setelah mengikuti langkah-langkah ini, Flutter harus diinstal dan siap digunakan pada sistem Anda. Anda sekarang dapat menggunakan Flutter untuk mengembangkan aplikasi seluler lintas platform.

‍

Langkah Integrasi

Proses ini melibatkan tiga langkah penting berikut:

‍

1. Rincian Pusat Pesan
2. Menambahkan Detail Pusat Pesan dalam Kode
3. Kirim Test Otp untuk verifikasi

a. Rincian Pusat Pesan

Setelah membuat akun di Pusat Pesan, Anda memerlukan detail berikut:

• ID Pelanggan - Anda bisa mendapatkan ID pelanggan dari Message Central Home Console
• Kredensi Login: Anda memerlukan email dan perlu membuat kata sandi.

b. Menambahkan Detail MessageCentral dalam Kode

Untuk menambahkan detail MessageCentral pada kode cari tahu definisi variabel dengan nama “CustomerID”, “email” dan “password”:

‍

String customerID = "C-45539F39A44****";
String email = "abhishek****k68@gmail.com";
String password = "*****";
String baseURL = "https://cpaas.messagecentral.com";
String? authToken;String? verificationId;
String? verificationStatus;

‍

Buat proyek Flutter baru:

Mulailah dengan membuat proyek Flutter baru menggunakan perintah berikut:

flutter create otp_app

Arahkan ke direktori proyek:

Arahkan ke direktori proyek yang baru dibuat:

cd otp_app

Perbarui pubspec.yaml:

Tambahkan paket http ke dependensi proyek Anda di file pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

Ganti isi lib/main.dart:

Ganti isi lib/main.dart dengan kode berikut:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'OTP App',
      home: OtpPage(),
    );
  }
}

class OtpPage extends StatefulWidget {
  @override
  _OtpPageState createState() => _OtpPageState();
}

class _OtpPageState extends State<OtpPage> {
  late TextEditingController _countryCodeController;
  late TextEditingController _mobileNumberController;
  late TextEditingController _otpController;
  String baseURL = "https://cpaas.messagecentral.com";
  String customerID = "C-45539F39A449437";
  String password = "Test@123";
  String email = "abhishekkaushik68@gmail.com";
  String? _authToken;
  String? _verificationId;
  String? _verificationStatus;

  @override
  void initState() {
    super.initState();
    _countryCodeController = TextEditingController();
    _mobileNumberController = TextEditingController();
    _otpController = TextEditingController();
  }

  @override
  void dispose() {
    _countryCodeController.dispose();
    _mobileNumberController.dispose();
    _otpController.dispose();
    super.dispose();
  }

  Future<void> _sendOtp() async {
    final countryCode = _countryCodeController.text;
    final mobileNumber = _mobileNumberController.text;
    final base64String = base64Encode(utf8.encode(password));
    final url =
        '$baseURL/auth/v1/authentication/token?country=IN&customerId=$customerID&email=$email&key=$base64String&scope=NEW';

    try {
      final response = await http.get(Uri.parse(url));
      if (response.statusCode == 200) {
        _authToken = jsonDecode(response.body)['token'];
        final sendOtpUrl =
            '$baseURL/verification/v3/send?countryCode=$countryCode&customerId=$customerID&flowType=SMS&mobileNumber=$mobileNumber';
        final sendOtpResponse = await http.post(Uri.parse(sendOtpUrl),
            headers: {'authToken': _authToken ?? ''});
        if (sendOtpResponse.statusCode == 200) {
          setState(() {
            _verificationId =
                jsonDecode(sendOtpResponse.body)['data']['verificationId'];
          });
          ScaffoldMessenger.of(context)
              .showSnackBar(SnackBar(content: Text('OTP sent successfully')));
        } else {
          ScaffoldMessenger.of(context)
              .showSnackBar(SnackBar(content: Text('Failed to send OTP')));
        }
      } else {
        ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text('Error generating auth token')));
      }
    } catch (e) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Error sending OTP')));
    }
  }

  Future<void> _validateOtp() async {
    final otpCode = _otpController.text;
    final countryCode = _countryCodeController.text;
    final mobileNumber = _mobileNumberController.text;
    final url =
        '$baseURL/verification/v3/validateOtp?countryCode=$countryCode&mobileNumber=$mobileNumber&verificationId=$_verificationId&customerId=$customerID&code=$otpCode';

    try {
      final response = await http
          .get(Uri.parse(url), headers: {'authToken': _authToken ?? ''});
      if (response.statusCode == 200) {
        _verificationStatus = jsonDecode(response.body)['verificationStatus'];
        ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text('OTP validated successfully')));
      } else {
        ScaffoldMessenger.of(context)
            .showSnackBar(SnackBar(content: Text('Failed to validate OTP')));
      }
    } catch (e) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Error validating OTP')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('OTP App')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            TextField(
              controller: _countryCodeController,
              decoration: InputDecoration(labelText: 'Country Code'),
            ),
            TextField(
              controller: _mobileNumberController,
              decoration: InputDecoration(labelText: 'Mobile Number'),
            ),
            ElevatedButton(
              onPressed: _sendOtp,
              child: Text('Send OTP'),
            ),
            if (_verificationId != null)
              Column(
                children: [
                  TextField(
                    controller: _otpController,
                    decoration: InputDecoration(labelText: 'Enter OTP'),
                  ),
                  ElevatedButton(
                    onPressed: _validateOtp,
                    child: Text('Validate OTP'),
                  ),
                  if (_verificationStatus != null)
                    Text('Verification Status: $_verificationStatus'),
                ],
              ),
          ],
        ),
      ),
    );
  }
}

c. Kirim SMS Test Otp untuk Verifikasi

Jika Anda perlu menguji layanan tanpa kode, Anda dapat pergi ke verifikasi SMS gratis halaman di situs web Pusat Pesan.

Untuk memastikan integrasi berhasil, kirim SMS OTP uji sebagai berikut:

1. Jalankan aplikasi Flutter:
   Jalankan aplikasi Flutter di emulator atau perangkat fisik:
   ‍
   Flutter run
Ini akan menjalankan skrip Flutter/Dart Anda dan menampilkan output apa pun yang dihasilkannya. Jika skrip Anda berisi kode UI Flutter, itu akan menjalankan aplikasi Flutter dan menampilkan UI di layar.
   ‍
2. Pengujian pada Emulator/Perangkat:
   Jalankan aplikasi Flutter Anda di emulator atau perangkat fisik menggunakan perintah flutter run. Masukkan kode negara, nomor ponsel, dan klik tombol “Kirim OTP” untuk mensimulasikan pengiriman OTP. Kemudian, masukkan kode OTP dan klik tombol “Validasi OTP” untuk mensimulasikan validasi OTP.