USER TO FOLLOW

Yudha Dhitira
SNIPER TREE STANDS
Abah Forex
Dodi Permana
mohammad sholihin
Peri Cila
benbesar
Slaser Gaming

EDITOR'S PICK

ADVERTISMENT

Cara Membuat Aplikasi Login Dengan Google Plus Untuk Website Menggunakan Php

Shigansina

07 May 2018, 6 Bulan Lalu

Follow

Cara Membuat Aplikasi Login Dengan Google Plus Untuk Website Menggunakan Php

Bagi anda yang memiliki website, login adalah tindakan yang biasa di lakukan oleh para pengunjung website anda untuk dapat menggunakan beberapa fitur yang anda buat seperti berkomentar, menyukai tulisan dll. namu nterkadang pengunjung malas untuk melakukan login di karenakan sulitnya saat proses registrasi.

Google + adalah solusi yang tepat untuk mengatasi hal tersebut, dengan memanfaat fitur api yang di sediakan oleh google, para pengunjung website anda tidak perlu melakukan registrasi pada website anda. Hanya dengan cukup mengklik tombol Login With Google + , anda bisa mendapatkan berbagai informasi pengunjung yang dapat digunakan sebagai data untuk melakukan registrasi. Tentunya hal ini akan sangat mempermudah penggunanya.

Sebelum anda memulai membuat aplikasi login dengan goolge plus, anda harus mendownload google+ api sdk yang dapat anda unduh di link berikut google-sdk-developer.zip. Berikut tahapan tahapan yang harus anda lakukan untuk membuat aplikasi login With google+ dengan php.

Struktur File Yang Di Siapkan

Persiapkan 2 file utama yang akan anda gunakan sebagai script untuk mengkonfigurasi aplikasi anda. yaitu gpConfig.php dan index.php. file index yang akan anda gunakan sebagai halaman utama dan juga file gpConfig untuk mengatur koneksi anda ke api Google+

Mebuat Project Api Google+ Pada Google Developer Console

Akseslah https://console.developers.google.com lalu buatlah projek baru. Pada bagian nama projek isikan dengan nama yang anda ingin kan dan untuk bagian lokasi, biarkan saja seperti itu. Jika Sudah lanjutkan Dengan mengklik Buat

Mengaktifkan Api Google+ Yang Akan di Gunakan

Setelah project anda buat, lalu pada kolom search carilah "Google+ API", tunggu sejenak hingga muncul auto complete dan pilihlah google+ api. Lalu Klik tombol Aktifkan  dan jika sudah anda akan beralih ke halaman selanjutnya

Membuat Kredensial

Klik lah tombol kredensial lalu anda akan di alihkan ke halaman kredential wizard untuk mulai mengkonfigurasi api google+ anda. pada bagian Api Yang Digunakan pilihlah google+ dan check data pengguna  dan juga pilihlah Server WEB pada bagian dari mana anda memanggil api lalu klik kredensial apa yang saya butuhkan.

Mensetting Base Domain dan Call Back URL

Berilah nama untuk CLient Id anda dan pada bagian asal javascript sah, masukan url domain anda berserta http. contoh http://dikertas.com. dan pada bagian Call Back URL. isi kan dengan url tempat anda menyimpan file aplikasi login google+ anda. Misal anda menyimpan fienya di folder login, jadi masukan pada callback http://dikertas.com/login-callback jika sudah klik creat auth client id. lalu masukan email valid anda dan nama produk yang akan di tampilkan lalu klik lanjutkan.

Jika sudah anda akan disuruh mengunduh file Json yang berisi data data api yang akan anda gunakan, unduhlah file tersebut lalu tampilkan dan buka menggunakan browser "Sangat di anjurkan menggunakan Mozila Firefox".

Membuat file konfigurasi Google+ Login Api

Pastikan anda telah mengunduh file Google SDK yang tertera pada bagian pembuka panduan, lalu extract lah file yang telah anda unduh kedalam sebuah folder lalu buatlah file bernama gpConfig.php dan isi dengan source code berikut ini

<?php
session_start();

//Include Google client library 
include_once 'src/Google_Client.php';
include_once 'src/contrib/Google_Oauth2Service.php';

/*
 * Configuration and setup Google API
 */
$clientId = ''; //Google client ID
$clientSecret = ''; //Google client secret
$redirectURL = ''; //Callback URL

//Call Google API
$gClient = new Google_Client();
$gClient->setApplicationName('Login to websiteanda.com');
$gClient->setClientId($clientId);
$gClient->setClientSecret($clientSecret);
$gClient->setRedirectUri($redirectURL);

$google_oauthV2 = new Google_Oauth2Service($gClient);
?>

pada variable $clientId = ''; isilah dengan client id api anda dan pada variable $clientSecret = ''; masukan client secret anda serta pada variable $redirectURL = '';  isikan dengan callback-url yang telah anda konfigurasi di step 5. Data data seperti client id, client secret dan callback-url dapat anda lihat didalam file JSON yang telah anda untuk seperti pada step ke 5.

Membuat file callback untuk mendeteksi apakah user sudah login atau belum

Buat lah file bernama index.php lalu isi dengan source code sebagai berikut

<?php
//Include GP config file && User class
include_once 'gpConfig.php';

if(isset($_GET['code'])){
	$gClient->authenticate($_GET['code']);
	$_SESSION['token'] = $gClient->getAccessToken();
	header('Location: ' . filter_var($redirectURL, FILTER_SANITIZE_URL));
}

if (isset($_SESSION['token'])) {
	$gClient->setAccessToken($_SESSION['token']);
}

if ($gClient->getAccessToken()) {
	//Get user profile data from google
	$gpUserProfile = $google_oauthV2->userinfo->get();
	
	//Initialize User class
	
	
	//Insert or update user data to the database
    

        $_SESSION['user_id'] = $gpUserProfile['id'];
        $_SESSION['full_name'] = $gpUserProfile['given_name']." ".$gpUserProfile['family_name'];
        $_SESSION['email'] = $gpUserProfile['email'];
        $_SESSION['unique_link_user'] = $gpUserProfile['link'];
        $_SESSION['user_picture'] = $gpUserProfile['picture'];

    header("location: profile.php");
	
	
} else {
	$authUrl = $gClient->createAuthUrl();
	header("location: ".$authUrl);	
}
?>

Source code di atas berfungsi untuk mendeteksi apakah user sudah login atau belum yang dimana jika sudah login maka akan teralih ke halaman profile.php dan jika belum maka anda akan di alihkan ke login page dari google+. data data login anda akan di tampung pada $_SESSION yank dapat anda panggil kembali di file yang berbeda dan dapat di jadikan sebagai acuan dasar anda dalam pengelolaaan user didalam aplikasi website anda.

Membuat halaman profile pengguna

Jika anda sudah berhasil login, tentu anda ingin melihat hasilnya. Maka anda harus membuat sebuah halaman untuk menampilkan profile dari user yang telah login. Buatlah file profile.php dan isi dengan source code sebagai berikut

<?php
session_start();

if(isset($_SESSION['user_id'])){
?>
<img src="<?=$_SESSION['user_picture']?>">
<br>
<p> Nama : <?=$_SESSION['full_name']?></p>
<p> Email : <?=$_SESSION['email']?></p>
<p> Unique Link : <?=$_SESSION['unique_link_user']?></p>
<p></p>
<?php } ?>

dapat diartikan, hanya bisa tampil jika anda telah melakukan login, dan akan menjadi blank putih jika anda belum login.

Menseting File Utama Google SDK

Masuklah folder SRC pada project anda dan editlah file config.php . Lalu pada bagian

"application_name" => "",
"oauth2_client_id" => "",
"oauth2_client_secret" => "",
"oauth2_redirect_uri" => "",
"developer_key" => "",
"site_name" => "",

isikan sesuai dengan data data api yang telah anda buat pada google developer console

Ikutilah semua langkah langkah dengan benar dan pastikan anda sudah mengesave file yang telah anda buat dan edit. coba akses project anda pada browser misal http://localhost/login-googleplus pastikan anda juga telah memiliki webserver seperti xamp dan wamp untuk mengeksekusi script tersebut. untuk source code lengkapnya, dapat anda unduh pada link berikut ini google-plus-login.zip

BAGIKAN

REAKSI PEMBACA


1 like

0 Love

1 Yeay

0 Wow

0 Sad

1 Angry

PANDUAN SERUPA

Cara Ampuh Mematikan ( Disable ) Windows ...

Fitur Windows update sering Anda jumpai bagi Anda yang menggunakan sistem operasi windows 7, 8 ...

Cara Install Cyberpanel Di VPS Google Cloud ...

CyberPanel adalah aplikasi atau software yang di rancang untuk keperluan management website hosting, agar kita ...

Cara Menggunakan Htaccess / Rewrite Url Di ...

CyberPanel adalah applikasi atau software yang di rancang untuk keperluan management website hosting, agar kita ...

Tentang Kami | Hubungi Kami | Partnership
Term Of Use