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 atribut untuk menyesuaikan bentuk, ukuran, teks, dan tema tombol.

Tombol login yang dipersonalisasi.

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

Prasyarat

Ikuti langkah-langkah yang dijelaskan di bagian Penyiapan untuk mengonfigurasi Layar Izin OAuth, mendapatkan client ID, dan 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 disesuaikan dengan parameter yang disediakan dalam atribut data.

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

Untuk meminimalkan hambatan pengguna, google.accounts.id.prompt() dipanggil untuk menampilkan Satu Ketuk sebagai alternatif kedua untuk menggunakan tombol guna 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 di JavaScript. Agar tombol tidak ditampilkan dua kali, mungkin dengan parameter yang bertentangan, jangan sertakan elemen HTML yang cocok dengan nama ini 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 lokalitas 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 yang disetel 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 apakah Anda merender tombol menggunakan HTML atau JavaScript dan apakah mode UX pop-up atau pengalihan 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 pengendali callback Anda, atau
  • data-login_uri agar Google 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 mungkin berguna saat menggunakan pengendali 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

Menggunakan mode UX redirect akan menjalankan alur UX login menggunakan pengalihan halaman penuh browser pengguna, dan Google akan menampilkan JWT langsung ke endpoint login Anda 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 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 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.