docs

WhatsAuth : Free 2FA, OTP, Notif, WhatsApp Gateway API Gratis

WhatsAuth menghadirkan solusi untuk :

  1. Single Sign On
  2. 2FA (2 Factor Auth)
  3. OTP (One Time Password)
  4. Notifikasi WA
  5. WhatsApp API Gateway untuk integrasi dengan aplikasi anda

Persiapan WhatsApp Gateway

WebHook

Tahapan ini dilakukan terlebih dahulu sebelum melakukan pendaftaran, hal-hal yang harus dipersiapkan antara lain:

  1. Siapkan Nomor WhatsApp yang akan dijadikan Gateway API
  2. Siapkan URL WebHook sebagai penerima pesan masuk. Jika menggunakan GoCroot URL webhook akan tampak seperti ini https://asia-southeast2-awangga.cloudfunctions.net/logiccoffee/webhook/nomor/62881022526506. ganti 62881022526506 dengan nomor whatsapp anda dengan format 628xxx. dan sesuaikan URL asia-southeast2-awangga dan logiccoffee sesuai dengan project dan nama GCF.
    image Contoh URL webhook yang didaftarkan ke apidocs: 
    https://asia-southeast2-awangga.cloudfunctions.net/bukupedia/webhook/nomor/6287752000300
  3. Buat dahulu database dengan nama yang sesuai dengan keinginan kemudian edit pada file db.go folder config nama database yang sudah dibuat. 
    var mongoinfo = atdb.DBInfo{
    DBString: MongoString,
    DBName:   "naskah",
}

    Contoh diatas adalah nama database nya naskah

  4. Pengguna GoCroot cukup untuk membuat collection baru bernama profile di dalam database kemudian isi dengan json: 
    {
  "token": "v4.public.asdasfafdfsdfsdf",
  "phonenumber": "62881022526506",
  "secret": "secretkamuyangpanjangdanrumit089u08j32",
  "url": "https://asia-southeast2-awangga.cloudfunctions.net/logiccoffee/webhook/nomor/62881022526506",
  "urlapitext": "https://api.wa.my.id/api/v2/send/message/text",
  "urlapiimage": "https://api.wa.my.id/api/send/message/image",
  "urlapidoc": "https://api.wa.my.id/api/send/message/document",
  "urlqrlogin": "https://api.wa.my.id/api/whatsauth/request",
  "qrkeyword": "wh4t5auth0",
  "publickey": "0d6171e848ee9efe0eca37a10813d12ecc9930d6f9b11d7ea594cac48648f022",
  "botname": "lofe",
  "triggerword": "lofe",
  "telegramtoken": "",
  "telegramname": ""
}

    Silahkan sesuaikan pada bagian token, phonenumber dan secret. Untuk nama bot sesuaikan di bagian botname dan triggerword. url disamakan dengan url webhook.

  5. Pengguna GoCroot untuk login menggunakan google sign in, maka buat juga collection credentials yang berisi: 
    {
   "token": "##TOKEN##",
   "refresh_token": "##RTOKEN##",
   "token_uri": "https://oauth2.googleapis.com/token",
   "client_id": "##Client_ID##",
   "client_secret": "##CLIENTSECRET##",
   "scopes": [
     "https://www.googleapis.com/auth/spreadsheets",
     "https://www.googleapis.com/auth/documents",
     "https://www.googleapis.com/auth/drive",
     "https://www.googleapis.com/auth/blogger",
     "https://www.googleapis.com/auth/gmail.send",
     "https://www.googleapis.com/auth/gmail.readonly",
     "https://www.googleapis.com/auth/calendar",
     "https://www.googleapis.com/auth/drive.file"
   ],
   "expiry": "2024-06-13T17:27:35.666Z",
   "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
   "auth_uri": "https://accounts.google.com/o/oauth2/auth",
   "javascript_origins": [
     "https://whatsauth.my.id",
     "https://wa.my.id",
     "https://www.do.my.id"
   ],
   "project_id": "awangga",
   "redirect_uris": [
     "https://wa.my.id/gsign/",
     "https://www.do.my.id/login/"
   ],
   "tokentype": "Bearer",
   "accesstoken": "##ACCESSTOKEN##"
}

    Jangan lupa untuk setting PRKEY yang berisi private key paseto pada setting env atau secrets settings

Pendaftaran WhatsApp Gateway Melalui Interface Web

Proses nya pertama login dulu di wa.my.id dengan urutan :

  1. Buka laman login wa.my.id. Scan QR Code dengan scanner QR atau tombol foto dari aplikasi whatsapp, kakak akan diarahkan masuk ke dalam situs.
    image
  2. Input URL dan Secret Webhook kakak terus klik submit.
  3. Masukkan Pair Code ke WhatsApp yang ada di Handphone tunggu beberapa saat sampai proses loading di handphone selesai.
    WhatsApp Image 2023-11-07 at 01 07 50_3f9cbb85
    WhatsApp Image 2023-11-07 at 01 07 45_d9155096
    WhatsApp Image 2023-11-07 at 01 07 39_e0a1d259
    Setelah itu beri nama whatsauth dan akan ada linked device yang baru pada whatsapp anda WhatsApp Image 2024-11-20 at 18 10 19_87591c0f
  4. Simpan token sementara yang muncul untuk digunakan di laman apidocs untuk ditukar menjadi token yang berlaku selama 30 hari.
    image
  5. Kita akan melakukan uji pengiriman pesan ke nomor orang lain untuk memastikan WhatsApp kita sudah terdaftar dengan baik. Masuk menu Kirim Pesan untuk mengirimkan pesan.
    image
    image
    Tunggu beberapa menit maka pesan akan sampai ke tujuan, pastikan nomor tujuan tidak memblokir nomor pengirim.
  6. Buka Dokumen api untuk menukar token langkah sebelumnya menjadi token yang berlaku selama 30 hari.
  7. Klik bagian Authorize dan masukkan token ke dalam kolom Value: dan klik Authorize
    image
    image
  8. Klik API signup, klik Try it out. Kemudian masukkan URL dan Secret dari WebHook yang sudah dibuat sebelumnya. Lihat respon, simpan baik baik token yang diterima, token tersebut berlaku selama 30 hari. image image
    Untuk pengguna GoCroot, pakai token balasan tersebut untuk di update ke dalam colection profile database mongo yang digunakan WeebHook

List fungsi API Lainnya

Beberapa list fungsi API lainnya :

  1. Untuk pendaftaran ulang device(whatsapp baru install ulang). Pilih pada bagian API device. Klik Try it out, kemudian masukkan token pada langkah sebelumnya. Ketika execute, maka akan ada notifikasi Pair Device pada handphone. Masukkan kode unik dari respon server field code ke WhatsApp pair device di handphone.
    image
    WhatsApp Image 2023-11-07 at 01 07 50_3f9cbb85
    WhatsApp Image 2023-11-07 at 01 07 45_d9155096
    WhatsApp Image 2023-11-07 at 01 07 39_e0a1d259
    Tunggu beberapa menit hingga proses sinkronisasi WhatsApp selesai berjalan.
  2. Mencoba mengirimkan notif pesan kepada nomor telepon tujuan. Buka API message klik Try it out, isi to,isgroup dan message. Ketika klik execute maka akan ada notif pesan ke nomor tujuan dari nomor Gateway yang didaftarkan. image

Login Menggunakan WhatsAuth

Tutorial Web

API whatsauth dapat digunakan untuk pengembangan implementasi SSO, login menggunakan QR dan Google SignIn. Buat repo baru yang berisi 3 file utama, yaitu:

  1. index.html : File html utama yang memanggil js qr dan gsi 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WhatsAuth | Free WhatsApp API OTP Notif Broadcast Gratis</title>
    <link href="style.css" rel="stylesheet">
	<script src="qr.js" type="module"></script>
	<script src="gsi.js" type="module"></script>
</head>
<body>
 <div id="hasphonenumber" class="w-full h-screen bg-blue-100 flex items-center justify-center">
     <div class="w-96 bg-white rounded-xl">
         <p class="font-bold text-center mb-4" id="useracclog">Tap/Scan dengan <a href="./camwab.jpg" target="_blank">Camera WA</a></p>
         <div class="flex justify-center mt-2 mb-4" id="whatsauthqr">
             <img src="loading.svg">
         </div>
         <p class="font-bold text-center mb-4" id="whatsauthcounter">counter</p>
         <p class="font-bold text-center mb-4" id="logs"><a href="https://wa.my.id">WhatsAuth Free WhatsApp Notif, OTP, API Gateway Gratis</a></p>
     </div>
 </div>
</body>
</html>
  2. qr.js : pengaturan login menggunakan qr
    Setting Parameter 
    import {qrController,deleteCookie} from "https://cdn.jsdelivr.net/gh/whatsauth/js@0.2.1/whatsauth.js";
import { wauthparam } from "https://cdn.jsdelivr.net/gh/whatsauth/js@0.2.1/config.js";
   
wauthparam.auth_ws="d3NzOi8vYXBpLndhLm15LmlkL3dzL3doYXRzYXV0aC9wdWJsaWM=";
wauthparam.keyword="aHR0cHM6Ly93YS5tZS82MjgzMTMxODk1MDAwP3RleHQ9d2g0dDVhdXRoMA==";
wauthparam.tokencookiehourslifetime=18;
wauthparam.redirect ="/auth"
deleteCookie(wauthparam.tokencookiename);
qrController(wauthparam);

    Ubah variabel wauthparam.keyword disesuaikan dengan nomor yang di daftarkan di WhatsAuth. Gunakan Base64 Decode dan Encode dengan melakukan update dari string keyword diatas untuk di update. image

  3. gsi.js : pengaturan login menggunakan google sign in 
    import {setCookieWithExpireHour,getCookie} from "https://cdn.jsdelivr.net/gh/jscroot/lib@0.0.4/cookie.js";
import {postJSON} from "https://cdn.jsdelivr.net/gh/jscroot/lib@0.0.4/api.js";
import {redirect} from "https://cdn.jsdelivr.net/gh/jscroot/lib@0.0.4/url.js";
import {addCSSInHead,addJSInHead} from "https://cdn.jsdelivr.net/gh/jscroot/lib@0.1.6/element.js";
import Swal from 'https://cdn.jsdelivr.net/npm/sweetalert2@11/src/sweetalert2.js';
   
   
await addCSSInHead("https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.css");
   
const url="https://asia-southeast2-awangga.cloudfunctions.net/bukupedia/auth/users";
   
const client_id="239713755402-4hr2cva377m43rsqs2dk0c7f7cktfeph.apps.googleusercontent.com";
   
// Panggil fungsi untuk menambahkan elemen
appendGoogleSignin(client_id,url);
   
   
// Buat fungsi untuk memanggil gsi js dan menambahkan elemen div ke dalam DOM
async function appendGoogleSignin(client_id, target_url) {
    try {
        // Memuat script Google Sign-In
        await addJSInHead("https://accounts.google.com/gsi/client");
        // Menginisialisasi Google Sign-In dan menetapkan gSignIn sebagai callback
        google.accounts.id.initialize({
            client_id: client_id,
            callback:  (response) => gSignIn(response, target_url), // Menggunakan gSignIn sebagai callback untuk Google Sign-In
        });
        // Memunculkan pop-up Google Sign-In
        google.accounts.id.prompt();
        console.log('Google Sign-In open successfully!');
    } catch (error) {
        console.error('Failed to load Google Sign-In script:', error);
    }
}
   
async function gSignIn(response, target_url) {
    try {
        const gtoken = { token: response.credential };
        await postJSON(target_url, "login", getCookie("login"), gtoken, responsePostFunction);
    } catch (error) {
        console.error("Network or JSON parsing error:", error);
        Swal.fire({
            icon: "error",
            title: "Network Error",
            text: "An error occurred while trying to log in. Please try again.",
        });
    }
}
   
function responsePostFunction(response) {
    if (response.status === 200 && response.data) {
        console.log(response.data);
        setCookieWithExpireHour('login',response.data.token,18);
        redirect("/dashboard");
    } else {
        console.error("Login failed:", response.data?.message || "Unknown error");
        Swal.fire({
            icon: "error",
            title: "Login Failed",
            text: response.data?.message || "Anda belum terdaftar dengan login google, silahkan tap atau scan qr dahulu untuk pendaftaran.",
        }).then(() => {
            redirect("/login");
        });
    }
}

Untuk file-file tambahan:

  1. style.css
  2. loading.svg

Jangan lupa untuk menambahkan domainnya di Console APIs&Services - Client ID for Web application
image

Repo Auth

Untuk melakukan otorisasi antara frontend dan backend maka diperlukan satu repo tambahan bernama auth(ada di settingan qr.js yaitu /auth). Pada file index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="index.js" type="module"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selamat Datang di Naskah Bukupedia</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="scene">
        <div class="shadow"></div>
        <div class="jumper">
          <div class="spinner">
            <div class="scaler">
              <div class="loader">
                <div class="cuboid">
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      
      </div>
</body>
</html>

Pada file index.js

import {getCookie} from "https://cdn.jsdelivr.net/gh/jscroot/lib@0.1.8/cookie.js";
import {getJSON} from "https://cdn.jsdelivr.net/gh/jscroot/lib@0.1.8/api.js";
import {redirect} from "https://cdn.jsdelivr.net/gh/jscroot/lib@0.1.8/url.js";

if (getCookie("login")){
    getJSON("https://asia-southeast2-awangga.cloudfunctions.net/florka/data/user","login",getCookie("login"),responseFunction);
}else{
    redirect("/login");
}


function responseFunction(result){
    console.log(result);
    if (result.status === 200){
        redirect("/dashboard");
    }else{
        redirect("/daftar");
    }
}

dan file style.css

Integrasi WhatsAuth dengan JSCroot dan GOCroot

Tutorial Web

Untuk pengembangan sendiri. Silahkan buka Panduan Deployment WebHook

This site is open source. Improve this page.