Membuat Aplikasi Login Dengan Google Account – Part 2
Pada tutorial sebelumnya tentang Membuat Aplikasi Login Dengan Google Account telah kita pelajari bersama-sama cara setting google api console untuk kebutuhan aplikasi dan menggunakan Google APIs Client Library PHP dalam rangka membuat aplikasi login yang dapat menggunakan google account untuk login.
Pada part 2 ini, akan diteruskan kembali pembuatan aplikasinya supaya lebih bagus. Berikut poin-poin yang akan kita bahas:
1. Integrasi dengan framework Codeigniter.
2. Menyimpan profil pengguna ke dalam database Mysql.
3. Mempercantik tampilan login dengan Materialize Css.
Integrasi dengan framework Codeigniter
Kenapa Codeigniter?
Codeigniter mudah untuk dipelajari bagi pemula, dokumentasinya lengkap, sudah banyak yang membahas, jadi banyak yang ngasih solusi jika mengalami masalah. Rekomended deh bagi yang sedang belajar OOP.
Ok kita mulai ya…
#1. Download Codeigniter dan extract ke dalam folder htdocs Anda. Sebagai contoh rename folder codeigniter menjadi ci_login_app, sehingga struktur folder projek kita seperti berikut:
/path/to/htdocs/ci_login_app
—–application
—–system
—–user_guide
—–index.php
Pada contoh ini, saya menggunakan Codeigniter versi 3.1.2. usahakan sama ya…
#2. Buka file application/config/config.php kemudian sesuaikan pengaturan berikut:
[php]
$config[‘base_url’] = ‘http://localhost/ci_login_app/’;
$config[‘encryption_key’] = ‘5a865c0a9862b8244a3d813253d79dd3’; // ini dapat diisi
$config[‘composer_autoload’] = TRUE;
$config[‘sess_save_path’] = sys_get_temp_dir();
[/php]
#3. Buka file application/config/autoload.php kemudian sesuaikan pengaturan berikut:
[php]
$autoload[‘libraries’] = array(‘session’, ‘form_validation’);
$autoload[‘helper’] = array(‘url’);
[/php]
#3. Copy folder vendor hasil dari tutorial Membuat Aplikasi Login Dengan Google Account dan letakkan didalam folder application/. Copy juga file client_secret.json ke application/.
#4. Buat file controller application/controllers/Auth.php, Kemudian ini isi file Auth.php nya:
[php]
<?php
defined(‘BASEPATH’) OR exit(‘No direct script access allowed’);
class Auth extends CI_Controller
{
function __construct()
{
parent::__construct();
}
public function index()
{
echo anchor(‘auth/log_with_google’, ‘Login dengan Google Account’);
}
public function hai()
{
print_r($this->session->userdata(‘login’));
}
public function log_with_google()
{
# cek sudah login belum
if (!empty($this->session->userdata(‘login’))) {
redirect(‘auth/hai’);
}
# redirect ke auth url google
$client = $this->get_google_client();
$auth_url = $client->createAuthUrl();
redirect($auth_url);
}
public function logout()
{
$this->session->set_userdata(‘login’, null);
redirect(‘auth’);
}
public function google()
{
# kalo sudah login atau tidak ada get code, redirect
if (!empty($this->session->userdata(‘login’)) OR empty($_GET[‘code’])) {
redirect(‘auth/hai’);
}
$client = $this->get_google_client();
$client->authenticate($_GET[‘code’]);
# ambil profilenya
$plus = new Google_Service_Plus($client);
$profile = $plus->people->get("me");
$this->session->set_userdata(‘login’, $profile);
redirect(‘auth/hai’);
}
private function get_google_client()
{
$client = new Google_Client();
$client->setAuthConfigFile(APPPATH . ‘client_secret.json’); //rename file ini supaya lebih aman nanti
$client->setRedirectUri("http://localhost/ci_login_app/index.php/auth/google");
$client->setScopes(array(
"https://www.googleapis.com/auth/plus.login",
"https://www.googleapis.com/auth/userinfo.email",
"https://www.googleapis.com/auth/userinfo.profile",
"https://www.googleapis.com/auth/plus.me",
));
return $client;
}
}
[/php]
Sekarang boleh dicoba-coba terlebih dahulu, silakan akses http://localhost/ci_login_app/index.php/auth, Harusnya sudah berjalan dengan baik. Lanjut ke poin berikutnya
Menyimpan profile pengguna ke dalam database Mysql
Poin ini kita akan menyimpan profile yang telah melakukan login dengan google akun ke database Mysql. Pertama kita siapkan dulu tabelnya, berikut SQL untuk membuat tabelnya:
[sql]
CREATE TABLE `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(255) NOT NULL,
`password` varchar(255) NOT NULL,
`nama` varchar(255) NOT NULL,
`foto` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
[/sql]
#1. Konfigurasi koneksi database.
Buka file application/config/database.php, kemudian atur bagian berikut:
[php]
‘hostname’ => ‘localhost’,
‘username’ => ‘root’,
‘password’ => ‘root’,
‘database’ => ‘ci_login_app’,
‘dbdriver’ => ‘mysqli’,
[/php]
#2. Edit application/config/autoload.php, tambahkan database pada load libraries
$autoload[‘libraries’] = array(‘session’, ‘form_validation’, ‘database’);
#3. Buat file model application/models/AuthModel.php, dan ini isinya:
[php]
<?php
class AuthModel extends CI_Model
{
public function retrieve($id = "", $username = "")
{
if (!empty($id)) {
$this->db->where(‘id’, $id);
}
if (!empty($username)) {
$this->db->where(‘username’, $username);
}
$result = $this->db->get(‘users’);
return $result->row_array();
}
public function create(
$username = "",
$password = "",
$nama = "",
$foto = ""
) {
$this->db->insert(‘users’, array(
‘username’ => $username,
‘password’ => $password,
‘nama’ => $nama,
‘foto’ => $foto
));
return $this->db->insert_id();
}
}
[/php]
Tambahkan autoload model di application/config/autoload.php
$autoload[‘model’] = array(‘AuthModel’);
#4. Edit file application/controllers/Auth.php
[php]
public function google()
{
# kalo sudah login atau tidak ada get code, redirect
if (!empty($this->session->userdata(‘login’)) OR empty($_GET[‘code’])) {
redirect(‘auth/hai’);
}
$client = $this->get_google_client();
$client->authenticate($_GET[‘code’]);
# ambil profilenya
$plus = new Google_Service_Plus($client);
$profile = $plus->people->get("me");
# cek dulu sudah ada belum
$user = $this->AuthModel->retrieve("", $profile[’emails’][0][‘value’]);
# jika belum ada, simpan
if (empty($user)) {
$user_id = $this->AuthModel->create(
$profile[’emails’][0][‘value’],
"",
$profile[‘name’][‘familyName’],
$profile[‘image’][‘url’]
);
$user = $this->AuthModel->retrieve($user_id);
}
$this->session->set_userdata(‘login’, $user);
redirect(‘auth/hai’);
}
[/php]
Sekarang silakan dicoba lagi aplikasinya, harusnya data profile pengguna sudah tersimpan ke dalam database pada tabel users.
Mempercantik tampilan login dengan Materialize Css
Materialize CSS merupakan framework CSS seperti Bootstrap css namun mengusung style dan nuansa berbeda. Materialize menerapkan Material Design yang dibuat oleh google, jadi ketika menggunakan framework css ini, nuansanya seperti menggunakan produk-produk google.
#1. Buat folder baru bernama assets sejajar dengan folder application
#2. Download materialize css di http://materializecss.com/, kemudian letakkan di dalam folder assets
#3. Download button login with google di http://www.dokumenary.net/wp-content/uploads/2016/12/btn-login-with-google.png, dan letakkan di assets/images/
#4. Buat file baru di application/views/login.php, dan ini isinya:
[html]
<!DOCTYPE html>
<html>
<head>
<title>Signin</title>
<!–Import Google Icon Font–>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!–Import materialize.css–>
<link type="text/css" rel="stylesheet" href="<?php echo base_url(‘assets/materialize/css/materialize.min.css’); ?>" media="screen,projection" />
<!–Let browser know website is optimized for mobile–>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body class="grey lighten-4">
<div class="container">
<div class="row">
<div class="col s12 m5 offset-m3">
<h4 class="center">Please sign in…</h4>
<a href="<?php echo site_url(‘auth/log_with_google’) ?>"><img src="<?php echo base_url(‘assets/images/btn-login-with-google.png’) ?>" width="100%"></a>
<p class="center">Or<br>Sign with existing account</p>
<div class="card-panel">
Ops akun tidak ditemukan
</div>
<div class="card">
<div class="card-content">
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email" data-error="wrong" data-success="right">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
</div>
<div class="row">
<div class="col s12">
<button class="btn waves-effect waves-light btn-large" type="submit">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!–Import jQuery before materialize.js–>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(‘assets/materialize/js/materialize.min.js’) ?>"></script>
</body>
</html>
[/html]
#5. Edit file application/controllers/Auth.php, sesuaikan function index() menjadi seperti berikut:
[php]
public function index()
{
$this->load->view("login.php");
}
[/php]
Maka akan dijumpai tampilan login seperti berikut:
Cukup keren bukan…
#6. Edit file application/controllers/Auth.php, sesuaikan function hai() menjadi seperti berikut:
[php]
public function hai()
{
$profile = $this->session->userdata(‘login’);
$this->load->view("profile.php", $profile);
}
[/php]
#7. Buat file application/views/profile.php, kemudian ini isi filenya:
[html]
<!DOCTYPE html>
<html>
<head>
<title>Hai</title>
<!–Import Google Icon Font–>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!–Import materialize.css–>
<link type="text/css" rel="stylesheet" href="<?php echo base_url(‘assets/materialize/css/materialize.min.css’); ?>" media="screen,projection" />
<!–Let browser know website is optimized for mobile–>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body class="grey lighten-4">
<div class="container">
<div class="row">
<div class="col s12 m6 offset-m3">
<br>
<div class="card-panel teal">
<a href="<?php echo site_url(‘auth/logout’) ?>" title="Logout" class="right"><i class="material-icons white-text">power_settings_new</i></a>
<span class="white-text">Hai <?php echo $nama ?> (<?php echo $username; ?>)</span>
</div>
<script src="https://apis.google.com/js/plusone.js"></script>
<div id="comments"></div>
<script>
gapi.comments.render(‘comments’, {
href: window.location,
width: ‘630’,
first_party_property: ‘BLOGGER’,
view_type: ‘FILTERED_POSTMOD’
});
</script>
</div>
</div>
</div>
<!–Import jQuery before materialize.js–>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(‘assets/materialize/js/materialize.min.js’) ?>"></script>
</body>
</html>
[/html]
Maka setelah login, akan dijumpai tampillan seperti berikut:
Ok sudah selesai pembahasan untuk poin kali ini, jika ada yang pelu kita diskusikan silakan berkomentar ya…
Oh ya, jangan lupa subscribe atau like facebook page DokumenAry ya đ
Terimakasih
Category: Uncategorized
Dedidi
October 4, 2017 - 3:38 pm
Google_Client nya tidak di temukan
$client = new Google_Client();
$client->setAuthConfigFile(APPPATH.âclient_secret.jsonâ); //rename file ini supaya lebih aman nanti
$client->setRedirectUri(âhttp://localhost/login_google/index.php/auth/googleâ);
$client->setScopes(array(
pesan error nya : Fatal error: Class âGoogle_Clientâ not found in C:\xampp\htdocs\login_google\application\controllers\Auth.php on line 64
gak ada yang di edit, masih sama dengan panduannya, kenapa ya?
Almazari
October 4, 2017 - 8:09 pm
Pake codeigniter versi berapa mas?
Dedidi
October 5, 2017 - 3:03 pm
ci versi 3.1.2 mas
Almazari
October 5, 2017 - 3:07 pm
di application/config/config.php, $config[‘composer_autoload’] sudah dipastikan bernilai TRUE? coba pastikan lagi mas, jangan2 terdefinisi dua kali $config[‘composer_autoload’] nya, jadinya yang paling bawah yang diambil…
Annisa Nauli Hasibuan
December 5, 2018 - 12:17 am
Udahh mas.. gamau juga, solusinya gimana yah mas
narendro
January 2, 2018 - 5:47 am
variabel nama dan username tidak ada di profile.php mas
Almazari
January 2, 2018 - 9:59 am
kan didapat dari sini mas $profile = $this->session->userdata(‘login’); isi variable profile itu ada index nama dan username…
sutan hanifah
February 2, 2018 - 9:32 pm
A PHP Error was encountered
Severity: Warning
Message: require(D:\xampp\htdocs\klikjap_web\application\vendor\composer/../guzzlehttp/psr7/src/functions_include.php): failed to open stream: No such file or directory
Filename: composer/autoload_real.php
Line Number: 66
Backtrace:
File: D:\xampp\htdocs\klikjap_web\application\vendor\composer\autoload_real.php
Line: 66
Function: _error_handler
File: D:\xampp\htdocs\klikjap_web\application\vendor\composer\autoload_real.php
Line: 66
Function: composerRequireb6b1b7b5efcac91b85a155321f380bf7
File: D:\xampp\htdocs\klikjap_web\application\vendor\composer\autoload_real.php
Line: 56
Function: composerRequireb6b1b7b5efcac91b85a155321f380bf7
File: D:\xampp\htdocs\klikjap_web\application\vendor\autoload.php
Line: 7
Function: getLoader
File: D:\xampp\htdocs\klikjap_web\index.php
Line: 315
Function: require_once
dewi maliana
August 2, 2018 - 11:48 am
Terimakasih untuk informasinya sangat membantu sekali
Anto
November 19, 2018 - 10:57 am
Error kaya gini kenapa ya gan ?
Severity: Notice
Message: Undefined property: Auth::$AuthModel
Filename: controllers/Auth.php
Line Number: 57
Backtrace:
File: /var/www/bukaportal/Testingheri/application/controllers/Auth.php
Line: 57
Function: _error_handler
File: /var/www/bukaportal/Testingheri/index.php
Line: 315
Function: require_once
Almazari
November 19, 2018 - 11:11 am
apakah masnya sudah memastikan controllers/Auth.php line 57 sudah sesuai contoh yg diberikan?
Almazari
November 19, 2018 - 12:09 pm
Periksa juga bagian autoloadnya: $autoload[âmodelâ] = array(âAuthModelâ);
malik
November 6, 2019 - 10:43 pm
PHP Error was encountered
Severity: Warning
Message: count(): Parameter must be an array or an object that implements Countable
Filename: Handler/CurlFactory.php
Line Number: 67
Backtrace:
File: C:\xam\htdocs\ci_login_app\application\vendor\guzzlehttp\guzzle\src\Handler\CurlFactory.php
Line: 67
Function: count
File: C:\xam\htdocs\ci_login_app\application\vendor\guzzlehttp\guzzle\src\Handler\CurlFactory.php
Line: 107
Function: release
File: C:\xam\htdocs\ci_login_app\application\vendor\guzzlehttp\guzzle\src\Handler\CurlHandler.php
Line: 43
Function: finish
File: C:\xam\htdocs\ci_login_app\application\vendor\guzzlehttp\guzzle\src\Handler\Proxy.php
Line: 28
Function: __invoke
File: C:\xam\htdocs\ci_login_app\application\vendor\guzzlehttp\guzzle\src\Handler\Proxy.php
Line: 51
Function: GuzzleHttp\Handler{closure}
File: C:\xam\htdocs\ci_login_app\application\vendor\guzzlehttp\guzzle\src\PrepareBodyMiddleware.php
Line: 72
Function: GuzzleHttp\Handler{closure}
File: C:\xam\htdocs\ci_login_app\application\vendor\guzzlehttp\guzzle\src\Middleware.php
Line: 30
Function: __invoke
File: C:\xam\htdocs\ci_login_app\application\vendor\guzzlehttp\guzzle\src\RedirectMiddleware.php
Line: 68
Function: GuzzleHttp{closure}
File: C:\xam\htdocs\ci_login_app\application\vendor\guzzlehttp\guzzle\src\Middleware.php
Line: 57
Function: __invoke
File: C:\xam\htdocs\ci_login_app\application\vendor\guzzlehttp\guzzle\src\HandlerStack.php
Line: 67
Function: GuzzleHttp{closure}
File: C:\xam\htdocs\ci_login_app\application\vendor\guzzlehttp\guzzle\src\Client.php
Line: 275
Function: __invoke
File: C:\xam\htdocs\ci_login_app\application\vendor\guzzlehttp\guzzle\src\Client.php
Line: 96
Function: transfer
File: C:\xam\htdocs\ci_login_app\application\vendor\guzzlehttp\guzzle\src\Client.php
Line: 104
Function: sendAsync
File: C:\xam\htdocs\ci_login_app\application\vendor\google\auth\src\HttpHandler\Guzzle6HttpHandler.php
Line: 34
Function: send
File: C:\xam\htdocs\ci_login_app\application\vendor\google\auth\src\OAuth2.php
Line: 492
Function: __invoke
File: C:\xam\htdocs\ci_login_app\application\vendor\google\apiclient\src\Google\Client.php
Line: 186
Function: fetchAuthToken
File: C:\xam\htdocs\ci_login_app\application\vendor\google\apiclient\src\Google\Client.php
Line: 165
Function: fetchAccessTokenWithAuthCode
File: C:\xam\htdocs\ci_login_app\application\controllers\Auth.php
Line: 49
Function: authenticate
File: C:\xam\htdocs\ci_login_app\index.php
Line: 315
Function: require_once
muhiqbalfn
May 22, 2023 - 4:51 pm
An uncaught Exception was encountered
Type: Error
Message: Class “Google_Service_Plus” not found
Filename: C:\xampp\htdocs\sdm\application\controllers\Auth.php
Line Number: 56
Backtrace:
File: C:\xampp\htdocs\sdm\index.php
Line: 315
Function: require_once
Bajpuv
March 12, 2024 - 12:09 pm
buy lipitor 20mg pill buy lipitor 80mg generic order atorvastatin online
Vzldyr
March 14, 2024 - 4:31 pm
buy cipro generic – buy generic clavulanate buy augmentin 1000mg generic
Xqhlkm
March 14, 2024 - 6:42 pm
ciprofloxacin over the counter – buy myambutol 1000mg sale augmentin 625mg ca
Ygqduo
March 17, 2024 - 12:17 pm
buy flagyl tablets – purchase zithromax pill buy azithromycin 250mg without prescription
Axoylc
March 18, 2024 - 12:21 am
ciplox 500 mg generic – buy cheap generic erythromycin erythromycin oral
Wrigfb
March 19, 2024 - 5:08 pm
valacyclovir 1000mg for sale – brand valacyclovir buy acyclovir 400mg
Ybodnm
March 20, 2024 - 4:31 am
ivermectin for humans walmart – cheap sumycin tablets sumycin 250mg drug
Jdqcdi
March 21, 2024 - 8:13 pm
order metronidazole online cheap – zithromax 250mg sale order zithromax 500mg sale
Cwanwv
March 22, 2024 - 2:13 am
ampicillin oral buy penicillin antibiotic amoxicillin cheap
Glfvoa
March 23, 2024 - 10:13 am
oral lasix 100mg – minipress 1mg pill capoten 120mg drug
Dsxdoo
March 26, 2024 - 12:15 am
glycomet 1000mg for sale – lincomycin tablet lincomycin online buy
Fuyjsn
March 26, 2024 - 4:07 pm
buy retrovir generic – cost epivir 100 mg order generic zyloprim
Hdaaef
March 28, 2024 - 9:27 am
clozapine over the counter – generic frumil 5mg buy generic famotidine 20mg
Bfcezp
March 29, 2024 - 4:19 pm
purchase quetiapine sale – order sertraline 100mg for sale brand eskalith
Suuwzx
March 31, 2024 - 2:58 am
buy clomipramine 50mg generic – celexa drug sinequan 25mg for sale
Wrlbms
March 31, 2024 - 4:05 pm
order hydroxyzine 10mg online – buy cheap pamelor buy generic amitriptyline for sale
Vztwgq
April 4, 2024 - 5:14 am
buy augmentin 375mg generic – order ampicillin pill cipro 1000mg brand
Xrtaag
April 4, 2024 - 6:46 am
cheap amoxicillin pills – cefadroxil 500mg drug ciprofloxacin 1000mg drug
Pqoyxd
April 9, 2024 - 3:38 pm
buy cleocin without a prescription – order terramycin 250mg sale buy generic chloramphenicol over the counter
Fcefft
April 10, 2024 - 3:25 am
buy zithromax 250mg sale – order ofloxacin online cheap order ciplox 500 mg online cheap
Qtyokn
April 12, 2024 - 8:33 pm
ivermectin 6mg without prescription – buy cefaclor 250mg generic cefaclor tablet
Ynubas
April 13, 2024 - 6:42 am
ventolin inhalator online – theophylline cost order theophylline generic
Csisip
April 15, 2024 - 3:57 pm
clarinex 5mg usa – where to buy flixotide without a prescription ventolin 2mg generic
Pbpyvb
April 15, 2024 - 8:40 pm
methylprednisolone 4mg without prescription – medrol 4mg otc astelin 10ml over the counter
Vowesf
April 17, 2024 - 4:07 pm
order glyburide 2.5mg generic – micronase order buy dapagliflozin generic
Vdrqcj
April 19, 2024 - 4:31 pm
repaglinide 2mg over the counter – brand repaglinide 2mg where to buy empagliflozin without a prescription
Pptwko
April 19, 2024 - 11:03 pm
buy glycomet 1000mg sale – pill januvia 100 mg order acarbose online
Zandhb
April 22, 2024 - 9:40 am
cost lamisil 250mg – order generic diflucan 200mg buy griseofulvin paypal
Jjugjl
April 23, 2024 - 12:33 am
buy semaglutide tablets – buy cheap glucovance DDAVP medication
Vnzkkv
April 24, 2024 - 1:17 pm
buy nizoral 200 mg – itraconazole pill purchase itraconazole without prescription
Ywiqgo
April 26, 2024 - 1:41 am
buy famvir – cheap valaciclovir order valaciclovir 1000mg pill
Icosxm
April 26, 2024 - 2:27 pm
digoxin for sale – furosemide 40mg tablet order furosemide 100mg