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 git@gitlab.com:dioarafi1/easyoauth.git
Setelah repository ter-clone, buka direktori proyek.
Arsitektur Proyek
Proyek ini terdiri dari dua bagian utama:
Backend: Dikenal karena kemampuannya yang efisien, Go akan digunakan untuk menangani logika pengiriman dan verifikasi kode autentikasi melalui API Twilio.
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
Panduan Pengiriman SMS dengan Twilio
Dengan pengetahuan ini, Anda dapat melanjutkan untuk mengembangkan aplikasi lebih lanjut, menyesuaikannya dengan kebutuhan spesifik Anda, dan meningkatkan pengalaman pengguna secara keseluruhan. Semoga berhasil!
Top comments (0)