Tutorial Oauth Google Dengan CodeIgniter4

By Harjito

image from Tutorial Oauth Google Dengan CodeIgniter4

Pada tutorial kali ini kita akan belajar mengintegrasikan Oauth google dengan CodeIgniter4. Asumsinya kalian sudah menginstall CodeIgniter4 dan composer. Dengan menggunakan Oauth, kita tidak perlu lagi menyimpan data password dan email yang didaftarkan sudah pasti email valid, jadi tida perlu melakukan verivikasi email.

Membuat Proyek API Google

  • Pertama, Anda perlu membuat aplikasi dengan Google yang memungkinkan Anda mendaftarkan situs Anda ke Google. Ini memungkinkan Anda untuk menyiapkan informasi dasar tentang situs web Anda dan beberapa detail teknis juga. untuk membuat Proyek API google kunjungi Google Developers console.

Membuat Project

  • Jika anda belum pernah membuat API Google maka pada menubar akan muncul select a project, klik sekali maka akan uncul jendela dialog
  • klik: new project, lalu isikan nama project
  • klik: create
  • klik: select project

Mengatur Persetujuan (bagian ini bisa dilewati jika sebelumnya pernah membuat API Google)

  • Klik: Configure Consents Screen
  • Pilih: external untuk user type (kecuali kita memiliki akun organisasi dan hanya untuk kalangan internal)
  • Click Create
  • Isikan APP name, email kita dan logo
  • Isikan alamat website untuk homepage, policy dan ToS, domain dan emaul developer
  • Klik: Save and Continue
  • Klik: Add or Remove Scope
  • Pilih: ../auth/userinfo.email dan ../auth/userinfo.profile
  • Klik: Update
  • Klik: Save and Continue
  • Pada test Users kita lewati saja, dengan cara klik: Save and Continue
  • Klik: Back to Dashboard

Membuat Credential

  • Klik: Credentials pada sidebar
  • Klik: Create Credentials
  • Pilih: OAuth Client ID
  • Pilih: Web application pada application type
  • Isikan Nama (bebas)
  • Pada bagian Authorized JavaScript origins, klik Add URI, isikan url website, misal http://localhost:8080
  • Pada bagian Authorized redirect URIs, klik Add URI, isikan http://localhost:8080/redirect (redirect nantinya adalah nama controller kita di CI4)
  • Klik: Create
  • Salin Client ID dan Client Secret

Install Package Oauth

  • Pastikan terminal sudah pada direktori Aplikasi CodeIgniter4
  • Pastikan Sudah trinstall composer
  • Jalankan perintah: composer require google/apiclient:"^2.0"

Membuat Migrasi Database

Dalam tutorial ini kita akan menggunakan migrasi untuk menggenerate tabel users, groups dan users_groups.

Membuat File Migrasi Untuk Tabel Users

  • Masuk ke folder aplikasi CodeIgniter4 kita
  • Ketikkan perintah: php spark make:migration User
  • Buka File app/Database/Migrations/xxxx-xx-xx-xxxxxx_User.php (xxxx-xx-xx-xxxxxx adalah waktu file migrasi dibuat)
  • Pada method: up ketikkan perintah berikut
$this->forge->addField([
    'id' => [
		'type' => 'INT',
		'constraint' => 11,
		'unsigned' => TRUE,
		'auto_increment' => TRUE,
    ],
    'google_id' => [
        'type' => 'VARCHAR',
        'constraint' => 25,
    ],
	'email' => [
		'type' => 'VARCHAR',
		'constraint' => 50,
    ],
	'name' => [
		'type' => 'VARCHAR',
		'constraint' => 50,
    ],
	'picture' => [
		'type' => 'VARCHAR',
		'constraint' => 100,
    ],
$this->forge->addKey('id',TRUE);
$this->forge->addUniqueKey('google_id',TRUE);
$this->forge->addUniqueKey('email',TRUE);
$this->forge->createTable('users', false, ['ENGINE' => 'InnoDB']);
  • Pada method: down ketikkan
        $this->forge->dropTable('users', false);
  • Simpan

Membuat File Migrasi Untuk Tabel Groups

  • Ketikkan perintah: php spark make:migration Group
  • Buka File app/Database/Migrations/xxxx-xx-xx-xxxxxx_Group.php
  • Pada method up ketikkan perintah berikut
$this->forge->addField([
	'id' => [
		'type' => 'TINYINT',
		'constraint' => 4,
		'unsigned' => TRUE,
		'auto_increment' => TRUE,
	],
	'name' => [
		'type' => 'VARCHAR',
		'constraint' => 50,
	],
]);
$this->forge->addKey('id',TRUE);
$this->forge->createTable('groups', false, ['ENGINE' => 'InnoDB']);
  • Pada method: down, ketikkan perintah
        $this->forge->dropTable('groups', false);

Membuat File Migrasi Untuk Tabel Users_Groups

  • Ketikkan perintah: php spark make:migration UserGroup
  • Buka File app/Database/Migrations/xxxx-xx-xx-xxxxxx_UserGroup.php
  • Pada method up ketikkan perintah berikut
$this->forge->addField([
	'user_id' => [
		'type' => 'INT',
		'constraint' => 11,
		'unsigned' => TRUE,
	],
	'group_id' => [
		'type' => 'TINYINT',
		'constraint' => 4,
		'unsigned' => TRUE,
	],
]);
$this->forge->addKey(['user_id', 'group_id'],TRUE);
$this->forge->addForeignKey('user_id', 'users', 'id', false, 'CASCADE');
$this->forge->addForeignKey('group_id', 'groups', 'id', false, 'CASCADE');
$this->forge->createTable('users_groups', false, ['ENGINE' => 'InnoDB']);
  • Pada method: down ketikkan
$this->forge->dropTable('users_groups', false);

Menjalankan Migrasi

  • ketikkan perintah: php spark migrate

Membuat Model

Membuat Model Users

  • ketikka perintah: php spark make:model Users
  • Buka file app/Models/Users
  • Isikan pada allowedField: ‘google_id’,’name’,’email’,‘picture’
  • Isikan pada afterInset: ‘addGroup’
  • Tambahkan script berikut setelah baris afterDelete
protected function addGroup($data)
{
	if($data){
		$usersGroups = new UsersGroups();
		$usersGroups->insert([
			'user_id'=>$data['id'], 
			'group_id' =>1
		]);
	}
    return $data;
}

Membuat Model Groups

  • ketikka perintah: php spark make:model Groups
  • Buka file app/Models/Groups
  • Isikan pada allowedField: ’name’

Membuat Model UsersGroups

  • ketikka perintah: php spark make:model UsersGroups
  • Buka file app/Models/UsersGroups
  • Ubah pada bagian table menjadi: ‘users_groups’
  • Isikan pada allowedField: ‘user_id’,‘group_id’

Membuat Seeder Untuk Group

  • ketikka perintah: php spark make:seeder Group
  • Buka file app/Database/Seeds/Group.php
  • Tambahkan: use App\Models\Groups; di bawah use CodeIgniter\Database\Seeder;
  • Pada method: run, Ketikkan
$data = [
	[
		'name' => 'member',
	],
	[
		'name' => 'operator',
	],
	[
		'name' => 'admin',
	],
];

$model = new Groups();
$model->insertBatch($data);
  • Jalankan seeder dengan perintah: php spark db:seed Group

Menyiapkan Controller

Perhatian!!! Dalam tutorial ini, kita hanya fokus pada alur. Kita tidak membahas menganai tampilan. Jadi kita sama sekali tidak menyentuh view. Untuk pengembangan, nantinya bisa disesuaikan.

Mengubah Controller Home

  • Buka file app/Controllers/Home.php
  • Ubah isi dari method index dengan script berikut
$auth = Session()->auth;
if($auth){
	echo strlen($auth->id);
	echo sprintf("Data akun anda<br>ID: %s<br>Nama: %s<br>Email: %s<br><img src=\"%s\">", $auth->id, $auth->name, $auth->email, $auth->picture);
	echo "<br><a href=\"/logout\">Logout</a>";
	return;
}
echo "<a href=\"/redirect\">login</a>";

Membuat Controller Logout

  • Ketikkan perintah: php spark make:controller Logout
  • Buka file app/Controllers/Logout.php
  • Ubah isi dari method index dengan script berikut
Session()->destroy();
return Redirect()->to('/');

Membuat Controller Redirect

  • Ketikkan perintah: php spark make:controller Redirect
  • Buka file app/Controllers/Redirect.php
  • Ubah isi dari method index dengan script berikut
$clientID = '<CLIENT_ID_ANDA>';
$clientSecret = '<SECRET_ID_ANDA>';
$redirectUri = 'http://localhost:8080/redirect'; //Harus sama dengan yang kita daftarkan
		
$client = new Google_Client();
$client->setClientId($clientID);
$client->setClientSecret($clientSecret);
$client->setRedirectUri($redirectUri);
$client->addScope("email");
$client->addScope("profile");

if (isset($_GET['code'])) {
	$token = $client->fetchAccessTokenWithAuthCode($_GET['code']);
	if(isset($token['access_token'])){
		$client->setAccessToken($token['access_token']);							
		$Oauth = new Google_Service_Oauth2($client);
		$userInfo = $Oauth->userinfo->get();
		$users = new Users();
		$data = $users->where('google_id',$userInfo->id)->find();
		if(! $data){
			if($users->insert([
				'google_id' => $userInfo->id,
				'email' => $userInfo->email,
				'name' => $userInfo->name,
				'picture' => $userInfo->picture
			])){
				$userInfo->group = 1;
                $userInfo->id = $data[0]['id'];
				Session()->auth = $userInfo;
				return redirect()->to('/');
			}
		    return redirect()->back();
		}
		$groups = new UsersGroups();
		$group = $groups->where('user_id',$data[0]['id'])->find();
		$userInfo->group_id = $group[0]['group_id'];
		$userInfo->id = $data[0]['id']; 
		Session()->auth = $userInfo;
		return redirect()->to('/');
	}
} 
$auth = Session()->auth;
if($auth){
	return redirect()->to('/');
}
echo "<a href='".$client->createAuthUrl()."'>Google Login</a>";

Menguji Aplikasi

  • Jalankan perintah: php spark serve
  • Klik: http://localhost:8080

Mudah-mudahan beranfaat. Salam.

Tags:

Ikuti terus tutorial saya di e-Project dan channel saya di


Donasi