Tampilkan tombol Login dengan Google

Tambahkan tombol Login Dengan Google ke situs Anda untuk memungkinkan pengguna mendaftar atau login ke aplikasi web Anda. Gunakan HTML atau JavaScript untuk merender tombol dan atribut guna menyesuaikan bentuk, ukuran, teks, dan tema tombol.

Tombol login yang dipersonalisasi.

Setelah pengguna memilih Akun Google dan memberikan izin mereka, Google akan membagikan profil pengguna menggunakan Token Web JSON (JWT). Untuk ringkasan langkah-langkah yang diperlukan selama login dan pengalaman pengguna, lihat Cara kerjanya. Pahami tombol yang dipersonalisasi meninjau berbagai kondisi dan status yang memengaruhi cara tombol ditampilkan kepada pengguna.

Prasyarat

Lakukan hal berikut sebelum menambahkan tombol ke halaman login Anda:

  • Ikuti langkah-langkah yang dijelaskan di bagian Penyiapan untuk mengonfigurasi Layar Izin OAuth Anda dan mendapatkan Client ID.
  • Memuat library klien.

Rendering tombol

Untuk menampilkan tombol Login Dengan Google, Anda dapat memilih HTML atau JavaScript untuk merender tombol pada halaman login Anda:

HTML

Render tombol login menggunakan HTML, yang akan menampilkan JWT ke endpoint login platform Anda.

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <div id="g_id_onload"
        data-client_id="YOUR_GOOGLE_CLIENT_ID"
        data-login_uri="https://your.domain/your_login_endpoint"
        data-auto_prompt="false">
    </div>
    <div class="g_id_signin"
        data-type="standard"
        data-size="large"
        data-theme="outline"
        data-text="sign_in_with"
        data-shape="rectangular"
        data-logo_alignment="left">
    </div>
  <body>
</html>

Elemen dengan class g_id_signin dirender sebagai tombol Login Dengan Google. Tombol tersebut disesuaikan dengan parameter yang disediakan dalam atribut data.

Untuk menampilkan tombol Login Dengan Google dan Google One Ketuk di halaman yang sama, hapus data-auto_prompt="false". Tindakan ini direkomendasikan untuk mengurangi hambatan dan meningkatkan rasio login.

Untuk mengetahui daftar lengkap atribut data, lihat halaman referensi g_id_signin

JavaScript

Render tombol login menggunakan JavaScript, yang menampilkan JWT ke pengendali callback JavaScript browser.

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <script>
      function handleCredentialResponse(response) {
        console.log("Encoded JWT ID token: " + response.credential);
      }
      window.onload = function () {
        google.accounts.id.initialize({
          client_id: "YOUR_GOOGLE_CLIENT_ID"
          callback: handleCredentialResponse
        });
        google.accounts.id.renderButton(
          document.getElementById("buttonDiv"),
          { theme: "outline", size: "large" }  // customization attributes
        );
        google.accounts.id.prompt(); // also display the One Tap dialog
      }
    </script>
    <div id="buttonDiv"></div>
  </body>
</html>

Elemen yang ditentukan sebagai parameter pertama untuk renderButton ditampilkan sebagai tombol Login Dengan Google. Dalam contoh ini, buttonDiv digunakan untuk merender tombol pada halaman. Tombol tersebut disesuaikan menggunakan atribut yang ditentukan dalam parameter kedua ke renderButton.

Untuk meminimalkan hambatan pengguna, google.accounts.id.prompt() dipanggil untuk menampilkan Sekali Ketuk sebagai alternatif kedua untuk menggunakan tombol untuk mendaftar atau login.

Library GIS mengurai dokumen HTML untuk elemen dengan atribut ID yang ditetapkan ke g_id_onload, atau atribut class yang berisi g_id_signin. Jika elemen yang cocok ditemukan, tombol akan dirender menggunakan HTML, meskipun Anda juga telah merender tombol tersebut dalam JavaScript. Agar tombol tidak ditampilkan dua kali, mungkin dengan parameter yang bertentangan, jangan sertakan elemen HTML yang cocok dengan nama tersebut di halaman HTML Anda.

Bahasa Tombol

Bahasa tombol otomatis ditentukan oleh bahasa default browser atau preferensi pengguna sesi Google. Anda juga dapat memilih bahasa secara manual dengan menambahkan parameter hl dan kode bahasa ke perintah src saat memuat library, serta dengan menambahkan parameter data lokal atau parameter lokalitas opsional data-locale dalam HTML atau lokal di JavaScript.

HTML

Cuplikan kode berikut menunjukkan cara menampilkan bahasa tombol dalam bahasa Prancis dengan menambahkan parameter hl ke URL library klien dan dengan menetapkan atribut data-locale ke bahasa Prancis:

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<div class="g_id_signin" data-locale="fr">
</div>

JavaScript

Cuplikan kode berikut menunjukkan cara menampilkan bahasa tombol dalam bahasa Prancis dengan menambahkan parameter hl ke URL library klien dan memanggil metode google.accounts.id.renderButton dengan parameter locale yang disetel ke bahasa Prancis:

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<script>
  google.accounts.id.renderButton(
    document.getElementById("buttonDiv"),
    { locale: "fr" }
  );
</script>

Penanganan kredensial

Setelah izin pengguna diberikan, Google akan menampilkan kredensial Token Web JSON (JWT) yang dikenal sebagai token ID ke browser pengguna, atau langsung ke endpoint login yang dihosting oleh platform Anda.

Tempat Anda memilih untuk menerima JWT bergantung pada apakah Anda merender tombol menggunakan HTML atau JavaScript dan apakah mode popup atau pengalihan UX digunakan.

Menggunakan mode UX popup akan menjalankan alur UX login di jendela pop-up. Ini umumnya merupakan pengalaman yang tidak terlalu mengganggu bagi pengguna dan merupakan mode UX default.

Saat merender tombol menggunakan:

HTML

Anda dapat menyetel:

  • data-callback untuk menampilkan JWT ke pengendali callback, atau
  • data-login_uri agar Google dapat mengirim JWT langsung ke endpoint login Anda menggunakan permintaan POST.

Jika kedua nilai ditetapkan, data-callback akan lebih diprioritaskan daripada data-login_uri. Menetapkan kedua nilai tersebut dapat berguna saat menggunakan pengendali callback untuk proses debug.

JavaScript

Anda harus menentukan callback, mode pop-up tidak mendukung pengalihan saat merobek tombol di JavaScript. Jika ditetapkan, login_uri akan diabaikan.

Lihat menangani respons kredensial yang ditampilkan untuk mengetahui informasi selengkapnya tentang mendekode JWT dalam pengendali callback JS Anda.

Mode pengalihan

Penggunaan mode UX redirect akan menjalankan alur UX login menggunakan pengalihan halaman penuh dari browser pengguna, dan Google menampilkan JWT langsung ke endpoint login Anda menggunakan permintaan POST. Biasanya ini akan lebih mengganggu pengalaman pengguna, tetapi dianggap sebagai metode login yang paling aman.

Saat merender tombol menggunakan:

  • HTML secara opsional menetapkan data-login_uri ke URI endpoint login Anda.
  • JavaScript secara opsional menetapkan login_uri ke URI endpoint login Anda.

Jika Anda tidak memberikan nilai, Google akan menampilkan JWT ke URI halaman saat ini.

URI endpoint login Anda

Gunakan HTTPS dan URI absolut saat menetapkan data-login_uri atau login_uri. Misalnya, https://example.com/path.

HTTP hanya diizinkan jika menggunakan localhost selama pengembangan: http://localhost/path.

Lihat Menggunakan asal JavaScript yang aman dan URI pengalihan untuk mendapatkan deskripsi lengkap tentang persyaratan dan aturan validasi Google.