Kami menghentikan Library Platform JavaScript Login dengan Google untuk web. Library tidak akan tersedia untuk didownload setelah tanggal penghentian 31 Maret 2023. Sebagai gantinya, gunakan Layanan Identitas Google yang baru untuk Web.
Secara default, Client ID yang baru dibuat kini diblokir agar tidak menggunakan Library Platform yang lebih lama, Client ID yang sudah ada tidak akan terpengaruh. Client ID baru yang dibuat sebelum 29 Juli 2022 dapat menetapkan `plugin_name` untuk mengaktifkan penggunaan Library Google Platform.

Mengintegrasikan Google Sign-In ke dalam aplikasi web Anda

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Google Sign-In mengelola alur OAuth 2.0 dan siklus hidup token, menyederhanakan integrasi Anda dengan Google API. Pengguna selalu memiliki opsi untuk mencabut akses ke aplikasi kapan saja.

Dokumen ini menjelaskan cara menyelesaikan integrasi Google Sign-In dasar.

Buat kredensial otorisasi

Aplikasi apa pun yang menggunakan OAuth 2.0 untuk mengakses Google API harus memiliki kredensial otorisasi yang mengidentifikasi aplikasi ke server OAuth 2.0 Google. Langkah-langkah berikut menjelaskan cara membuat kredensial untuk proyek Anda. Aplikasi Anda kemudian dapat menggunakan kredensial untuk mengakses API yang telah Anda aktifkan untuk proyek tersebut.

  1. Go to the Credentials page.
  2. Klik Buat kredensial > ID klien OAuth .
  3. Pilih jenis aplikasi aplikasi Web .
  4. Beri nama klien OAuth 2.0 Anda dan klik Buat

Setelah konfigurasi selesai, perhatikan client ID yang telah dibuat. Anda akan memerlukan ID klien untuk menyelesaikan langkah selanjutnya. (Rahasia klien juga dibuat, tetapi Anda hanya memerlukannya untuk operasi sisi server.)

Muat Perpustakaan Google Platform

Anda harus menyertakan Google Platform Library di halaman web Anda yang mengintegrasikan Google Sign-In.

<script src="https://apis.google.com/js/platform.js" async defer></script>

Tentukan ID klien aplikasi Anda

Tentukan ID klien yang Anda buat untuk aplikasi Anda di Google Developers Console dengan elemen meta google-signin-client_id .

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">

Tambahkan tombol Masuk dengan Google

Cara termudah untuk menambahkan tombol Masuk dengan Google ke situs Anda adalah dengan menggunakan tombol masuk yang dirender secara otomatis. Dengan hanya beberapa baris kode, Anda dapat menambahkan tombol yang secara otomatis mengonfigurasi dirinya sendiri untuk memiliki teks, logo, dan warna yang sesuai untuk status masuk pengguna dan cakupan yang Anda minta.

Untuk membuat tombol Masuk dengan Google yang menggunakan setelan default, tambahkan elemen div dengan kelas g-signin2 ke laman masuk Anda:

<div class="g-signin2" data-onsuccess="onSignIn"></div>

Dapatkan informasi profil

Setelah Anda memasukkan pengguna dengan Google menggunakan cakupan default, Anda dapat mengakses ID Google, nama, URL profil, dan alamat email pengguna.

Untuk mengambil informasi profil pengguna, gunakan metode getBasicProfile() .

function onSignIn(googleUser) {
  var profile = googleUser.getBasicProfile();
  console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
  console.log('Name: ' + profile.getName());
  console.log('Image URL: ' + profile.getImageUrl());
  console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}

Keluar dari pengguna

Anda dapat memungkinkan pengguna untuk keluar dari aplikasi Anda tanpa keluar dari Google dengan menambahkan tombol atau tautan keluar ke situs Anda. Untuk membuat tautan keluar, lampirkan fungsi yang memanggil metode GoogleAuth.signOut() ke peristiwa onclick tautan.

<a href="#" onclick="signOut();">Sign out</a>
<script>
  function signOut() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
      console.log('User signed out.');
    });
  }
</script>