membuat login google one tap sign in part2

GOOGLE SIGN IN #2

Lanjutan dari article GOOGLE SIGN IN #1

"Membuat login dengan google #2.
Bagaimana sih cara kita membuat halaman website kita agar bisa login dengan google?
Disini saya akan membuat contoh login google dengan one tap .. .. .."

Setelah kita memiliki client id dari google api, sekarang saatnya kita coding.

Tahapan :

  1. Membuat server local
    • Menggunakan nodejs
    • install framework express
  2. Coding
    • buat statik file index.html
    • coding html
    • coding  css
    • dan javascript

SERVER LOCAL

Buat 1 buah folder untuk latihan kita, untuk saya akan saya beri nama folder tersebut yaitu googleonetap. Seperti ini struktur foldernya

Buka vscode dan arahkan ke dalam folder kerja kita, lalu pertama-tama yang akan kita lakukan adalah inisialisasi dari project kita. Buka terminal vscode dan ketik 

npm init y //inisialisasi project

Otomatis didalam folder kita akan ada package.json. File ini yang akan menampung semua informasi project kita.

Install framework express, kita bisa saja dengan nodejs murni untuk membuat sebuah server, tp percayalah bahwa framework diciptakan untuk mempermudah pekerjaan kita .

npm i --save express

Ada baiknya juga kita install nodemon, secara mudahnya fungsi nodemon adalah memantau perubahan code agar kita tidak mengulang-ulang stop & run aplikasi kita saat kita melakukan perubahan selama development. Agar nodemon bisa kita gunakan untuk keseluruhan project maka lebih baik kita install nodemon secara global.

npm i -g nodemon

sekarang kita buat 1 buah file dengan nama index.js, lalu ketikkan code berikut

'use strict' //MODE KETAT..!!!! Saya sangat merekomendasikan use strict dalam pengetikan.


//panggil express
const express = require('express')

//deklarasikan variable app adalah express()
const app = express()

//kita membutuhkan http untuk pembuatan server. Panggil http
const http = require('http')

//Kita jadikan app express sebagai server http
const server = http.createServer(app)

//path juga kita panggil untuk mengirim file index.html nantikan ke seluruh alamat web kita.
const path = require('path')


//kita persiapkan seluruh alamat web kita untuk menampilkan index.html
app.get('/*', (req, res) => {
	//mengirim file index.html dengan cara join semua path ke public
	//saat ini belum kita buat folder public dan indexhtmlnya
    res.sendFile(path.join(__dirname, 'public', 'index.html'))
})


//jalankan server pada port 3000, buat log agar kita tahu bahwa server sudah berjalan
server.listen(3000, console.log('Server listen port '+ 3000))

simpan file tersebut, lalu jalankan dengan perintah 

nodemon index

Buka browser lalu ketik alamat localhost:3000

Ooopssss, error

Pasti akan error jika kita belum membuat folder public dan diisi dengan index.html

Jadi kita buat folder public, lalu didalamnya kita buat file index.html

Lalu refresh halaman web tadi, skarang error hilang tapi tidak menampilkan apa-apa karena kita belum mengisi apapun didalam index.html.

Ketik html code seperti dibawah ini

<!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>nDalu.id</title>
</head>
<body>
    
</body>
</html>

secara default halaman html adalah seperti ini. Jadi yang akan kita lakukan sekarang adalah menambahkan kode menjadi dibawah ini, lihat tanda tag comment <!-- COMMENT -->

<!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>nDalu.id</title>
    
    <!--For Style-->
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
            font-family: 'Poppins', sans-serif;
        }
        .center-page {
            text-align: center;
        }
        img.small-circle {
            border-radius: 50%;
        }
        img.icon {
            width: 24px;
            height: 24px;
            margin-right: 5px;
        }
        button {
            display: flex;
            align-items: center;
            justify-content: center;
            outline: transparent;
            float: right;
            padding: 5px 10px;
            cursor: pointer;
            background-color: white;
        }
        span {
            font-weight: bold;
            margin-left: -50px;
            font-size: 1rem;
        }
        p {
            font-size: 1.3rem;
        }
        pre {
            max-width: 80vw;
            white-space: pre-wrap;
            text-align: left;
        }
    </style>

</head>
<body>

	<!-- COMMENT -->
	<div class="center-page">
        <a href="https://github.com/ngadimin51/googleonetap">
            <img src="https://www.google.co.id/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="">
        </a>
        <span>OneTap Signin</span>
        <p id="pesan">Belajar google one tap sign in bersama nDalu.id</p>
        <pre id="credential"></pre>
    </div>
    <!-- Ini adalah tampian html anda -->

</body>
</html>

Refresh halaman anda, sekarang akan tampil halaman seperti contoh video diatas. Tapi login google nya belum dibuat.

selanjutnya masukkan script dibawah ini tepat diatas </body>

	<!--Load GSI-->
	<script src="https://accounts.google.com/gsi/client"></script>
	
	<!--Custom Script-->
    <script>

		//Fungsi untuk melakukan decode hasil response google ap
        function parseJwt (token) {
            var base64Url = token.split('.')[1];
            var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
            var jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
                return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
            }).join(''));

            return JSON.parse(jsonPayload);
        };


		//Fungsi untuk menghandle saat user melakukan otentikasi dengan google
        const onOneTapSignedIn = response => {
            const credential = parseJwt(response.credential) //tampung response credential
            const name = credential.name //tampung nama ke variable name
            const email = credential.email //tampung email ke variable email
            const picture = credential.picture //tampung alamat user picture ke variable picture

            const target = document.querySelector('#pesan') //tentukan elemen target
            
            
//ubah nailai html elemen target dengan script dibawha ini
            target.innerHTML = `Welcome ${name}<br>
            <img src="${picture}" class="small-circle" />
            <button onclick="signout()">
                <img src="https://image.similarpng.com/very-thumbnail/2020/12/Illustration-of-Google-icon-on-transparent-background-PNG.png" class="icon">
                SignOut
            </button>`
            
            
//Kita tampung semua hasil credential ke tag <pre> semua data ini bisa anda gunakan untuk validasi ke database anda saat user melakukan login
            document.querySelector('#credential').innerHTML = JSON.stringify(credential, undefined, 2)
        }


		//fungsi untuk inisialisasi GSI
        const initializeGSI = () => {
            google.accounts.id.initialize({
                client_id: 'YOUR-CLIENT-ID-HERE', //Isikan client ID anda
                cancel_on_tap_outside: false,
                callback: onOneTapSignedIn
            });
            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())
                }
            });
        }


		//fungsi untuk logout, disini saya arahkan ke reload page
        const signout = () => {
            google.accounts.id.disableAutoSelect()
            window.location.reload()
        }


		//Jalankan fungsi ini saat halaman diakses pertama kali
        initializeGSI()
    </script>

Yups, silahkan reload halaman web anda. Maka akan muncul daftar user anda saat mengunjungi halaman ini.

 

Tapi disini ada yang harus diperhatikan, bagaimana jika browsernya baru diinstall, belum pernah digunakan untuk mengunjungi apapun? Otomatis tidak ada data user google terekam disini. Jadi jika kita ingin membuat login user dengan google kita harus membuat langkah lain.

Itu akan saya bahas di artikel selanjutnya. Unuk script bisa anda clone dari github saya

  https://github.com/ngadimin51/googleonetap  

SIlahkan komen jika ada yang ingin ditanyakan.

 

Jakarta, 12 juli 2021.

Terima Kasih.

About Writer

Penulis adalah seorang penghobi ngulik komputer. Diawali dengan meledakkan beberapa PC pentium 1 untuk mengobati rasa penasarannya sampai akhirnya sekarang mempelajari bahasa pemrograman.

Berawal dari bahasa html dan css untuk membuat static page. Lalu mulai mengenal PHP untuk backend dan sekarang lebih menyukai NODEJS dan pembuatan aplikasi android ataupun ios

Tanya-tanya, hire pekerjaan, sekedar hay-hay'an silahkan contact di halaman Contact atau kunjungi channel saya