Pendahuluan

Keamanan digital menjadi salah satu aspek paling krusial dalam pengembangan aplikasi saat ini. Salah satu metode yang populer untuk memastikan identitas pengguna adalah melalui pengiriman kode autentikasi, atau One-Time Password (OTP). Dalam artikel ini, saya akan membahas cara membangun aplikasi verifikasi kode autentikasi menggunakan Go untuk backend dan Remix, Redux, serta Axios untuk frontend. Mari kita mulai!

Persiapan

Sebelum kita mulai, Anda perlu meng-clone repository proyek ini dari GitLab. Jalankan perintah berikut di terminal Anda:

git clone [email protected]:dioarafi1/easyoauth.git

gitlab

Setelah repository ter-clone, buka direktori proyek.

Arsitektur Proyek

Proyek ini terdiri dari dua bagian utama:

1. Backend: Dikenal karena kemampuannya yang efisien, Go akan digunakan untuk menangani logika pengiriman dan verifikasi kode autentikasi melalui API Twilio.

2. Frontend: Dengan Remix, kita akan membangun antarmuka pengguna yang responsif, menggunakan Redux untuk manajemen state dan Axios untuk komunikasi dengan backend.

Struktur Proyek

Struktur direktori proyek ini adalah sebagai berikut:

your_project/
├── client/
│   ├── src/
│   ├── package.json
│   └── remix.config.js
├── server/
│   ├── internal/
│   ├── main.go
│   └── routes/

Backend: Menggunakan Go dan Twilio

Instalasi

Untuk memulai, pastikan Anda sudah menginstal Go di sistem Anda. Setelah itu, Anda perlu menginstal SDK Twilio dengan menjalankan perintah berikut:

go get github.com/twilio/twilio-go

Konfigurasi Kredensial

Selanjutnya, Anda perlu menambahkan kredensial akun Twilio Anda. Buka file client.go di dalam folder twilio dan tambahkan informasi berikut:

const (
    accountSid = "YOUR_TWILIO_ACCOUNT_SID"
    authToken  = "YOUR_TWILIO_AUTH_TOKEN"
    verifySID  = "YOUR_TWILIO_VERIFY_SID"
)

Endpoint API

Backend Anda akan menyediakan dua endpoint utama:

1. Mengirim Kode Autentikasi

URL: http://localhost:3000/auth/send-code

Method: POST

Request Body:

{
    "to": "+62",
    "channel": "sms"
}

2. Memverifikasi Kode Autentikasi

URL: http://localhost:3000/auth/verify-code


Method: POST

Request Body:

{
    "to": "+62",
    "code": "553183"
}

Penanganan Kesalahan

Sistem API ini dirancang untuk memberikan respons yang jelas jika terjadi kesalahan. Beberapa kode kesalahan yang mungkin muncul antara lain:

400 Bad Request: Jika input tidak valid.

401 Unauthorized: Jika kode verifikasi yang diberikan tidak valid.

500 Internal Server Error: Jika terjadi kesalahan pada server.

Frontend: Membangun Antarmuka dengan Remix

Instalasi

Untuk membangun antarmuka pengguna, kita akan menggunakan Remix. Pertama, pastikan Anda berada di dalam direktori klien dan jalankan perintah berikut untuk menginstal dependensi:

npm install remix @reduxjs/toolkit react-redux axios

Komponen AuthForm

Salah satu komponen kunci dalam aplikasi ini adalah AuthForm, yang memungkinkan pengguna memasukkan nomor telepon dan kode verifikasi.

import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { sendAuthCode, verifyAuthCode } from '../../redux/authSlice';

const AuthForm = () => {
  const [phone, setPhone] = useState('');
  const [code, setCode] = useState('');
  const dispatch = useDispatch();
  const { message, error } = useSelector((state) => state.auth);

  const handleSendCode = () => {
    dispatch(sendAuthCode({ phone }));
  };

  const handleVerifyCode = () => {
    dispatch(verifyAuthCode({ phone, code }));
  };

  return (
    <div>
      <h2>Authentication</h2>
      <input
        type="text"
        value={phone}
        onChange={(e) => setPhone(e.target.value)}
        placeholder="Nomor Telepon"
      />
      <button onClick={handleSendCode}>Kirim Kode</button>
      <input
        type="text"
        value={code}
        onChange={(e) => setCode(e.target.value)}
        placeholder="Kode Verifikasi"
      />
      <button onClick={handleVerifyCode}>Verifikasi Kode</button>
      {message && <p>{message}</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  );
};

export default AuthForm;

Menjalankan Aplikasi Klien

Setelah semua konfigurasi selesai, jalankan aplikasi klien dengan perintah berikut:

npm run dev

Aplikasi akan tersedia di http://localhost:3000

Kesimpulan

Dengan mengikuti langkah-langkah yang telah dijelaskan, Anda kini telah berhasil membangun aplikasi verifikasi kode autentikasi menggunakan Go dan Remix. Aplikasi ini tidak hanya aman tetapi juga menyediakan pengalaman pengguna yang baik melalui antarmuka yang responsif dan interaktif.

Sumber Daya Tambahan

Dokumentasi API Twilio

SDK Twilio untuk Go

Panduan Pengiriman SMS dengan Twilio

Dokumentasi Remix

Dengan pengetahuan ini, Anda dapat melanjutkan untuk mengembangkan aplikasi lebih lanjut, menyesuaikannya dengan kebutuhan spesifik Anda, dan meningkatkan pengalaman pengguna secara keseluruhan. Semoga berhasil!