Cara Membuat Login Google dengan Codeigniter

 

Seperti judul postingan Cara Membuat Login Google dengan Codeigniter, kita akan membuat sebuah metode login dengan menggunakan akun google. Framework yang digunakan pada tutorial kali ini adalah Codeigniter 3. Untuk versi lainnya dapat disesuaikan.

Sebelum memulai mengikuti tutorial di bawah ini pastikan anda sudah menginstall Composer sebab dependency manager ini nantinya diperlukan untuk menginstall library google apiclient. Baca Mengenal dan Menginstall Composer.

Daftar isi
1. Membuat Apikey Google
2. Memasang Codeigniter dan Menginstall Library
3. Membuat Kode

1. Membuat Apikey Google

Tahap pertama yang harus anda lalui adalah membuat api key google sehingga nantinya website anda dapat mengakses akun google yang di inginkan. Untuk mendapatkan apikey ini caranya sangat mudah anda hanya memerlukan akun email google kemudian masuk ke alamat https://console.developers.google.com/. Selanjutnya ikuti langkah-langkah di bawah ini.

1) Buat project baru dengan mengklik new project pada jendela select a project

2) Isi project name sesuai keinginan anda, contohnya disini saya menggunakan nama Login Google. Kemudian klik Create

3) Setelah project baru berhasil dibuat klik menu OAuth consent screen

4) Pilih external lalu klik create

5) Isi App Name, User support email dan Email address pada developer contact information kemudian klik Save and continue

Catatan : pada tahapan nomor 5 anda juga bisa menambahkan logo aplikasi.

6) Selanjutnya klik Save and continue

7) Biarkan kosong lalu klik Save and continue

8) Jika sudah muncul tampilan seperti pada gambar dibawah silahkan lanjut dengan mengklik menu Credential

9) Klik Create Credential kemudian pilih OAuth client ID

10) Aplication Type pilih web aplication kemudian add uri pada bagian Authorized redirect URIs kemudian isi dengan halaman aksi login google anda. Misalnya alamat yang akan mengakses login google saya adalah http://localhost/google/login

11) Simpan kode yang muncul untuk nantinya dipasang pada kode website.

2. Memasang Codeigniter dan Menginstall Library

Langkah selanjutnya adalah memasang Codeigniter pada folder root website anda. Untuk cara pemasangan silahkan baca Cara Pemasangan Codeigniter untuk Pemulan. Pada tutorial ini saya memberi nama "google". Sehingga ketika di akses pada browser adalah "http://localhost/google".

Masuk ke folder root website kemudian install library google apiclient dengan memasukkan perintah dibawah pada CMD.

composer require google/apiclient:"^2.0"

Catatan : Apabila muncul error "require-dev.mikey179/vfsStream is invalid, it should not contain uppercase characters. Please use mikey179/vfsstream instead." silahkan baca Cara Mengatasi require-dev.mikey179/vfsStream is invalid, it should not contain uppercase characters. Please use mikey179/vfsstream instead.

Terakhir jangan lupa untuk membuat Url project codeigniter dapat diakses tanpa embel-embel index.php misalnya http://localhost/google/index.php/login sebab nantinya akan berpengaruh ketika melakukan redirect url. Baca Menghilangkan Index.php pada url Codeigniter

.

3. Membuat Kode

1) Buat Contoller "Login.php" , isi dengan kode dibawah ini.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Login extends CI_Controller {

	public function index()
	{
		include_once APPPATH . "../vendor/autoload.php";
		  $google_client = new Google_Client();
		  $google_client->setClientId(''); //masukkan ClientID anda 
		  $google_client->setClientSecret(''); //masukkan Client Secret Key anda
		  $google_client->setRedirectUri('http://localhost/google/login'); //Masukkan Redirect Uri anda
		  $google_client->addScope('email');
		  $google_client->addScope('profile');

		  if(isset($_GET["code"]))
		  {
		   $token = $google_client->fetchAccessTokenWithAuthCode($_GET["code"]);
		   if(!isset($token["error"]))
		   {
		    $google_client->setAccessToken($token['access_token']);
		    $this->session->set_userdata('access_token', $token['access_token']);
		    $google_service = new Google_Service_Oauth2($google_client);
		    $data = $google_service->userinfo->get();
		    $current_datetime = date('Y-m-d H:i:s');
		    $user_data = array(
		      'first_name' => $data['given_name'],
		      'last_name'  => $data['family_name'],
		      'email_address' => $data['email'],
		      'profile_picture'=> $data['picture'],
		      'updated_at' => $current_datetime
		     );
		    $this->session->set_userdata('user_data', $data);
		   }									
		  }
		  $login_button = '';
		  if(!$this->session->userdata('access_token'))
		  {
		  	
		   $login_button = '<a href="'.$google_client->createAuthUrl().'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRy-H91VXfjWO-SEJukkSVeCwaZTNVkAu0ZVT7NSUcwsSFNvUu5mmTI5czFQSbEfIwlvwDB2coIUSPcP32O9pxb3KD2l8Xk8FmBA3QYS5f67jwiY_Wc5yzkgcnnskLvN23MJnCVZoKIkU/s320/google_logo.png" /></a>';
		   $data['login_button'] = $login_button;
		   $this->load->view('google_login', $data);
		  }
		  else
		  {
		  	// uncomentar kode dibawah untuk melihat data session email
		  	// echo json_encode($this->session->userdata('access_token')); 
		  	// echo json_encode($this->session->userdata('user_data'));
		   echo "Login success";
		  }
	}
	public function logout()
	 {
	  $this->session->unset_userdata('access_token');

	  $this->session->unset_userdata('user_data');
	  echo "Logout berhasil";
	 }
}
	

Jangan lupa isi setClientId dan setClientSecret sesuai dengan apikey yang telah dibuat sebelumnya. Serta setRedirectUri sesuaikan dengan url yang di daftarkan sebelumnya yaitu "http://localhost/google/login".

2) Buat view "google_login" , isi dengan kode dibawah ini.

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Login with Google in Codeigniter</title>
  <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
  
 </head>
 <body>
  <div class="container">
   <br />
   <h2 align="center">Login using Google Account with Codeigniter</h2>
   <br />
   <div class="panel panel-default">
   <?php
   if(!isset($login_button))
   {

    $user_data = $this->session->userdata('user_data');
    echo '<div class="panel-heading">Welcome User</div><div class="panel-body">';
    echo '<img src="'.$user_data['profile_picture'].'" class="img-responsive img-circle img-thumbnail" />';
    echo '<h3><b>Name : </b>'.$user_data["first_name"].' '.$user_data['last_name']. '</h3>';
    echo '<h3><b>Email :</b> '.$user_data['email_address'].'</h3>';
    echo '<h3><a href="http://localhost/login_google/google/logout">Logout</h3></div>';
   }
   else
   {
    echo '<div align="center">'.$login_button . '</div>';
   }
   ?>
   </div>
  </div>
 </body>
</html>

	

3) Aktifkan library Session, buka application/config/autoload.php, ubah kode "$autoload['libraries'] = array('');" menjadi "$autoload['libraries'] = array('session');" kemudian save.

4) Buka application/config/routes.php, lalu ubah "$route['default_controller'] = 'welcome';" menjadi "$route['default_controller'] = 'login';".

Terakhir silahkan lakukan pengetesan, apabila berhasil akan tampil pilihan akun google yang akan digunakan untuk login setelah memilih akun, akan diredirect ke halaman dengan menampilkan tulisan "Login success".