Tombol Login dengan Google untuk Web

Tombol Login dengan Google untuk Web

Tentang codelab ini

subjectTerakhir diperbarui Jul 9, 2025
account_circleDitulis oleh Brian Daugherty

1. Ringkasan

Dalam codelab ini, kita akan membuat 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 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 sesuai bagi Anda.
  2. Project Google Cloud. Anda dapat menggunakan project yang ada atau membuat project baru. Akun dan project Google Cloud Platform tidak dikenai biaya.
  3. Pengetahuan dasar tentang HTML, CSS, JavaScript, dan Chrome DevTools (atau yang setara).

Mari kita mulai.

2. Membuat halaman login Anda

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 sejumlah hal:

  • mengonfigurasi library Google Identity Services menggunakan g_id_onload,
  • menampilkan tombol Login dengan Google menggunakan g_id_signin,
  • menambahkan handler 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 yang mungkin terasa sedikit aneh dengan data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE".

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

3. Menyajikan halaman web Anda

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

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

Pilih salah satu yang paling sesuai bagi Anda. Setelah penyiapan, kita akan menggunakan URL untuk mengonfigurasi klien web OAuth.

Secara lokal dari komputer Anda

Pastikan Python3 terinstal di sistem Anda. Penyiapan berbeda-beda menurut OS dan platform. Mulailah dengan Penyiapan dan Penggunaan Python jika Anda perlu menginstal Python di komputer Anda.

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 menayangkan halaman login Anda. URL-nya adalah

http://localhost:8000

Dari platform pengembangan web

Jika Anda telah 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 glitch.com. Misalnya, jika project glitch Anda bernama gis-example, maka 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 dan mengonfigurasi klien web OAuth 2.0.

Salin atau catat URL tersebut, karena akan digunakan di 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 Web application dari dropdown Application type.
  • Tekan tombol Add URI di bagian Authorized JavaScript origins
  • Masukkan URL yang menghosting index.html dari Langkah 3 Sajikan halaman web Anda.

    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 ID Klien baru. Di editor, ganti PUT_YOUR_WEB_CLIENT_ID_HERE dengan Client ID baru Anda. ID klien akan terlihat seperti contoh berikut: 1234567890-abc123def456.apps.googleusercontent.com.

Ayo login!

5. Login

Pertama, buka konsol developer browser Anda. 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, dialog izin akan ditampilkan.

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

Dalam Codelab ini, kita akan mendekode dan mencetak konten JWT. Dalam aplikasi web produksi, Anda akan memverifikasi dan menggunakan JWT yang telah 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 petik 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 harus cukup mudah dipahami. Nilai lainnya digunakan untuk memverifikasi JWT sebelum Anda menggunakannya. Mendapatkan informasi pengguna dari token ID memiliki informasi lebih lanjut tentang arti semua kolom.

7. Menyesuaikan tombol

Penempatan 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 Anda.

Mari kita ubah warna tombol menjadi biru dan ubah teksnya menjadi Daftar dengan Google.

Buka index.html, temukan elemen g_id_signin, lalu 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 coba 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 berikut dapat membantu Anda melakukan langkah berikutnya:

Pertanyaan umum (FAQ)

bug_report Laporkan kesalahan