Membuat login dengan Akun Google pada Codeigniter

Mengintegrasikan Google OAuth API pada sistem login di aplikasi Anda adalah cara yang efektif dan efisien, karena Saat ini hampir semua pengguna web memiliki akun Google, Login dengan akun Google membantu meningkatkan langganan pengguna di situs web Anda atau aplikasi Anda. Google API mengijinkan Anda untuk mengotentifikasi akun google dan mengambil data profil pengguna. Anda akan dengan mudah mengintegrasikan login dengan google menggunakan Codeigniter dan library Google Oauth. Dalam tutorial ini, kami akan memunjukan step by step cara untuk mengintegrasikan login dengan akun google menggunakan framework Codeigniter.

Alur yang akan kita buat adalah :

  1. Pengguna akan login dengan akun google
  2. Jika akun tersebut sudah terdaftar di database aplikasi kita maka kita akan menyimpannya di session, dan mengizinkan pengguna untuk masuk kehalaman yang kita inginkan.
  3. Jika akun tersebut belum terdaftar maka data pengguna akan kita simpan didalam database aplikasi kita untuk mendaftarkannya, setelah itu barulah pengguna dapat masuk ke halaman yang kita inginkan.

Ada dua tahapan yang harus dilakukan untuk mengintegrasikan Google OAuth API pada sistem login di aplikasi Anda, berikut akan saya jelaskan tahap-tahap dan langkah-langkahnya :

A. Tahap Pertama

Sebelum kita mengintegrasikan Google OAuth API dengan aplikasi Codeigniter kita, kita harus membuat sebuah proyek di Google Developers Console, berikut adalah langkah-langkah untuk membuat proyek di Google Developers Console :

  1. Klik link Google API Console
  2. Di project drop-down, yang berada di pojok kiri atas, pilih project yang sudah ada , atau buat baru dengan mengklik Create a new project.
    Buat project baru di google developer console
  3. Aktifkan (Enable) Google+ API service, dengan cara :
    • Klik ENABLE API AND SERVICES
    • Pada pencarian Search for APIs & Services ketik Google+ API setelah itu klik Google+ API.
    • Klik tomol Enable API. Tunggu sampai API aktif(enabled).
  1. Di menu samping (sidebar) “APIs & Services”, pilih Credentials, kemudian pilih tab OAuth consent screen, lalu isi Application name dengan nama aplikasi anda dan alamat Email pada Support email, kemudian klik save.
  2. Pada tab Credentials, pilih Create credentials pada drop-down list, dan pilih OAuth client ID.
  3. Pada Application type, pilih Web application. Daftarkan aplikasi yang akan anda izinkan untuk mengkases Google APIs.
      • Pada field Authorized JavaScript origins, masukan protokol, host dan port. Dalam tutorial kali ini saya mendaftarkan http://localhost kemudian tekan ENTER.
      • Lalu pada field Authorized redirect URI masukan URL yang akan dituju s setelah login, pada tutorial kali ini saya memasukan http://localhost/login_google_ci/welcome
  4. Klik tombol Create
  5. Setelah berhasil dibuat download JSON Credential yang telah kita buat. Lalu rubah namanya sesuasi dengan yang Anda inginkan agar mudah diiangat. Pada tutorial ini saya rubah namanya menjadi client_secret.json.

Selesailah tahap pertama untuk membuat login dengan Akun Google pada Codeigniter.

B. Tahap Kedua

Setelah membuat proyek di Google Developers Console , mengaktifkan Google + API, dan membuat cridential, tahap selanjutnya adalah tahap pengkodingan pada php menggunakan framework Codeigniter, ini dia tahap yang ditunggu-tunggu, ya kan? Ya gak ya gak? ūüėÄ

Berikut adalah langkah-langkahnya :

  1. Yang pertama tentu saja kita harus Install Webserver + MariaDB + PHP atau agar mudah install saja Xampp bisa di download di https://www.apachefriends.org/download.html ada untuk Windows, Linux dan Mac Os, jika sudah terinstall lanjut ke langkah berikutnya.
  2. Setelah itu kita harus punya Codeigniternya, jika belum download silahkan download di https://www.codeigniter.com/download. Setah didownload extract file Codeigniter ke folder web server Anda, karena menggunakan Xammp maka simpan di folder htdocs dan rubah namanya sesuai keingin Anda Pada saat tutorial di buat saya menggunakan Codeignigniter 3.1.10 dan saya rubah nama foldernya menjadi login_google_ci.

  3. Install Composer. Untuk yang belum tau tentang composer bisa googling di google dengan keyword : Apa itu composer ? Saya belum membuat tutorial tentang Composser ini, InsyaAllah akan saya buat.

  4. Download composser.phar di https://getcomposer.org/download/1.2.2/composer.phar dan simpan di folder codeigniter, atau dalam tutorial ini di folder login_google_ci tadi.
  5. Eksekusi composer.phar dengan cara :
    • ika anda menggunakan windows, tekan shift + klik kanan dan pilih Open windows here. Setelah muncul jendela Command Prompt ketikan : ..\..\..\php\php.exe composer.phar require google/apiclient:^2.0 atau sesuaikan dengan lokasi tempat php anda di install.
    • Jika menggunakan Linux atau macOs setelah masuk ke folder login_google_ci, klik kanan lalu pilih Open in terminal, setelah itu ketikan : php composer.phar require google/apiclient:^2.0
  6. Buat sebuah database dengan table pengguna sebagai berikut ini, atau buat table sesuai kebutuhan Anda ūüėÄ

  7. Copy file client_secret.json yang telah kita download tadi ke folder login_google_ci.

  8. Setelah semua siap buka text editor yang biasa Anda gunakan untuk melakukan programming, lalu buka file application/config/config.php kemudian sesuaikan configurasi sebagai berikut:
    $config['base_url'] = 'http://localhost/google_login_ci/';
    $config['encryption_key'] = 'sfnskflaasnssdfdsfsfshfjshfkj'; 
    $config['composer_autoload'] = TRUE;
    $config['sess_save_path'] = sys_get_temp_dir();
    $config['composer_autoload'] = 'vendor/autoload.php';
    Configurasi Codeigniter terletak di application/config/config.php
  9. Setelah itu buka file application/config/autoload.php kemudian sesuaikan configurasi sebagai berikut:
    $autoload['libraries'] = array('database', 'session');
    
    $autoload['helper'] = array('url');
    Setting Autoload Codeigniter di application/config/autoload.php
  10. Buat library Codeigniter baru di application/libraries/ beri nama Google.php lalu ketik kode berikut ini :
    <?php
    if (!defined('BASEPATH')) exit('No direct script access allowed');
    
    class Google extends Google_Client {
    	function __construct() {
    		parent::__construct(); 
    		$this->setAuthConfigFile(APPPATH . 'client_secret.json');
    		$this->setRedirectUri('http://localhost/login_google_ci/');
    		$this->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",
    		)); 
    	}
    }
    Buat Library baru di Codeigniter dengan nama google.php simpan di application/libraries/

    library diatas saya membuat turunan class dari object Google_Client yang telah disediakan oleh google, yang telah kita autoload pada file config.php yaitu : $config[‘composer_autoload’] = ‘vendor/autoload.php’; sehingga pada controller kita bisa memanggil library tersebut dengan kode $this‚Üíload‚Üílibrary(‚ÄėGoogle‚Äô); pada library diatas pada constructor saya buat settingan defaultnya setAuthConfigFile untuk mengacu pada file client_secret.json yang kita simpan di folder aplikasi yang kita buat. Lalu setRedirecUri di set ke http://localhost/login_google_ci, sesuaikan settingan ini kehalaman yang anda inginkan, misalnya http://localhost/login_google_ci/admin. Settingan ini harus sesuai dengan Authorized redirect URI yang kita isi pada saat pembuatan Credential Google+ API pada tahap pertama tadi.

  11. Buat Controller baru dengan nama sesuai keinginan Anda, pada tutorial kali ini saya menggunakan controller default codeigniter yaitu Wellcome dan saya edit isinya sebagai berikut ini :
    <?php
    defined('BASEPATH') OR exit('No direct script access allowed');
    
    class Welcome extends CI_Controller {
    
    	function __construct(){
    		parent::__construct();
    		// load google library 
    		$this->load->library('google'); 
    		// Load model user
    		$this->load->model('pengguna'); 
    	}
    	public function index(){
    	// Redirect ke halaman profile jika pengguna sudah login
    		if($this->session->userdata('telahLogin') == true){
    		redirect('Welcome/profil/');
    		}
    		if(isset($_GET['code'])){
    			// Otentikasi pengguna dengan google
    			$client = $this->google;
    			$client->authenticate($_GET['code']);
    			# ambil profilenya
    			$gp = new Google_Service_Plus($client);
    			$profil = $gp->people->get("me"); 
    			// data untuk di input ke database
    			$dataPengguna['oauth_provider'] = 'google';
    			$dataPengguna['oauth_uid'] = $profil['id'];
    			$dataPengguna['nama_depan'] = $profil['name']['familyName'];
    			$dataPengguna['nama_belakang'] = $profil['name']['givenName'];
    			$dataPengguna['email'] = $profil['emails']['0']['value'];
    			$dataPengguna['jenis_kelamin'] = !empty($profil['gender'])?$profil['gender']:'';
    			$dataPengguna['photo'] = !empty($profil['image']['url'])?$profil['image']['url']:'';
    			// Insert atau update data pengguna di database
    			$userID = $this->pengguna->checkUser($dataPengguna);
    			// simpan session
    			$this->session->set_userdata('telahLogin', true);
    			$this->session->set_userdata('dataPengguna', $dataPengguna);
    			// Redirect to profile page
    			redirect('Welcome/profil/');
    		} 
    		// Google authentication url
    		$data['loginURL'] = $this->google->createAuthUrl();
    		// Load google login view
    		$this->load->view('login',$data);
    	}
    
    	public function profil(){
    		// Redirect to login page if the user not logged in
    		if(!$this->session->userdata('telahLogin')){
    			redirect('/Welcome/');
    		}
    		// Get user info from session
    		$data['dataPengguna'] = $this->session->userdata('dataPengguna');
    		// Load user profile view
    		$this->load->view('pengguna/profil',$data);
    	}
    	public function keluar(){
    		// Reset OAuth access token
    		$this->google->revokeToken();
    		// Remove token and user data from the session
    		$this->session->unset_userdata('telahLogin');
    		$this->session->unset_userdata('dataPengguna');
    		// Destroy entire session data
    		$this->session->sess_destroy();
    		// Redirect to login page
    		redirect('welcome');
    	} 
    }
    Buat Controller baru dengan nama Wellcome.php simpan di application/controller/
  12. Buat model baru dengan nama Pengguna.php atau sesuai dengan kebutuhan Anda, ketik source code berikut ini :
    <?php
    defined('BASEPATH') OR exit('No direct script access allowed');
    
    class Pengguna extends CI_Model {
    	function __construct() {
    		$this->tableName = 'pengguna';
    		$this->primaryKey = 'id';
    	}
    	public function checkUser($data = array()){
    		$this->db->select($this->primaryKey);
    		$this->db->from($this->tableName);
    		$con = array(
    		'oauth_provider' => $data['oauth_provider'],
    		'oauth_uid' => $data['oauth_uid']
    		);
    		$this->db->where($con);
    		$query = $this->db->get();
    		$check = $query->num_rows();
    		if($check > 0){
    			// Ambil data sebelumnya
    			$result = $query->row_array();
    			// Update data pengguna
    			$data['diupdate'] = date("Y-m-d H:i:s");
    			$update = $this->db->update($this->tableName, $data, array('id'=>$result['id']));
    			// id pengguna
    			$userID = $result['id'];
    			}else{
    			// Insert data pengguna
    			$data['dibuat'] = date("Y-m-d H:i:s");
    			$data['diupdate'] = date("Y-m-d H:i:s");
    			$insert = $this->db->insert($this->tableName,$data);
    			// id pengguna
    			$userID = $this->db->insert_id();
    		}
    		// Return id pengguna
    		return $userID?$userID:false;
    	}
    }
    Model Pengguna.php simpan di application/model/
  13. Buat dua buah view untuk login dan profile.
    <?php
    defined('BASEPATH') OR exit('No direct script access allowed');
    ?><!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Welcome to CodeIgniter</title>
    
        <style type="text/css">
    
        ::selection { background-color: #E13300; color: white; }
        ::-moz-selection { background-color: #E13300; color: white; }
    
        body {
            background-color: #fff;
            margin: 40px;
            font: 13px/20px normal Helvetica, Arial, sans-serif;
            color: #4F5155;
        }
    
        a {
            color: #003399;
            background-color: transparent;
            font-weight: normal;
        }
    
        h1 {
            color: #444;
            background-color: transparent;
            border-bottom: 1px solid #D0D0D0;
            font-size: 19px;
            font-weight: normal;
            margin: 0 0 14px 0;
            padding: 14px 15px 10px 15px;
        }
    
        code {
            font-family: Consolas, Monaco, Courier New, Courier, monospace;
            font-size: 12px;
            background-color: #f9f9f9;
            border: 1px solid #D0D0D0;
            color: #002166;
            display: block;
            margin: 14px 0 14px 0;
            padding: 12px 10px 12px 10px;
        }
    
        #body {
            margin: 0 15px 0 15px;
        }
    
        p.footer {
            text-align: right;
            font-size: 11px;
            border-top: 1px solid #D0D0D0;
            line-height: 32px;
            padding: 0 10px 0 10px;
            margin: 20px 0 0 0;
        }
    
        #container {
            margin: 10px;
            border: 1px solid #D0D0D0;
            box-shadow: 0 0 8px #D0D0D0;
        }
        </style>
    </head>
    <body>
    
    	<div id="container">
    		<h1>Welcome to CodeIgniter!</h1>
    
    		<div id="body">
    			<h2>CodeIgniter Google Login</h2>
    			<!-- Display sign in button -->
    			<a href="<?php echo $loginURL; ?>"><img src="<?php echo base_url('assets/images/login-with-google.png'); ?>" /></a>
    		</div>
    
    		<p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds. <?php echo (ENVIRONMENT === 'development') ? 'CodeIgniter Version <strong>' . CI_VERSION . '</strong>' : '' ?></p>
    	</div>
    
    </body>
    </html>
    login.php simpan di application/views
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Welcome to CodeIgniter</title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <style type="text/css">
        /***
        User Profile Sidebar by @keenthemes
        A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme
        Licensed under MIT
        ***/

        body {
        background: #F1F3FA;
        }

        /* Profile container */
        .profile {
        margin: 20px 0;
        }

        /* Profile sidebar */
        .profile-sidebar {
        padding: 20px 0 10px 0;
        background: #fff;
        }

        .profile-userpic img {
        float: none;
        margin: 0 auto;
        width: 50%;
        height: 50%;
        -webkit-border-radius: 50% !important;
        -moz-border-radius: 50% !important;
        border-radius: 50% !important;
        }

        .profile-usertitle {
        text-align: center;
        margin-top: 20px;
        }

        .profile-usertitle-name {
        color: #5a7391;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 7px;
        }

        .profile-usertitle-job {
        text-transform: uppercase;
        color: #5b9bd1;
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 15px;
        }

        .profile-userbuttons {
        text-align: center;
        margin-top: 10px;
        }

        .profile-userbuttons .btn {
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 600;
        padding: 6px 15px;
        margin-right: 5px;
        }

        .profile-userbuttons .btn:last-child {
        margin-right: 0px;
        }
            
        .profile-usermenu {
        margin-top: 30px;
        }

        .profile-usermenu ul li {
        border-bottom: 1px solid #f0f4f7;
        }

        .profile-usermenu ul li:last-child {
        border-bottom: none;
        }

        .profile-usermenu ul li a {
        color: #93a3b5;
        font-size: 14px;
        font-weight: 400;
        }

        .profile-usermenu ul li a i {
        margin-right: 8px;
        font-size: 14px;
        }

        .profile-usermenu ul li a:hover {
        background-color: #fafcfd;
        color: #5b9bd1;
        }

        .profile-usermenu ul li.active {
        border-bottom: none;
        }

        .profile-usermenu ul li.active a {
        color: #5b9bd1;
        background-color: #f6f9fb;
        border-left: 2px solid #5b9bd1;
        margin-left: -2px;
        }

        /* Profile Content */
        .profile-content {
        padding: 20px;
        background: #fff;
        min-height: 460px;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="row profile">
            <div class="col-md-3">
                <div class="profile-sidebar">
                    <!-- SIDEBAR USERPIC -->
                    <div class="profile-userpic">
                        <img src="<?php echo $dataPengguna['photo']; ?>" class="img-responsive" alt="">
                    </div>
                    <!-- END SIDEBAR USERPIC -->
                    <!-- SIDEBAR USER TITLE -->
                    <div class="profile-usertitle">
                        <div class="profile-usertitle-name">
                            <?php echo $dataPengguna['nama_depan'].' '.$dataPengguna['nama_belakang']; ?>
                        </div>
                        <div class="profile-usertitle-job">
                            Developer
                        </div>
                    </div>
                    <!-- END SIDEBAR USER TITLE -->
                    <!-- SIDEBAR BUTTONS -->
                    <div class="profile-userbuttons">
                        <button type="button" class="btn btn-success btn-sm">Follow</button>
                        <button type="button" class="btn btn-danger btn-sm">Message</button>
                    </div>
                    <!-- END SIDEBAR BUTTONS -->
                    <!-- SIDEBAR MENU -->
                    <div class="profile-usermenu">
                        <ul class="nav">
                            <li class="active">
                                <a href="#">
                                <i class="glyphicon glyphicon-home"></i>
                                Overview </a>
                            </li>
                            <li>
                                <a href="#">
                                <i class="glyphicon glyphicon-user"></i>
                                Account Settings </a>
                            </li>
                            <li>
                                <a href="#" target="_blank">
                                <i class="glyphicon glyphicon-ok"></i>
                                Tasks </a>
                            </li>
                            <li>
                                <a href="#">
                                <i class="glyphicon glyphicon-flag"></i>
                                Help </a>
                            </li>
                        </ul>
                    </div>
                    <!-- END MENU -->
                </div>
            </div>
            <div class="col-md-9">
                <div class="profile-content">
                <p>Logout from <a href="<?php echo base_url().'welcome/keluar'; ?>">here</a></p>
                </div>
            </div>
        </div>
    </div>
    <center>
    <strong>Powered by <a href="https://sharecodephp.com" target="_blank">sharecodephp</a></strong>
    </center>
</body>
</html>
profil.php simpan di application/views/pengguna/

 

Demikianlah tutorial login dengan Akun Google pada Codeigniter, semoga bermanfaat.

Silahkan klik disini untuk melihat DEMO

7 tanggapan pada “Membuat login dengan Akun Google pada Codeigniter”

  1. kalo masalahnya seperti ini solusinya gimana ya ?


    Type: InvalidArgumentException

    Message: Redirect URI must be absolute

  2. An uncaught Exception was encountered
    Type: InvalidArgumentException

    Message: file does not exist

    Filename: C:\xampp\htdocs\login_google_ci\vendor\google\apiclient\src\Google\Client.php

    Line Number: 839

    Backtrace:

    File: C:\xampp\htdocs\login_google_ci\vendor\google\apiclient\src\Google\Client.php
    Line: 824
    Function: setAuthConfig

    File: C:\xampp\htdocs\login_google_ci\application\libraries\Google.php
    Line: 9
    Function: setAuthConfigFile

    File: C:\xampp\htdocs\login_google_ci\application\controllers\Welcome.php
    Line: 11
    Function: library

    File: C:\xampp\htdocs\login_google_ci\index.php
    Line: 315
    Function: require_once

  3. An uncaught Exception was encountered
    Type: InvalidArgumentException

    Message: file does not exist

    Filename: C:\xampp\htdocs\login_google_ci\vendor\google\apiclient\src\Google\Client.php

    Line Number: 839

    Backtrace:

    File: C:\xampp\htdocs\login_google_ci\vendor\google\apiclient\src\Google\Client.php
    Line: 824
    Function: setAuthConfig

    File: C:\xampp\htdocs\login_google_ci\application\libraries\Google.php
    Line: 9
    Function: setAuthConfigFile

    File: C:\xampp\htdocs\login_google_ci\application\controllers\Welcome.php
    Line: 11
    Function: library

    File: C:\xampp\htdocs\login_google_ci\index.php
    Line: 315
    Function: require_once

  4. Type: InvalidArgumentException

    Message: file does not exist

    Filename: C:\xampp\htdocs\11login_google_ci\vendor\google\apiclient\src\Google\Client.php

    Line Number: 839

    Backtrace:

    File: C:\xampp\htdocs\11login_google_ci\vendor\google\apiclient\src\Google\Client.php
    Line: 824
    Function: setAuthConfig

    File: C:\xampp\htdocs\11login_google_ci\application\libraries\Google.php
    Line: 7
    Function: setAuthConfigFile

    File: C:\xampp\htdocs\11login_google_ci\application\controllers\Welcome.php
    Line: 9
    Function: library

    File: C:\xampp\htdocs\11login_google_ci\index.php
    Line: 315
    Function: require_once

    kalo ada error seperti ini solusinya gimana ya?

  5. Type: InvalidArgumentException

    Message: file does not exist

    Filename: C:\xampp\htdocs\11login_google_ci\vendor\google\apiclient\src\Google\Client.php

    Line Number: 839

    Backtrace:

    File: C:\xampp\htdocs\11login_google_ci\vendor\google\apiclient\src\Google\Client.php
    Line: 824
    Function: setAuthConfig

    File: C:\xampp\htdocs\11login_google_ci\application\libraries\Google.php
    Line: 7
    Function: setAuthConfigFile

    File: C:\xampp\htdocs\11login_google_ci\application\controllers\Welcome.php
    Line: 9
    Function: library

    File: C:\xampp\htdocs\11login_google_ci\index.php
    Line: 315
    Function: require_once

    kalo ada erros seperti ini solusinya gimana ya?

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.