Mengintegrasikan Login dengan Google ke dalam aplikasi web Anda

Login dengan Google mengelola alur OAuth 2.0 dan siklus proses token, sehingga menyederhanakan integrasi Anda dengan Google API. Pengguna selalu memiliki opsi untuk mencabut akses ke aplikasi kapan saja.

Dokumen ini menjelaskan cara menyelesaikan integrasi Login dengan Google di tingkat 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 project Anda. Selanjutnya, aplikasi Anda dapat menggunakan kredensial tersebut untuk mengakses API yang telah Anda aktifkan untuk project tersebut.

  1. Go to the Credentials page.
  2. Klik Create credentials > OAuth client ID.
  3. Pilih jenis aplikasi Web application.
  4. Beri nama klien OAuth 2.0 Anda, lalu klik Buat

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

Memuat Google Platform Library

Anda harus menyertakan Library Google Platform di halaman web Anda yang mengintegrasikan Login dengan Google.

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

Menentukan client ID aplikasi

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

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

Menambahkan tombol Login dengan Google

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

Untuk membuat tombol Login dengan Google yang menggunakan setelan default, tambahkan elemen div dengan class g-signin2 ke halaman login Anda:

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

Dapatkan informasi profil

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

Untuk mengambil informasi profil bagi 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.
}

Membuat pengguna logout

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

<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>