Tampilkan tombol Login dengan Google

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

Tombol login yang dipersonalisasi.

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

Prasyarat

Selesaikan hal berikut sebelum menambahkan tombol ke halaman login Anda:

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

Rendering tombol

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

HTML

Render tombol login menggunakan HTML, yang 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 oleh parameter yang diberikan di atribut data.

Untuk menampilkan tombol Login Dengan Google dan Google One Ketuk di halaman yang sama, hapus data-auto_prompt="false". Hal ini disarankan 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 mengembalikan 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 ke renderButton akan ditampilkan sebagai tombol Login dengan Google. Dalam contoh ini, buttonDiv digunakan untuk merender tombol di halaman. Tombol disesuaikan menggunakan atribut dalam parameter kedua untuk renderButton.

Untuk meminimalkan hambatan pengguna, google.accounts.id.prompt() dipanggil untuk menampilkan Sekali Ketuk sebagai alternatif kedua dari penggunaan 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, terlepas dari apakah Anda juga telah merender tombol dalam JavaScript. Agar tombol tidak ditampilkan dua kali, mungkin dengan parameter yang bertentangan, jangan sertakan elemen HTML mencocokkan nama-nama tersebut di halaman HTML Anda.

Bahasa Tombol

Bahasa tombol ditentukan secara otomatis 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 dan dengan menambahkan parameter data-locale atau locale opsional data-locale di HTML atau locale 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 ditetapkan ke 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 jika Anda merender tombol menggunakan HTML atau JavaScript dan apakah mode UX pengalihan atau pop-up digunakan.

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

Saat merender tombol menggunakan:

HTML

Anda dapat menetapkan:

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

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

JavaScript

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

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

Mode pengalihan

Mode UX redirect akan menjalankan alur UX login menggunakan halaman penuh pengalihan browser pengguna, dan Google mengembalikan JWT langsung ke endpoint login menggunakan permintaan POST. Hal ini umumnya merupakan pengalaman yang lebih mengganggu bagi 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 dapat menetapkan login_uri ke URI endpoint login Anda secara opsional.

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 saat menggunakan localhost selama pengembangan: http://localhost/path.

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