Project iseng kali ini yang pengen dibuat adalah membuat login website dengan menggunakan akun Github.
Atau bahasa kerennya single sign on (SSO).
Daftar Isi
Siapa sih orang IT atau programmer jaman sekarang yang ga tau apa itu Github?
Github adalah salah satu penyedia layanan repository terbesar untuk project open source ataupun private.
Jadi bisa dibilang social media nya para programmer ya di Github gitu loh.
Nah kali ini kita akan buat sebuah login form dengan menggunakan akun Github yang kita punya.
Jadi cara kerjanya hampir sama dengan login menggunakan Facebook, Twitter ataupun social media lainnya.
Sebelum itu, lebih baik jika kita ke halaman dokumentasi punyanya si Github dulu biar lebih jelas tentang cara kerja dari api punya si github ya: https://developer.github.com/v3/oauth/
Jadi kalian sudah baca dokumentasi lengkapnya? Nah di sana sudah dijelaskan tentang bagaimana flow dan step by step proses yaitu:
1. Daftar aplikasi baru di Github
Sebelum memulai membuat project login dengan Github, kita perlu daftarin dulu aplikasi kita sehingga kita bisa mendapatkan app key & secret-nya.
Untuk daftarnya kamu bisa login kegithub dulu atau kalau belum punya akun github ya silakan daftar dulu.
Kemudian jika sudah login, pilih menu setting dengan mengklik foto profile kamu di pojok kanan atas.
Nah pada tab Developer applications seperti gambar di atas, klik tombol register new application.
Kalian bisa mengisi detail dari aplikasi yang kalian buat sesuai dengan keinginan kamu.
Jika sudah selesai mengisi detail aplikasinya, maka kamu akan mendapatkan client ID dan secret seperti gambar di bawah ini.
Silakan di catat client ID, secret dan redirect url-nya karena akan kita pakai nanti.
Nah yang perlu diperhatikan adalah field redirect url karena nanti akan berguna untuk redirect ke aplikasi yang kita buat jika sudah berhasil login dengan Github.
2. Start Coding
Kita akan membuat beberapa buah file yaitu:
1. config.php
<?php
$config = [
'client_id' => 'ganti dengan client id aplikasi kamu',
'client_secret' => 'ganti dengan client secret aplikasi kamu',
'redirect_url' => 'ganti dengan redirect url yang sudah kamu buat',
'scope' => 'user',
'app_name' => 'nama aplikasi kamu',
'auth_url' => 'https://github.com/',
'api_url' => 'https://api.github.com/'
];
Pertama kita akan buat sebuah file config.php yang berfungsi untuk menyimpan semua konfigurasi yang dibutuhkan apilkasi kita seperti client id & secret, redirect url, scope, dan beberapa url yang kita butuhkan nanti.
2. index.php
File index.php akan berfungsi untuk memproses semua logic aplikasi yang kita buat.
Langkah pertama, kita akan membuat sebuah link login untuk mendapatkan akses dari github seperti di dokumentasi dari github https://developer.github.com/v3/oauth/#web-application-flow
<?php
include "config.php";
//generate login link
$param = [
'client_id' => $config['client_id'],
'redirect_url' => $config['redirect_url'],
'scope' => $config['scope']
];
$url_query = http_build_query($param);
$login_url = $config['auth_url'].'authorize?'.$url_query;
?>
<a href="<?php echo $login_url?>">Login With Github</a>
Nah coba sekarang buka file index.php, maka kamu akan melihat sebuah link di browser kamu yang jika di klik akan menuju ke halaman github yang meminta ijin aplikasi untuk mengakses data akun kamu.
Tampilan saat kamu klik login tersebut seperti berikut:
Jika kamu mengklik tombol Authorize application maka kamu akan di redirect ke url yang sudah kamu setting di awal saat membuat aplikasi. Kalau sudah berhasil redirect maka kita akan lanjut ke tahap selanjutnya.
Langkah kedua, kita akan meng-generate access token, sebuah token yang nanti bisa kita gunakan untuk memperoleh informasi seperti user detail, user repo atau yang lainnya sesuai dengan scope dari aplikasi kita. Mari kita kembali ke file index.php dan menambahkan fungsi untuk _generate access token. _
<?php
include "config.php";
if(isset($_GET['code'])){
//code yang di dapat dari hasil redirect github
$code = $_GET['code'];
//generate data param untuk request access token
$data = http_build_query(array(
'client_id' => $config['client_id'],
'redirect_url' => $config['redirect_url'],
'client_secret' => $config['client_secret'],
'code' => $code
));
//prepare request data
$request = array('method' => 'POST',
'data' => $data,
'header' => array("Content-Type: application/x-www-form-urlencoded","Accept: application/json"),
'url' => 'https://github.com/login/oauth/access_token'
);
//get access token dengan curl
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HEADER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $request['header']);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $request['data']);
curl_setopt($ch, CURLOPT_URL, $request['url']);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
$response = curl_exec($ch);
//pisahkan antara header & body
list($header, $body) = explode("rnrn", $response, 2);
//format data body menjadi sebuah object
$data = json_decode($body);
//now we get access token
$access_token = $data->access_token;
echo 'access token : '.$access_token;
}else{
//generate login link
$param = [
'client_id' => $config['client_id'],
'redirect_url' => $config['redirect_url'],
'scope' => $config['scope']
];
$url_query = http_build_query($param);
$login_url = $config['auth_url'].'authorize?'.$url_query;
echo '<a href="'.$login_url.'">Login with Github</a>';
}
Sekarang kita buka lagi lewat browser file index.php dan coba lagi klik link login with github. Jika tidak ada masalah maka kamu akan melihat access token kamu. Nah kita akan memerlukan access token ini untuk mengambil data profile akun github kamu nanti.
Tahap ketiga, selanjutnya kita akan mencoba untuk mendapatkan detail informasi dari akun github yang kita gunakan untuk login dengan access token tersebut. Kali ini kita akan menggunakan api _user _dari Github, dokumentasinya bisa kamu baca di sini https://developer.github.com/v3/users. Kita buka lagi file index.php dan tambahkan script untuk request informasi user
//get github profile
$request = array('method' => 'GET',
'header' => array("Content-Type: application/x-www-form-urlencoded",
"Accept: application/json",
"User-Agent: ".$config['app_name']),
'url' => $config['api_url'].'user?access_token='.$access_token
);
//curl request user informatio
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HEADER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $request['header']);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_HTTPGET, true);
curl_setopt($ch, CURLOPT_URL, $request['url']);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
$response = curl_exec($ch);
list($header, $body) = explode("rnrn", $response, 2); $data = json_decode($body);
echo 'welcome '.$data->login ;
echo ' <image src="'.$data->avatar_url.'" width="25">';
Setelah di gabungkan dengan script lainya maka index.php akan menjadi seperti berikut ini:
<?php
include "config.php";
if(isset($_GET['code'])){
//code yang di dapat dari hasil redirect github
$code = $_GET['code'];
//generate data param untuk request access token
$data = http_build_query(array(
'client_id' => $config['client_id'],
'redirect_url' => $config['redirect_url'],
'client_secret' => $config['client_secret'],
'code' => $code
));
//prepare request data
$request = array('method' => 'POST',
'data' => $data,
'header' => array("Content-Type: application/x-www-form-urlencoded","Accept: application/json"),
'url' => 'https://github.com/login/oauth/access_token'
);
//get access token dengan curl
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HEADER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $request['header']);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $request['data']);
curl_setopt($ch, CURLOPT_URL, $request['url']);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
$response = curl_exec($ch);
//pisahkan antara header & body
list($header, $body) = explode("rnrn", $response, 2);
//format data body menjadi sebuah object
$data = json_decode($body);
//now we get access token
$access_token = $data->access_token;
//get github profile
$request = array('method' => 'GET',
'header' => array("Content-Type: application/x-www-form-urlencoded",
"Accept: application/json",
"User-Agent: ".$config['app_name']),
'url' => $config['api_url'].'user?access_token='.$access_token
);
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HEADER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $request['header']);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_HTTPGET, true);
curl_setopt($ch, CURLOPT_URL, $request['url']);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
$response = curl_exec($ch);
list($header, $body) = explode("rnrn", $response, 2);
$data = json_decode($body);
echo 'welcome '.$data->login ;
echo ' <image src="'.$data->avatar_url.'" width="25">';
}else{
//generate login link
$param = [
'client_id' => $config['client_id'],
'redirect_url' => $config['redirect_url'],
'scope' => $config['scope']
];
$url_query = http_build_query($param);
$login_url = $config['auth_url'].'authorize?'.$url_query;
echo '<a href="'.$login_url.'">Login with Github</a>';
}
Sekarang coba kita buka browser lagi dan ulangi login dengan Github-nya, akhirnya kita akan mendapatkan pesan seperti tampilan di bawah ini:
Yeah, finally kita sudah bisa mendapatkan user detail, nah kamu bisa menyimpan user detail tersebut, misalnya ke dalam database dan digunakan untuk keperluan lain di aplikasi kamu.
Tapi masih ada hal yang sepertinya kurang, jadi jika user sudah berhasil login dan merefresh halaman index.php di browser maka user harus login lagi untuk mendapatkan detail informasinya.
Kita lakukan sedikit modifikasi lagi di file index.php dengan menyimpan informasi user ke dalam session sehingga user yang sudah login tetap login saat halaman di refresh.
<?php
//tambahkan session_start di awal
session_start();
Kita akan menyimpan detail user di dalam session. Kita tambahkan sedikit script lagi seperti di bawah ini:
$_SESSION['github'] = $data;
echo 'welcome '.$data->login ;
echo ' <image src="'.$data->avatar_url.'" width="25">';
Kita juga akan menambahkan fungsi logout sederhana, dimana ketika logout maka session akan di hapus dan user harus login dari awal.
Setelah di gabungkan, file index.php akan menjadi seperti di bawah ini:
<?php
session_start();
include "config.php";
if(isset($_GET['logout'])){
//hapus session ketika logout
session_unset('github');
}
if(isset($_GET['code'])){
//code yang di dapat dari hasil redirect github
$code = $_GET['code'];
//generate data param untuk request access token
$data = http_build_query(array(
'client_id' => $config['client_id'],
'redirect_url' => $config['redirect_url'],
'client_secret' => $config['client_secret'],
'code' => $code
));
//prepare request data
$request = array('method' => 'POST',
'data' => $data,
'header' => array("Content-Type: application/x-www-form-urlencoded","Accept: application/json"),
'url' => 'https://github.com/login/oauth/access_token'
);
//get access token dengan curl
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HEADER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $request['header']);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $request['data']);
curl_setopt($ch, CURLOPT_URL, $request['url']);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
$response = curl_exec($ch);
//pisahkan antara header & body
list($header, $body) = explode("rnrn", $response, 2);
//format data body menjadi sebuah object
$data = json_decode($body);
//now we get access token
$access_token = $data->access_token;
//get github profile
$request = array('method' => 'GET',
'header' => array("Content-Type: application/x-www-form-urlencoded",
"Accept: application/json",
"User-Agent: ".$config['app_name']),
'url' => $config['api_url'].'user?access_token='.$access_token
);
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HEADER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $request['header']);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_HTTPGET, true);
curl_setopt($ch, CURLOPT_URL, $request['url']);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
$response = curl_exec($ch);
list($header, $body) = explode("rnrn", $response, 2);
$data = json_decode($body);
$_SESSION['github'] = $data;
echo 'welcome '.$data->login ;
echo ' <image src="'.$data->avatar_url.'" width="25">';
echo ' <a href="?logout">Logout</a>';
}else{
//cek jika session sudah ada
if(isset($_SESSION['github'])){
echo 'welcome '.$data->login ;
echo ' <image src="'.$data->avatar_url.'" width="25">';
}else{
//generate login link
$param = [
'client_id' => $config['client_id'],
'redirect_url' => $config['redirect_url'],
'scope' => $config['scope']
];
$url_query = http_build_query($param);
$login_url = $config['auth_url'].'authorize?'.$url_query;
echo '<a href="'.$login_url.'">Login with Github</a>';
}
}
Kalau belum tahu apa itu class dan konsep OOP, bisa baca dulu artikel : mengapa lebih bagus ngoding php pakai class oop
Kita sudah selesai untuk membuat tutorial login dengan github. Selanjutnya kita bisa kembangkan lagi script di atas misalnya dengan membuat sebuah _class Github _sehingga code kita menjadi lebih rapi dan enak dilihat.
Semoga bermanfaat ya teman-teman.
