Referensi klien JavaScript Login dengan Google

Referensi ini menjelaskan metode dan atribut klien JavaScript yang akan Anda gunakan untuk menerapkan Login dengan Google di aplikasi web Anda.

Jika Anda mengalami masalah saat menggunakan library, laporkan ke kami Repositori GitHub.

Penyiapan Auth

Muat library platform Google API untuk membuat objek gapi:

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

Setelah library platform dimuat, muat library auth2:

function init() {
  gapi.load('auth2', function() {
    /* Ready. Make a call to gapi.auth2.init or some other API */
  });
}

gapi.auth2.init(params)

Melakukan inisialisasi objek GoogleAuth. Anda harus memanggil metode ini sebelum memanggil metode gapi.auth2.GoogleAuth.

Saat melakukan inisialisasi objek GoogleAuth, Anda perlu mengonfigurasi objek tersebut dengan client ID OAuth 2.0 dan opsi tambahan apa pun yang ingin Anda tentukan. Kemudian, jika pengguna sudah login, objek GoogleAuth akan memulihkan status login pengguna dari sesi sebelumnya.

{
  client_id: 'CLIENT_ID.apps.googleusercontent.com'
}

GoogleAuth.then(onInit, onError)

Memanggil fungsi onInit saat objek GoogleAuth sepenuhnya diinisialisasi. Jika terjadi error saat melakukan inisialisasi (ini dapat terjadi di browser lama yang tidak didukung), sebagai gantinya, fungsi onError akan dipanggil.

Kode Error

idpiframe_initialization_failed

Gagal melakukan inisialisasi iframe yang diperlukan dari Google, misalnya, karena tidak didukung lingkungan fleksibel App Engine. Properti details akan memberikan informasi selengkapnya tentang error yang dilaporkan.

gapi.auth2.ClientConfig

Antarmuka yang mewakili parameter konfigurasi berbeda untuk Metode gapi.auth2.init.

Autentikasi

GoogleAuth adalah class singleton yang menyediakan metode untuk memungkinkan pengguna login dengan Akun Google, mendapatkan status login pengguna saat ini, mendapatkan data tertentu dari profil Google pengguna, meminta cakupan tambahan, dan logout dari akun saat ini.

gapi.auth2.getAuthInstance()

Menampilkan objek GoogleAuth. Anda harus melakukan inisialisasi objek GoogleAuth dengan gapi.auth2.init() sebelum memanggil metode ini.

GoogleAuth.isSignedIn.get()

Menampilkan apakah pengguna saat ini sedang login.

GoogleAuth.isSignedIn.listen(listener)

Memproses perubahan status login pengguna saat ini.

GoogleAuth.signIn()

Membuat pengguna login dengan opsi yang ditentukan untuk gapi.auth2.init().

Kode error

Lihat GoogleAuth.signIn(options).

GoogleAuth.signIn(options)

Membuat pengguna login menggunakan opsi yang ditentukan.

Kode error

popup_closed_by_user

Pengguna menutup pop-up sebelum menyelesaikan alur login.

access_denied

Pengguna menolak izin ke cakupan yang diperlukan.

immediate_failed

Tidak ada pengguna yang dapat dipilih secara otomatis tanpa meminta alur izin. Terjadi error saat menggunakan signIn dengan opsi prompt: 'none'. Opsi ini seharusnya tidak diperlukan, karena gapi.auth2.init akan membuat pengguna login secara otomatis jika sebelumnya, masuk dalam sesi sebelumnya.

gapi.auth2.SignInOptions

Antarmuka yang mewakili parameter konfigurasi berbeda untuk Metode GoogleAuth.signIn(options).

GoogleAuth.signOut()

Membuat akun saat ini logout dari aplikasi.

GoogleAuth.disconnect()

Mencabut semua cakupan yang diberikan pengguna.

GoogleAuth.grantOfflineAccess(options)

Mendapatkan izin dari pengguna untuk mengakses cakupan yang ditentukan secara offline.

{
  scope: 'profile email'
}

auth2.grantOfflineAccess().then(function(resp) {
  var auth_code = resp.code;
});

Kode error

popup_closed_by_user

Pengguna menutup pop-up sebelum menyelesaikan alur izin.

access_denied

Pengguna menolak izin ke cakupan yang diperlukan.

immediate_failed

Tidak ada pengguna yang dapat dipilih secara otomatis tanpa meminta alur izin. Terjadi error saat menggunakan signIn dengan opsi prompt: 'none'. Opsi ini tidak boleh diperlukan, karena gapi.auth2.init akan membuat pengguna login secara otomatis jika sebelumnya, masuk dalam sesi sebelumnya.

gapi.auth2.OfflineAccessOptions

Antarmuka yang mewakili parameter konfigurasi berbeda untuk GoogleAuth.grantOfflineAccess(options) .

GoogleAuth.attachClickHandler(container, options, onsuccess, onfailure)

Melampirkan alur login ke pengendali klik penampung yang ditentukan.

Pengguna

Objek GoogleUser mewakili satu akun pengguna. Objek GoogleUser biasanya diperoleh dengan memanggil GoogleAuth.currentUser.get().

GoogleAuth.currentUser.get()

Menampilkan objek GoogleUser yang mewakili pengguna saat ini. Perhatikan bahwa dalam file yang baru diinisialisasi GoogleAuth, pengguna saat ini belum ditetapkan. Gunakan Metode currentUser.listen() atau GoogleAuth.then() untuk mendapatkan instance GoogleAuth yang diinisialisasi.

GoogleAuth.currentUser.listen(listener)

Memproses perubahan pada currentUser.

GoogleUser.getId()

Mendapatkan string ID unik pengguna.

GoogleUser.isSignedIn()

Menampilkan true (benar) jika pengguna login.

GoogleUser.getHostedDomain()

Mendapatkan domain G Suite pengguna jika pengguna login dengan akun G Suite.

GoogleUser.getGrantedScopes()

Dapatkan cakupan yang diberikan pengguna sebagai string yang dipisahkan spasi.

GoogleUser.getBasicProfile()

Mendapatkan informasi profil dasar pengguna.

GoogleUser.getAuthResponse(includeAuthorizationData)

Dapatkan objek respons dari sesi autentikasi pengguna.

GoogleUser.reloadAuthResponse()

Memaksa refresh token akses, lalu menampilkan Promise untuk AuthResponse baru.

gapi.auth2.AuthResponse

Respons yang ditampilkan saat memanggil GoogleUser.getAuthResponse(includeAuthorizationData) atau GoogleUser.reloadAuthResponse() metode.

GoogleUser.hasGrantedScopes(scopes)

Menampilkan true (benar) jika pengguna diberi cakupan yang ditentukan.

GoogleUser.grant(options)

Minta cakupan tambahan kepada pengguna.

Lihat GoogleAuth.signIn() untuk mengetahui daftar parameter dan kode error.

GoogleUser.grantOfflineAccess(options)

Mendapatkan izin dari pengguna untuk mengakses cakupan yang ditentukan secara offline.

{
  scope: 'profile email'
}

GoogleUser.disconnect()

Mencabut semua cakupan yang diberikan pengguna untuk aplikasi.

Elemen UI

gapi.signin2.render(id, options)

Merender tombol login di elemen dengan ID yang diberikan, menggunakan setelan yang ditentukan oleh objek options.

{
  scope: 'email',
  width: 200,
  height: 50,
  longtitle: true,
  theme: 'dark',
  onsuccess: handleSuccess,
  onfailure: handleFailure
}

Lanjutan

gapi.auth2.Authorize(params, callback)

Melakukan otorisasi OAuth 2.0 satu kali. Tergantung pada parameter yang digunakan, ini akan membuka pop-up ke alur login dengan Google atau coba muat respons yang diminta secara otomatis, tanpa interaksi pengguna.

Beberapa kasus penggunaan yang dapat memanfaatkan metode ini antara lain:

• Aplikasi Anda hanya perlu meminta endpoint Google API satu kali, misalnya, untuk memuat video YouTube favorit pengguna saat pertama kali mereka masuk.
• Aplikasi Anda memiliki infrastruktur pengelolaan sesinya sendiri, dan hanya memerlukan Token ID sekali untuk mengidentifikasi pengguna di backend Anda.
• Beberapa Client-ID digunakan di halaman yang sama.

{
  client_id: 'CLIENT_ID.apps.googleusercontent.com',
  scope: 'email profile openid',
  response_type: 'id_token permission'
}

Contoh

gapi.auth2.authorize({
  client_id: 'CLIENT_ID.apps.googleusercontent.com',
  scope: 'email profile openid',
  response_type: 'id_token permission'
}, function(response) {
  if (response.error) {
    // An error happened!
    return;
  }
  // The user authorized the application for the scopes requested.
  var accessToken = response.access_token;
  var idToken = response.id_token;
  // You can also now use gapi.client to perform authenticated requests.
});

Kode error

idpiframe_initialization_failed

Gagal melakukan inisialisasi iframe yang diperlukan dari Google, misalnya, karena tidak didukung lingkungan fleksibel App Engine. Properti details akan memberikan informasi selengkapnya tentang error yang dilaporkan.

popup_closed_by_user

Pengguna menutup pop-up sebelum menyelesaikan alur login.

access_denied

Pengguna menolak izin ke cakupan yang diperlukan.

immediate_failed

Tidak ada pengguna yang dapat dipilih secara otomatis tanpa meminta alur izin. Terjadi error saat menggunakan signIn dengan opsi prompt: 'none'.

gapi.auth2.AuthorizeConfig

Antarmuka yang mewakili parameter konfigurasi berbeda untuk Metode gapi.auth2.authorize.

gapi.auth2.AuthorizeResponse

Respons yang ditampilkan ke callback Metode gapi.auth2.authorize.