Menampilkan Google One Ketuk

Tambahkan dialog sekali ketuk ke situs Anda agar pengguna dapat mendaftar atau login ke aplikasi web Anda. Gunakan HTML dan JavaScript untuk merender dan menyesuaikan dialog.

Prasyarat

Ikuti langkah-langkah yang dijelaskan dalam Penyiapan untuk mengonfigurasi Layar Izin OAuth, mendapatkan ID klien, dan memuat library klien.

Tambahkan tombol Login dengan Google ke halaman login Anda.

Rendering perintah

Tempatkan cuplikan kode ke halaman mana pun tempat Anda ingin menampilkan Sekali Ketuk.

HTML

Menampilkan dialog login Sekali Ketuk, yang menampilkan kredensial JWT ke endpoint login.

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-your_own_param_1_to_login="any_value"
   data-your_own_param_2_to_login="any_value">
</div>

Atribut data-login_uri adalah URI endpoint login aplikasi web Anda. Anda dapat menambahkan atribut data kustom, yang dikirim ke endpoint login Anda bersama dengan token ID yang dikeluarkan oleh Google.

Atau, gunakan atribut data-skip_prompt_cookie dan cookie untuk mengontrol apakah perintah Login Sekali Klik ditampilkan di halaman HTML statis tempat Anda tidak dapat mengubah konten. Jika cookie yang ditentukan disetel, perintah tidak akan ditampilkan.

Gunakan atribut data-context opsional untuk mengubah teks yang digunakan di judul perintah. Misalnya, data-context: "signup" mengubah "Login ke" menjadi "Daftar ke".

Secara default, dialog login Sekali Ketuk akan ditutup secara otomatis jika pengguna mengklik di luar dialog. Anda dapat menonaktifkan perilaku ini jika Anda menyetel atribut data-cancel_on_tap_outside ke false.

Untuk mengetahui daftar lengkap atribut yang didukung, lihat referensi g_id_onload.

JavaScript

Menampilkan dialog sekali ketuk, menampilkan kredensial JWT ke handler callback JavaScript browser.

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: 'YOUR_CALLBACK_HANDLER'
    });
    google.accounts.id.prompt();
  }
</script>

Untuk mengonfigurasi perintah Satu Ketuk di JavaScript, Anda harus memanggil metode initialize() terlebih dahulu. Kemudian, panggil metode prompt() untuk menampilkan UI perintah.

Gunakan kolom context opsional untuk mengubah teks yang digunakan dalam judul perintah. Misalnya, context: 'signup' mengubah "Login ke" menjadi "Daftar ke".

Secara default, dialog login Sekali Ketuk akan ditutup secara otomatis jika pengguna mengklik di luar dialog. Anda dapat menonaktifkan perilaku ini jika Anda menyetel properti cancel_on_tap_outside ke false.

Untuk mengetahui daftar lengkap opsi data, lihat referensi idConfiguration.

Status perintah

Gunakan fungsi callback JavaScript untuk memantau notifikasi status UI perintah.

Notifikasi dikirim untuk momen berikut:

  • Momen tampilan: Ini terjadi setelah metode prompt() dipanggil. Notifikasi berisi nilai boolean untuk menunjukkan apakah UI ditampilkan atau tidak.

  • Momen yang dilewati: Hal ini terjadi saat perintah Satu Ketuk ditutup oleh pembatalan otomatis, pembatalan manual, atau saat Google gagal menerbitkan kredensial, seperti saat sesi yang dipilih keluar dari Google.

    Dalam hal ini, sebaiknya Anda melanjutkan ke penyedia identitas berikutnya, jika ada.

  • Momen ditutup: Hal ini terjadi saat Google berhasil mengambil kredensial, atau pengguna ingin menghentikan alur pengambilan kredensial. Misalnya, saat pengguna mulai memasukkan nama pengguna dan sandi ke dalam dialog login, Anda dapat memanggil metode google.accounts.id.cancel() untuk menutup dialog login Sekali Ketuk dan memicu momen ditutup.

HTML

Gunakan atribut data-moment_callback untuk menentukan fungsi callback JavaScript. Handler callback diperlukan untuk menerima notifikasi.

<html>
  <head>
    <script>
      function continueWithNextIdp(notification) {
        if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
          // try Next provider if One Tap is not displayed or skipped
        }
      }
    </script>
  </head>
  <body>
    ...
    <div id="g_id_onload"
      data-client_id="YOUR_GOOGLE_CLIENT_ID"
      data-login_uri="https://your.domain/your_login_endpoint"
      data-moment_callback="continueWithNextIdp"
    </div>
    ...
  </body>
</html>

Untuk mempermudah pengguna login atau mendaftar, Anda dapat berkomunikasi dengan beberapa penyedia identitas untuk menemukan kredensial yang tersedia. Anda mungkin ingin mengetahui status UI perintah kami sehingga Anda dapat memanggil penyedia identitas berikutnya.

JavaScript

Teruskan pengendali callback sebagai parameter ke google.accounts.id.prompt, di sini fungsi panah digunakan untuk menangani update notifikasi.

<script>
window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: 'YOUR_CALLBACK_HANDLER'
  });
  google.accounts.id.prompt((notification) => {
    if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
      // try next provider if OneTap is not displayed or skipped
    }
  });
}
</script>

Tombol dan perintah

Tombol Login dengan Google dan dialog Sekali Ketuk dapat ditampilkan bersama-sama di satu halaman.

HTML

Tampilkan tombol Login dengan Google dan perintah Sekali Ketuk dengan menyertakan elemen g_id_onload dan g_id_signin.

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-context="signin"
   data-ux_mode="redirect"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-itp_support="true">
</div>

<div class="g_id_signin"
   data-type="standard"
   data-shape="rectangular"
   data-theme="outline"
   data-text="signin_with"
   data-size="large"
   data-logo_alignment="left">
</div>

JavaScript

Tampilkan tombol Login dengan Google dan dialog Sekali Ketuk dengan memanggil fungsi renderButton() dan prompt() secara bersamaan.

<script>
window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: 'YOUR_CALLBACK_HANDLER'
  });
  const parent = document.getElementById('google_btn');
  google.accounts.id.renderButton(parent, {theme: "filled_blue"});
  google.accounts.id.prompt();
}
</script>

Jangan tutupi fitur Sekali Ketuk

Bagian ini hanya berlaku jika FedCM dinonaktifkan. Jika FedCM diaktifkan, browser akan menampilkan perintah pengguna di atas konten halaman.

Untuk memastikan pengguna akhir melihat semua informasi yang ditampilkan, Google One Tap tidak boleh tertutup oleh konten lain. Jika tidak, jendela pop-up dapat dipicu dalam beberapa kasus.

Periksa kembali tata letak halaman dan properti z-index elemen Anda, untuk memastikan Google Ketuk Sekali tidak tertutup oleh konten lain kapan saja. Perubahan alur UX dapat dipicu meskipun hanya satu piksel di batas yang tertutup.

Respons kredensial

JWT yang ditandatangani Google disertakan dalam respons kredensial. Respons dikembalikan ke browser menggunakan fungsi callback JavaScript atau ke platform Anda melalui pengalihan ke endpoint login.

Callback JS

Gunakan HTML atau JavaScript untuk mengonfigurasi callback.

HTML

<div id="g_id_onload"
  data-client_id="YOUR_GOOGLE_CLIENT_ID"
  data-callback="YOUR_CALLBACK_HANDLER"
</div>

JavaScript

google.accounts.id.initialize({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  callback: 'YOUR_CALLBACK_HANDLER'
});

Sebagai contoh, handleCredentialResponse mendekode JWT dan mencetak beberapa kolom token ID ke konsol.

<script>
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: handleCredentialResponse
  });

  function handleCredentialResponse(response) {
    const responsePayload = decodeJwtResponse(response.credential);

    console.log("ID: " + responsePayload.sub);
    console.log('Full Name: ' + responsePayload.name);
    console.log('Given Name: ' + responsePayload.given_name);
    console.log('Family Name: ' + responsePayload.family_name);
    console.log("Image URL: " + responsePayload.picture);
    console.log("Email: " + responsePayload.email);
  }

  function decodeJwtResponse(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);
  }
</script>

Pengalihan

Untuk menampilkan kredensial ke endpoint login platform Anda, tambahkan URL ke setelan URI pengalihan yang sah pada klien web OAuth 2.0 Anda.

Gunakan HTML atau JavaScript untuk mengonfigurasi URI pengalihan.

HTML

<div id="g_id_onload"
  data-client_id="YOUR_GOOGLE_CLIENT_ID"
  data-ux_mode="redirect"
  data-login-uri="YOUR_LOGIN_URI"
</div>

JavaScript

google.accounts.id.initialize({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  ux_mode: 'redirect',
  login_uri: 'YOUR_LOGIN_URI'
});