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 guna 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 dalam Penyiapan untuk mengonfigurasi Layar Izin OAuth, mendapatkan ID klien, dan memuat library klien.

Rendering tombol

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

HTML

Tampilkan 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 diberikan dalam atribut data.

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

Untuk mengetahui daftar lengkap atribut data, lihat halaman referensi g_id_signin

JavaScript

Tampilkan tombol login menggunakan JavaScript, yang menampilkan JWT ke handler 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 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 kesulitan pengguna, google.accounts.id.prompt() dipanggil untuk menampilkan Login Sekali 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 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 direktif src saat memuat library dan dengan menambahkan parameter data-locale atau locale opsional locale di HTML atau JavaScript.

HTML

Cuplikan kode berikut menunjukkan cara menampilkan bahasa tombol dalam bahasa Prancis dengan menambahkan parameter hl ke URL library klien dan dengan menyetel 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 ditetapkan 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 UX pop-up atau pengalihan 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 Anda, atau
  • data-login_uri agar Google mengirim JWT langsung ke endpoint login Anda menggunakan permintaan POST.

Jika kedua nilai ditetapkan, data-callback akan diprioritaskan daripada data-login_uri. Menetapkan kedua nilai dapat membantu saat menggunakan callback handler 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 handler 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. Pengalaman ini umumnya lebih mengganggu 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 menyetel 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 mengetahui deskripsi lengkap persyaratan dan aturan validasi Google.