Tombol Login dengan Google untuk Web

Tombol Login dengan Google untuk Web

Tentang codelab ini

subjectTerakhir diperbarui Apr 28, 2025
account_circleDitulis oleh Brian Daugherty

1. Ringkasan

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

Tombol Login dengan Google.

  • 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
  1. Editor teks dan tempat untuk menghosting halaman web, lingkungan yang akan kita bahas dalam Codelab ini:
    • berjalan secara lokal di terminal komputer Anda, atau
    • menggunakan platform seperti Glitch.
    Pilih lingkungan yang paling nyaman bagi Anda.
  2. Project Google Cloud. Anda dapat menggunakan project yang sudah ada atau membuat project baru. Akun dan project Google Cloud Platform tersedia 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 dapat melakukan beberapa hal:

  • mengonfigurasi library Google Identity Services ini dengan 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 JSON Web Token (JWT) menjadi JSON biasa.

Mungkin ada yang tidak beres dengan data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE".

Untuk saat ini, abaikan saja, kita akan kembali sebentar lagi.

3. Menyajikan halaman web Anda

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 sukai. Setelah penyiapan, kita akan menggunakan URL tersebut untuk mengonfigurasi klien web OAuth.

Secara lokal dari komputer Anda

Pastikan Python3 terinstal di sistem Anda. Penyiapan berbeda menurut OS dan platform, mulai 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

Menggunakan platform jarak jauh

Jika memilih untuk mengedit dan menghosting halaman login menggunakan Glitch (atau yang setara), Anda seharusnya 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 diberi nama gis-example, URL-nya adalah https://gis-example.glitch.me. Tentu saja, Anda akan memilih nama project yang berbeda dan tidak dapat menggunakan nama yang sama. URL-nya adalah

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

Muat halaman

Tunggu sebentar...

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

Salin atau catat URL tersebut. URL tersebut akan digunakan pada langkah berikutnya.

4. Menyiapkan klien web OAuth

Mari kita konfigurasikan OAuth agar orang-orang dapat benar-benar login.

  • Klik link ini untuk membuat klien OAuth 2.0 Web. 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 JavaScriptorigin
  • Masukkan URL yang menghosting index.html dari Langkah 3 Tayangkan halaman web Anda.

    Dihosting di komputer lokal Anda

    Asal lokal yang dihosting di komputer Anda

    Dihosting pada 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. Client ID akan terlihat seperti contoh berikut: 1234567890-abc123def456.apps.googleusercontent.com.

Ayo masuk!

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!

Yang terjadi 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 apl web ini.
  • Jika ini pertama kalinya Anda login ke aplikasi web ini, dialog izin akan ditampilkan.

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

Dalam Codelab ini, kita mendekode dan mencetak konten JWT. Di aplikasi web produksi, Anda akan memverifikasi dan menggunakan JWT yang didekode untuk melakukan sesuatu yang lebih bermanfaat, 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 biasa digunakan juga akan 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 telah dienkode ke dalam tanda kutip ganda:

$ JWT="eyJhbGciOiJSUzI1Ni ... Hecz6Wm4Q"

dan kemudian menggunakan perintah ini untuk memecahkan kodenya

$ 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 foto harus cukup mudah dipahami. Nilai lain digunakan untuk memverifikasi JWT sebelum Anda menggunakannya. Mendapatkan informasi pengguna dari token ID memiliki lebih banyak informasi 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.

Mari kita ubah warna tombol menjadi biru dan ketik Sign up with Google sebagai gantinya.

Buka index.html, cari 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 opsi lengkap.

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 tersebut.

Link ini dapat membantu Anda dengan langkah-langkah berikutnya:

Pertanyaan umum (FAQ)

bug_report Laporkan kesalahan