Halaman ini diterjemahkan oleh Cloud Translation API.

Mengintegrasikan Masuk dengan Google ke dalam aplikasi web Anda

Masuk dengan Google mengelola aliran 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 Masuk Google dasar.

Buat kredensial otorisasi

Aplikasi apa pun yang menggunakan OAuth 2.0 untuk mengakses Google API harus memiliki kredensial otorisasi yang mengidentifikasi aplikasi tersebut 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 itu.

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

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

Muat Library Google Platform

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

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

Cara termudah untuk menambahkan tombol Masuk Google ke situs Anda adalah dengan menggunakan tombol masuk yang ditampilkan secara otomatis. Dengan hanya beberapa baris kode, Anda dapat menambahkan tombol yang secara otomatis mengonfigurasi dirinya sendiri agar 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>

Berikut ini adalah contoh tombol Masuk Google default:

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 untuk 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.
}

Keluarkan pengguna

Anda dapat mengizinkan 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 kejadian 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>