Mengintegrasikan Login dengan Google ke dalam aplikasi web Anda

Login dengan Google mengelola alur OAuth 2.0 dan siklus proses token, 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 dasar.

Membuat 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 > Client ID OAuth yang baru.
  3. Pilih jenis aplikasi Web application.
  4. Beri nama klien OAuth 2.0 Anda, lalu klik Create

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

Memuat Google Platform Library

Anda harus menyertakan Library Platform Google di halaman web yang terintegrasi 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 otomatis dirender. Hanya dengan beberapa baris kode, Anda bisa menambahkan tombol yang secara otomatis mengkonfigurasi dirinya sendiri agar memiliki teks yang sesuai, logo, dan warna untuk status login pengguna dan cakupan yang Anda minta.

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

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

Mendapatkan informasi profil

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

Untuk mengambil informasi profil untuk pengguna, gunakan 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 untuk logout dari aplikasi Anda tanpa logout dari Google dengan menambahkan tombol logout atau link ke situs Anda. Untuk membuat link logout, lampirkan sebuah fungsi yang memanggil 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>