Artikel ini diperbarui pada 15 Maret 2019 dan diedit sesuai proses Google API yang baru.
Anda dapat menerapkan fitur Login dengan Google di aplikasi web Anda menggunakan API-nya. Dalam tutorial ini saya akan membahas implementasinya.
Google juga menyediakan pustaka klien PHP - ini menangani semua API yang disediakan Google. Tetapi secara pribadi saya menemukan bahwa perpustakaan klien agak terlalu berlebihan. Ukurannya besar dan saya tidak mengerti implementasinya dengan jelas.
Dalam tutorial ini saya hanya menulis kode khusus untuk login Google dan mendapatkan rincian jumlah pengguna hanya 40 baris kedalam kode PHP.
Demo Click here for the demo application
Kode yang telah saya buat dapat diunduh di bagian akhir artikel ini.
Apakah Verifikasi Diperlukan?
Google sekarang memerlukan verifikasi untuk menggunakan beberapa API sensitif privasi. Namun jika Anda mencari hanya untuk mendapatkan informasi profil dan email dari pengguna, Anda tidak perlu verifikasi.
Ingat ya, lingkup API yang digunakan dalam tutorial ini tidak memerlukan verifikasi sama sekali, dan aplikasi Anda dapat segera dipublikasikan.
Apakah HTTPS Diperlukan?
Untuk mendapatkan hanya informasi profil pengguna dan email, Google tidak mengharuskan aplikasi Anda di-host melalui HTTPS. Ini akan bekerja dengan HTTP juga.
Membuat Aplikasi Google
Langkah pertama adalah membuat Aplikasi Google:
Buka Google API Console
Jika Anda belum membuat proyek, buat proyek dengan mengklik "Pilih proyek" (di atas), lalu klik tombol "+" di kotak dialog. Di layar berikutnya masukkan nama proyek Anda.
Setelah proyek dibuat, pilih proyek yang dibuat dari dropdown atas.
Sekarang klik pada tab Kredensial di sidebar kiri. Di layar berikutnya klik "Layar persetujuan OAuth".
Isi Nama Aplikasi dengan nama aplikasi Anda. Ketika pengguna masuk, ia akan melihat nama aplikasi ini.
Isi domain yang diotorisasi dengan domain tempat Anda ingin menjalankan aplikasi. Jika Anda hanya mengujinya di localhost, Anda dapat membiarkannya kosong.
Sekarang klik pada tab "Kredensial" (tepat di samping "layar persetujuan OAuth"). Di layar, klik "Buat kredensial". Pilih "OAuth Client ID" sebagai jenisnya.
Di layar berikutnya isi nama. Jenis Aplikasi harus "Aplikasi Web"
Tambahkan url redirect di bagian URI redirect Resmi. URL ini harus mengarah ke skrip url redirect Anda. (gauth.php dalam kode terlampir). Anda dapat menambahkan url host lokal jika mau.
Contoh url redirect dapat:
http://website.com/gauth.php
http://website.com/folder/gauth.php
http: //localhost/folder-name/gauth.php
Anda dapat meninggalkan sumber JavaScript Resmi sebagai kosong. Klik pada tombol Buat.
Jika berhasil, Anda akan mendapatkan ID Klien Aplikasi dan Rahasia Aplikasi. Simpan itu karena akan diminta nanti.
Pemahaman Dasar tentang Proses Login
Google mengimplementasikan OAuth2 untuk proses login. Google telah melakukan semua kerja keras dan menambahkan API login ke kode Anda cukup sederhana.
Anda menempatkan url dalam kode HTML Anda yang akan mengarahkan ulang ke server Google untuk login (disebut url login OAuth).
Anda juga memberikan url redirect, Google akan mengarahkan pengguna ke url ini setelah dia login. Google juga akan meneruskan kode otorisasi ke url redirect ini. Sesuatu seperti :
http://website.com/redirect.php?code=546546554465
Dalam skrip url pengalihan inilah Anda harus menggunakan kode otorisasi yang diteruskan (yang tersedia sebagai parameter GET). Kode otorisasi ini dapat ditukar dengan token akses dari Google (Anda harus menerapkan panggilan API untuk mendapatkan token akses dari kode otorisasi).
Anda kemudian dapat menggunakan token akses untuk mendapatkan informasi pengguna seperti id, nama, gambar, email dll.
Langkah 1: Simpan ID Klien Aplikasi dan Rahasia Klien
Use a settings.php file to save Client ID, Client Secret and Redirect Url
<?php
/* Google App Client Id */
define('CLIENT_ID', 'xxxxxxxxxxxxxxxxxxxx');
/* Google App Client Secret */
define('CLIENT_SECRET', 'xxxxxxxxxxxxxxxxxxxx');
/* Google App Redirect Url */
define('CLIENT_REDIRECT_URL', 'xxxxxxxxxxxxxxxxxxxx');
?>
Langkah 2: Tambahkan Tautan dalam kode Anda
Tambahkan tautan ke url login Google OAuth dalam kode HTML Anda. Jika ada kebutuhan Anda dapat menggunakan fungsi header PHP atau Javascript document.location juga untuk mengarahkan ulang ke url login Google.
<?php
require_once('settings.php');
$login_url = 'https://accounts.google.com/o/oauth2/v2/auth?scope=' . urlencode('https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email') . '&redirect_uri=' . urlencode(CLIENT_REDIRECT_URL) . '&response_type=code&client_id=' . CLIENT_ID . '&access_type=online';
?>
<html>
<head>....</head>
<body>
.....
<a href="<?= $login_url ?>">Login with Google</a>
.....
</body>
</html>
URL login pada dasarnya adalah https://accounts.google.com/o/oauth2/v2/auth dengan lima parameter:
ruang lingkup: Lingkup pada dasarnya adalah apa yang ingin Anda lakukan atau dapatkan dari pengguna. Google menyediakan cakupan untuk setiap layanan API-nya. Untuk hanya login dan mendapatkan informasi pengguna (termasuk email), Anda memerlukan 2 cakupan -
i) https://www.googleapis.com/auth/userinfo.profile
ii) https://www.googleapis.com/auth/userinfo.email
redirect_uri: url redirect Anda
response_type: Setel ke nilai default "kode"
client_id: ID Klien Google App Anda
access_type: Setel ke "online"
Mengklik tautan ini akan mengarahkan pengguna ke Google tempat ia melakukan login. Setelah masuk, Google mengalihkan pengguna ke url redirect yang telah Anda berikan. Skrip url redirect akan menangani langkah-langkah selanjutnya.
Langkah 3: Mempersiapkan Skrip Redirect Url
Saat mengarahkan ulang pengguna ke url redirect yang Anda berikan, Google memberikan kode otorisasi sebagai parameter GET bernama "kode". Contoh url pengalihan dapat terlihat seperti:
http://website.com/redirect.php?code=546546554465
Anda harus menggunakan kode ini dan melakukan panggilan API untuk mendapatkan token akses. Di bawah ini adalah kode untuk panggilan API untuk mendapatkan token akses menggunakan kode otorisasi:
// $client_id, $redirect_uri & $client_secret come from the settings
// $code is the code passed to the redirect url
function GetAccessToken($client_id, $redirect_uri, $client_secret, $code) {
$url = 'https://www.googleapis.com/oauth2/v4/token';
$curlPost = 'client_id=' . $client_id . '&redirect_uri=' . $redirect_uri . '&client_secret=' . $client_secret . '&code='. $code . '&grant_type=authorization_code';
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($ch, CURLOPT_POSTFIELDS, $curlPost);
$data = json_decode(curl_exec($ch), true);
$http_code = curl_getinfo($ch,CURLINFO_HTTP_CODE);
if($http_code != 200)
throw new Exception('Error : Failed to receieve access token');
return $data;
}
Setelah Anda mendapatkan token akses, Anda dapat membuat panggilan API lain untuk mendapatkan informasi profil pengguna. Di bawah ini adalah kode untuk panggilan API untuk mendapatkan informasi profil pengguna menggunakan token akses:
// $access_token is the access token you got earlier
function GetUserProfileInfo($access_token) {
$url = 'https://www.googleapis.com/oauth2/v2/userinfo?fields=name,email,gender,id,picture,verified_email';
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Authorization: Bearer '. $access_token));
$data = json_decode(curl_exec($ch), true);
$http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
if($http_code != 200)
throw new Exception('Error : Failed to get user information');
return $data;
}
Kode keseluruhan akan terlihat seperti:
<?php
// Holds the Google application Client Id, Client Secret and Redirect Url
require_once('settings.php');
// Holds the various APIs functions
require_once('google-login-api.php');
// Google passes a parameter 'code' in the Redirect Url
if(isset($_GET['code'])) {
try {
// Get the access token
$data = GetAccessToken(CLIENT_ID, CLIENT_REDIRECT_URL, CLIENT_SECRET, $_GET['code']);
// Access Token
$access_token = $data['access_token'];
// Get user information
$user_info = GetUserProfileInfo($access_token);
}
catch(Exception $e) {
echo $e->getMessage();
exit();
}
}
?>
Sebelumnya Google+ API digunakan untuk mendapatkan informasi profil. Tapi itu sudah usang sekarang.
Kode Contoh dengan Instruksi
Download