Tombol Login dengan Google untuk Web

1. Ringkasan

Dalam codelab ini, kita akan mem-build halaman web untuk login pengguna. Anda akan menggunakan library JavaScript Google Identity Services untuk menampilkan dan menyesuaikan tombol Login dengan Google.

Tombol Login dengan Google.

Yang akan Anda pelajari

  • Cara menambahkan tombol Login dengan Google ke halaman web
  • Cara menyiapkan aplikasi web OAuth 2.0
  • Cara mendekode token ID
  • Cara menyesuaikan tombol Login dengan Google

Yang akan Anda butuhkan

  1. Editor teks dan tempat untuk menghosting halaman web, lingkungan yang akan kita bahas dalam Codelab ini:
    • berjalan secara lokal di terminal di komputer Anda, atau
    • menggunakan platform seperti Glitch.
    Pilih lingkungan yang paling Anda kuasai.
  2. Project Google Cloud. Anda dapat menggunakan project yang ada atau membuat project baru. Akun dan project Google Cloud Platform gratis.
  3. Pengetahuan dasar tentang HTML, CSS, JavaScript, dan Chrome DevTools (atau yang setara).

Mari kita mulai.

2. Membuat halaman login

Lanjutkan dan tambahkan contoh kode ini ke dalam file bernama index.html. Anda dapat melakukannya di komputer menggunakan editor teks favorit atau di platform seperti Glitch.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://accounts.google.com/gsi/client" async></script>

    <script>
      function decodeJWT(token) {

        let base64Url = token.split(".")[1];
        let base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
        let jsonPayload = decodeURIComponent(
          atob(base64)
            .split("")
            .map(function (c) {
              return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
            })
            .join("")
        );
        return JSON.parse(jsonPayload);
      }

      function handleCredentialResponse(response) {

        console.log("Encoded JWT ID token: " + response.credential);

        const responsePayload = decodeJWT(response.credential);

        console.log("Decoded JWT ID token fields:");
        console.log("  Full Name: " + responsePayload.name);
        console.log("  Given Name: " + responsePayload.given_name);
        console.log("  Family Name: " + responsePayload.family_name);
        console.log("  Unique ID: " + responsePayload.sub);
        console.log("  Profile image URL: " + responsePayload.picture);
        console.log("  Email: " + responsePayload.email);
      }
    </script>
  </head>
  <body>
    <!-- g_id_onload contains Google Identity Services settings -->
    <div
      id="g_id_onload"
      data-auto_prompt="false"
      data-callback="handleCredentialResponse"
      data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE"
    ></div>
    <!-- g_id_signin places the button on a page and supports customization -->
    <div class="g_id_signin"></div>
  </body>
</html>

Kode ini adalah campuran HTML dan JavaScript, yang melakukan beberapa hal:

  • mengonfigurasi library Google Identity Services menggunakan g_id_onload,
  • menampilkan tombol Login dengan Google menggunakan g_id_signin,
  • menambahkan pengendali fungsi callback JavaScript bernama handleCredentialResponse untuk menerima kredensial login pengguna dari Google, dan
  • fungsi decodeJWT untuk mengonversi kredensial Token Web JSON (JWT) menjadi JSON biasa.

Ada kemungkinan data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE" terlihat sedikit berbeda.

Untuk saat ini, abaikan saja, kita akan membahasnya nanti.

3. Menyajikan halaman web

Kita akan membahas dua lingkungan untuk menyajikan index.html ke browser:

  • menjalankan server web secara lokal di komputer Anda
  • platform jarak jauh seperti Glitch.

Pilih yang paling Anda kuasai. Setelah penyiapan, kita akan menggunakan URL untuk mengonfigurasi klien web OAuth.

Secara lokal dari komputer Anda

Pastikan Python3 diinstal di sistem Anda. Penyiapan berbeda menurut OS dan platform. Mulai dengan Penyiapan dan Penggunaan Python jika Anda perlu menginstal Python di komputer.

Mulai server web Python di direktori yang berisi index.html:

$ python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

Server web kini memproses koneksi di port 8000 dan siap menyajikan halaman login Anda. URL-nya adalah

http://localhost:8000

Dari platform pengembangan web

Jika Anda memilih untuk mengedit dan menghosting halaman login menggunakan Glitch (atau yang setara), Anda akan dapat membuka index.html di panel pratinjau atau tab browser baru.

Biasanya, URL yang akan Anda gunakan adalah nama project yang Anda masukkan saat menyiapkan project glich.com. Misalnya, jika project glitch Anda bernama gis-example, URL-nya adalah https://gis-example.glitch.me. Tentu saja, Anda akan memilih nama project yang berbeda dan tidak dapat menggunakan kembali nama project ini. URL-nya adalah

https://<var>your-project-name</var>.glitch.me

Memuat halaman

Tunggu sebentar...

Pertama-tama, kita harus membuat klien web OAuth 2.0 dan mengonfigurasinya.

Salin atau catat URL-nya, URL ini akan digunakan pada langkah berikutnya.

4. Menyiapkan klien web OAuth

Mari kita konfigurasi OAuth agar orang dapat login.

  • Klik link ini untuk membuat klien Web OAuth 2.0. Jika diperlukan, wizard akan membantu Anda membuat dan menyiapkan Project Google Cloud baru.
  • Pilih Aplikasi web dari dropdown Jenis aplikasi.
  • Tekan tombol Tambahkan URI di bagian Asal JavaScript resmi
  • Masukkan URL yang menghosting index.html dari Langkah 3 Menyajikan halaman web.

    Dihosting di komputer lokal Anda

    Origin lokal yang dihosting di komputer Anda

    Dihosting di platform jarak jauh

    Menggunakan platform hosting jarak jauh
  • Tekan Buat
  • Salin Client ID baru.

Satu hal lagi yang perlu dibahas.

Kita harus kembali dan memperbarui index.html untuk menggunakan Client ID baru. Di editor Anda, ganti PUT_YOUR_WEB_CLIENT_ID_HERE dengan Client ID baru Anda. Client ID terlihat seperti contoh berikut: 1234567890-abc123def456.apps.googleusercontent.com.

Mari kita login.

5. Login

Pertama, buka konsol developer browser Anda. Semua error dan kredensial token ID JWT yang ditampilkan dari Google akan dicatat di sini.

Tekan tombol Login dengan Google.

Proses selanjutnya mungkin sedikit berbeda:

  • Jika saat ini Anda login ke lebih dari satu Akun Google, Anda akan diminta untuk memilih akun yang akan digunakan untuk login ke aplikasi web ini.
  • Jika ini adalah pertama kalinya Anda login ke aplikasi web ini, perintah izin akan ditampilkan.

Setelah memilih akun dan memberikan izin secara opsional, Google akan merespons dengan JWT. Fungsi callback handleCredentialResponse yang berjalan di browser akan menerima JWT.

Dalam Codelab ini, kita akan mendekode dan mencetak konten JWT. Di aplikasi web produksi, Anda akan memverifikasi dan menggunakan JWT yang didekode untuk melakukan sesuatu yang lebih bermakna, seperti membuat akun baru di platform backend atau membuat sesi baru untuk pengguna.

6. Memeriksa token ID JWT

JWT yang dienkode dicatat di konsol developer. Setelah mendekode JWT, beberapa kolom token ID yang umum digunakan juga dicatat ke konsol.

Anda dapat menggunakan alat online seperti jwt.io untuk mendekode JWT.

Atau, jq di terminal Anda juga dapat digunakan untuk mendekode dan melihat JWT (Anda mungkin perlu menggunakan pengelola paket untuk menginstal jq). Pertama, tempelkan string JWT yang dienkode ke dalam tanda kutip ganda:

$ JWT="eyJhbGciOiJSUzI1Ni ... Hecz6Wm4Q"

lalu gunakan perintah ini untuk mendekodenya

$ echo $JWT | jq -R 'split(".") | .[0],.[1] | @base64d | fromjson'
{
  "alg": "RS256",
  "kid": "c7e04465649ffa606557650c7e65f0a87ae00fe8",
  "typ": "JWT"
}
{
  "iss": "https://accounts.google.com",
  "azp": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
  "aud": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
  "sub": "2718281828459045",
  "email": "example@example.com",
  "email_verified": true,
  "nbf": 1744645148,
  "name": "Brian Daugherty",
  "picture": "https://lh3.googleusercontent.com/a/08a898b88ca4d6407be652d8",
  "given_name": "Brian",
  "family_name": "Daugherty",
  "iat": 1744645448,
  "exp": 1744649048,
  "jti": "52cd32984b30e178aa88bc2e75e63e055a461fcf"
}

Beberapa kunci dan nilai seperti email, nama, dan gambar seharusnya cukup mudah dipahami. Nilai lainnya digunakan untuk memverifikasi JWT sebelum Anda menggunakannya. Mendapatkan informasi pengguna dari token ID memiliki informasi selengkapnya tentang arti semua kolom.

7. Menyesuaikan tombol

Menempatkan tombol login default di halaman dilakukan seperti ini

    <div class="g_id_signin"></div>

dan Anda akan melihat tombol ini

Tombol Login dengan Google.

Namun, mungkin Anda ingin mengubah warna, ukuran, atau teks agar sesuai dengan tema situs.

Mari kita ubah warna tombol menjadi biru dan teksnya menjadi Sign up with Google.

Buka index.html, temukan elemen g_id_signin, dan tambahkan atribut data-theme="filled_blue" dan data-text="signup_with":

    <div
      class="g_id_signin"
      data-theme="filled_blue"
      data-text="signup_with"
    ></div>

Setelah menyimpan dan memuat ulang halaman, Anda akan melihat tombol biru dengan teks baru.

Tombol Daftar dengan Google.

Anda dapat menyesuaikan tombol lebih lanjut. Lihat atribut Data Visual untuk mengetahui daftar lengkap opsi dan mencoba generator kode HTML kami.

8. Referensi Tambahan

Selamat!

Anda telah menambahkan tombol Login dengan Google ke halaman web, mengonfigurasi klien web OAuth 2.0, mendekode token ID JWT, dan mempelajari cara menyesuaikan tampilan tombol.

Link ini dapat membantu Anda dalam langkah berikutnya:

Pertanyaan umum (FAQ)