Workflow: Mengirim Kode OTP & Verifikasi 2FA

Panduan ini menjelaskan arsitektur dan langkah pengiriman kode verifikasi satu kali (One-Time Password) ke WhatsApp pelanggan secara otomatis saat proses registrasi, login, atau transaksi sensitif.

1. Pratinjau Pesan OTP di Layar Pengguna

Tampilan template resmi kategori AUTHENTICATION dengan tombol Salin Kode:

CODE

┌──────────────────────────────────────────────┐
│ 🔐 Kode Keamanan Akun                        │
│                                              │
│ Kode verifikasi PFNApp Anda adalah: *492019* │
│ Berlaku selama 5 menit. Jangan berikan kode  │
│ ini kepada siapa pun, termasuk pihak kami.   │
│                                              │
│ ──────────────────────────────────────────── │
│ [ 📋 Salin Kode: 492019 ]                    │
│ 14:20 ✓✓                                     │
└──────────────────────────────────────────────┘

2. Persiapan Template & Kebutuhan (1 Menit)

Buka menu Console > WhatsApp > Templates (/console/whatsapp/templates).
Klik Buat Template:
- Nama Template: otp_auth_code
- Kategori: AUTHENTICATION
- Bahasa: Indonesian (id)
- Tipe Tombol: OTP / COPY_CODE
Simpan dan tunggu status template disetujui (umumnya instan).

3. Contoh Implementasi Pengiriman OTP

Kirimkan HTTP POST ke /api/whatsapp/messages dengan parameter template otp_auth_code:

Node.js / TypeScript (Next.js / Express Backend)

TYPESCRIPT

interface SendOtpOptions {
  phoneNumber: string
  otpCode: string
}
 
export async function sendWhatsAppOtp({
  phoneNumber,
  otpCode,
}: SendOtpOptions) {
  const response = await fetch("https://pfnapp.id/api/whatsapp/messages", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.PFN_WHATSAPP_API_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      to: phoneNumber, // contoh: "+6281234567890"
      type: "template",
      template: {
        name: "otp_auth_code",
        language: { code: "id" },
        components: [
          {
            type: "body",
            parameters: [
              { type: "text", text: otpCode }, // Variabel {{1}} di body teks
            ],
          },
          {
            type: "button",
            sub_type: "copy_code",
            index: "0",
            parameters: [
              { type: "text", text: otpCode }, // Parameter kode pada tombol Salin Kode
            ],
          },
        ],
      },
    }),
  })
 
  if (!response.ok) {
    const errorData = await response.json()
    throw new Error(`Gagal mengirim OTP: ${JSON.stringify(errorData)}`)
  }
 
  return await response.json()
}

PHP / Laravel (Service Class)

PHP

namespace App\Services;
 
use Illuminate\Support\Facades\Http;
 
class WhatsAppOtpService
{
    public function sendOtp(string $phoneNumber, string $otpCode): array
    {
        $response = Http::withToken(config('services.pfn.whatsapp_key'))
            ->post('https://pfnapp.id/api/whatsapp/messages', [
                'to' => $phoneNumber,
                'type' => 'template',
                'template' => [
                    'name' => 'otp_auth_code',
                    'language' => ['code' => 'id'],
                    'components' => [
                        [
                            'type' => 'body',
                            'parameters' => [
                                ['type' => 'text', 'text' => $otpCode],
                            ],
                        ],
                        [
                            'type' => 'button',
                            'sub_type' => 'copy_code',
                            'index' => '0',
                            'parameters' => [
                                ['type' => 'text', 'text' => $otpCode],
                            ],
                        ],
                    ],
                ],
            ]);
 
        return $response->throw()->json();
    }
}

Python (FastAPI / Django Backend)

PYTHON

import os
import requests
 
def send_whatsapp_otp(phone_number: str, otp_code: str) -> dict:
    url = "https://pfnapp.id/api/whatsapp/messages"
    headers = {
        "Authorization": f"Bearer {os.getenv('PFN_WHATSAPP_API_KEY')}",
        "Content-Type": "application/json",
    }
    payload = {
        "to": phone_number,
        "type": "template",
        "template": {
            "name": "otp_auth_code",
            "language": {"code": "id"},
            "components": [
                {
                    "type": "body",
                    "parameters": [{"type": "text", "text": otp_code}],
                },
                {
                    "type": "button",
                    "sub_type": "copy_code",
                    "index": "0",
                    "parameters": [{"type": "text", "text": otp_code}],
                },
            ],
        },
    }
 
    res = requests.post(url, json=payload, headers=headers)
    res.raise_for_status()
    return res.json()

4. Rekomendasi Keamanan & Best Practices

Masa Berlaku Kode (TTL): Simpan hash kode OTP di memory cache (Redis) dengan TTL maksimal 5 menit.
Pembatasan Upaya (Rate Limiting): Batasi request pengiriman OTP maksimal 3 kali per nomor dalam rentang waktu 10 menit untuk mencegah spam dan tagihan tak terduga.
Format Nomor E.164: Pastikan backend Anda menormalisasi input pengguna (misal: otomatis mengubah 0812... menjadi +62812... sebelum request dikirim).