Kita dapat membuat google one tap untuk memudahkan login pada aplikasi kita. Tapi kendalanya adalah saat client tidak ada sesi google atau tidak memiliki akun google. Jadi kita harus membuat login manual misal menggunakan username dan password. Disini kita akan membuat script manual login jika google one tap tidak menemukan sesi.

Lanjutan dari artikel request mas Bambang Abdi Setiawan.

Pertama mari kita clone aplikasi https://github.com/ngadimin51/googleonetap

Buka code editor anda (saya menggunakan vscode) lalu ketikkan perintah berikut

git clone https://github.com/ngadimin51/googleonetap.git // cloning repository dari github
cd googleonetap/ // change directory to googleonetap hasil clone
npm i // instalasi repository
node index.js // menjalankan perintah aplikasi

lalu buka browser dan buka alamat http://localhost:3000

Lalu lakukan inspect  > console pada halaman tersebut. Maka akan terdapat error seperti ini

Failed to load resource: the server responded with a status of 403 () // server respond dari google 403 (unauthorized)
given client ID is not found. // ini dikarenakan client ID tidak ada
index.js:42 isNotDisplayed // hasil dari index.js pada baris ke 42
index.js:43 invalid_client // hasil dari index.js pada baris ke 43

Penjelasan :

1. Failed to load resource: the server responded with a status of 403 ().
   Ini karena tidak diijinkan, kenapa tidak diijinkan? Lihat error baris ke 2
2. given client ID is not found. Client ID tidak ada, check folder public file index.js pada baris ke 36
   client_id: 'YOUR-CLIENT-ID',  isi dengan client id yang anda dapatkan seperti pada tutorial ini

Jika sudah anda isi maka aplikasi akan berjalan lancar. Saya asumsikan aplikasi sudah berjalan lancar. Sekarang kita akan melakukan debug agar pada saat tidak ada client tidak ada akun google maka kita bisa melakukan perintah baru misal login tanpa google.

Perbarui script index.js pada baris ke 40 menjadi seperti ini

// google.accounts.id.prompt((notification) => {
//     if (notification.isNotDisplayed()) {
//         console.log('isNotDisplayed')
//         console.log(notification.getNotDisplayedReason())
//     } else if (notification.isSkippedMoment()) {
//         console.log('isSkippedMoment')
//         console.log(notification.getSkippedReason())
//     } else if(notification.isDismissedMoment()) {
//         console.log('isDismissedMoment')
//         console.log(notification.getDismissedReason())
//     }
// });
google.accounts.id.prompt((notification) => {
    try {
        // Jika tidak ada sesi maka jalankan script loginManual()
        notification.getNotDisplayedReason() === 'opt_out_or_no_session' ? loginManual() : null
    } catch (error) {
        // Jika error tampilan error dan tampilkan hasil notification pada console
        console.log(error)
        console.log(notification)
    }
})

Pada balis dibawah initializeGSI() kita buat tambahan fungsi loginManual()

function loginManual() {
    const target = document.querySelector('#pesan')
    target.innerHTML = `Please login manually<br>
    <img src="https://ndalu.id/favicon.png" class="small-circle" style="max-width: 100px; max-height: 100px" />
    <button onclick="manuallyLogin()">
        Login
    </button>`
    document.querySelector('#notif').style.display = 'block'
    const credShow = document.querySelector('#credential')
    credShow.innerHTML = `
    <label>User Name<label>
    <input name="username" />
    <br />
    <label>Password<label>
    <input name="password" type="password" />
    <br />`
    credShow.classList.add('show')
}

function manuallyLogin() {
    const uName = document.querySelector('input[name="username"]')
    const uPass = document.querySelector('input[name="password"]')
    if (!uName.value) return alert('Username is empty')
    if (!uPass.value) return alert('Password is empty')
    if (uName.value === 'tofik' && uPass.value === 'ndalu.id') {
        document.querySelector('#notif').style.display = 'block'
        const credShow = document.querySelector('#credential')
        credShow.innerHTML = JSON.stringify({
            username: uName.value,
            password: uPass.value,
            message: `Welcome ${uName.value}`
        }, undefined, 2)
        credShow.classList.add('show')
    } else {
        alert('Username or Password is not match')
    }
}

Setelah anda perbarui script pada client id makan matikan program dengan menekan ctrl + c lalu jalankan ulang dengan mengetik perintah node index.js

Refresh halaman localhost:3000

Untuk mencoba script baru ini lebih baik gunakan mode incognito untuk memastikan tidak ada sesi pada browser.

Hasilnya bisa dilihat pada video ini

Sekian dan terima kasih, jika mau request script silahkan komen di video youtube. Terima kasih.