Pada tutorial ini kita akan membuat login dengan akun google di Laravel 8, Naahh pasti kalian sering melihat ada suatu aplikasi atau website yang loginnya langsung menggunakan akun google. Dengan menggunakan akun google dapat membuat proses pendaftaran lebih singkat, karena data untuk pendaftaran akun langsung diambil dari akun google.
Kalian dapat menggunakan Akun Google untuk login ke aplikasi dan layanan pihak ketiga. Sehingga dengan akun google tersebut Kalian tidak perlu mengingat nama pengguna dan sandi masing-masing akun.
Di tutorial ini kita juga akan menggunakan package laravel socialite. Dengan laravel socialite dapat membantu kita dalam proses OAuth login dengan menggunakan akun media sosical.
Client Id dan Client Secret di google APIs
Langakh awal kita mengabil terlebih dahulu client id dan client secret nya. Silahkan kalian daftar terlebih dahulu di sini https://console.cloud.google.com. kemudian akan muncul tampilan seperti ini, silahkan kalian buat project baru.
Setelah itu silahkan isi nama projectnya. Disini saya akan mengisi dengan nama “leravio” sebagai nama project nya. Kalian bebas memberi nama project sesuai keinginan kalian. Kemudian silahkan klik create
Kemudian silahkan kalian klik menu OAuth consent screen, setelah itu dibagian user type silahkan pilih external dan klik tombol create.
Kemudian silahkan kalian isi app informasi dibawah ini.
Selanjutnya buka menu Credentials → Create Credentials → OAuth Client ID.
Dibagian application type silahkan pilih web application, kemudian pada urli silahkan isi dengan url ini http://127.0.0.1:8000/google/callback lalu klik save.
kemudian akan muncul pop up yang berisi Client Id dan Client Secret
Install Laravel dan laravel jetstream
Mari kita install terlebih dahulu laravel 8 nya, untuk tutorial kalian bisa mengunjungi disini.
Setelah menginstall laravel, langkah selanjutnya mari kita install laravel jetstream, silahkan kalian ketik perintah dibawah ini. Bagi kalian yang bingung dengan laravel jetstream kalian bisa mengunjungi Berkenalan Dengan Laravel Jetstream.
composer require laravel/jetstream
Kemudian disini saya memilih livewire sebagai template engine blade, kalian bisa ketik perintah.
php artisan jetstream:install livewire
Selanjutnya ketik perintah berikut untul melakukan compile assets.
npm install && npm run dev
Silahkan kalian buka file .env kemudian silahkan kalian ganti db_database nya sesuai dengan keinginan kalian, disini saya akan menamai database dengan nama “laravel-login-google”.
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel-login-google DB_USERNAME=root DB_PASSWORD=
Setelah itu silahkan kalian buat database di http://localhost/phpmyadmin, kemudian langkah selanjutnya mari kita migrate databasenya dengan perintah berikut.
php artisan migrate
Install package socialite
Kemudian silahkan kalian install package socialite denga perintah berikut:
composer require laravel/socialite
Setelah itu silahkan buka file config/service.php tambahkan array untuk google yang menampung client_id, client_secret dan redirect.
<?php
return [
......
'google' => [
'client_id' => 'client_id didapat dari google APIs',
'client_secret' => 'client_secret didapat dari google APIs',
'redirect' => 'http://127.0.0.1:8000/google/callback',
],
];Tambah Kolom di Tabel User
Langka selanjutnya kita akan menambah kolom untuk id google. Mari kita jalankan perintah berikut ini. Setalah itu akan otomatis membuat file migration.
php artisan make:migration add_google_id_column_to_users_table
setelah kita breshasil membuat file migration untuk column google_id, selanjutnya silahkan kalian copy file dibawah ini dan paste di file migration google_id yang dibuat tadi.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class AddGoogleIdColumn extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::table('users', function ($table) {
$table->string('google_id')->nullable();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
//
}
}
Kemudian kita juga perlu memperbarui file app/model/user.php. Kita buat seperti ini.
<?php
namespace App\Models;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Fortify\TwoFactorAuthenticatable;
use Laravel\Jetstream\HasProfilePhoto;
use Laravel\Sanctum\HasApiTokens;
class User extends Authenticatable
{
use HasApiTokens;
use HasFactory;
use HasProfilePhoto;
use Notifiable;
use TwoFactorAuthenticatable;
/**
* The attributes that are mass assignable.
*
* @var string[]
*/
protected $fillable = [
'name',
'email',
'password',
'google_id'
];
/**
* The attributes that should be hidden for serialization.
*
* @var array
*/
protected $hidden = [
'password',
'remember_token',
'two_factor_recovery_codes',
'two_factor_secret',
];
/**
* The attributes that should be cast.
*
* @var array
*/
protected $casts = [
'email_verified_at' => 'datetime',
];
/**
* The accessors to append to the model's array form.
*
* @var array
*/
protected $appends = [
'profile_photo_url',
];
}Buat Route
Selanjutnya mari kita buat routenya. Kalian bisa copy code dibawah ini, kemudian kalian paste di file app/http/routes.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\GoogleController;
Route::get('auth/google', [GoogleController::class, 'redirectGoogle']);
Route::get('google/callback', [GoogleController::class, 'googleCallback']);Buat controller
Mari kita buat controller nya. Ketik perintah berikut ini.
php artisan make:controller GoogleController
Ssetelah itu maka otomatis akan dibuatkan file GoogleController, silahkan kalian kunjungi app/http/controllers/GoogleController.php. Copy code dibawah ini.
<?php
namespace App\Http\Controllers;
use App\Models\User;
use Exception;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Laravel\Socialite\Facades\Socialite;
class GoogleController extends Controller
{
public function redirectGoogle()
{
return Socialite::driver('google')->redirect();
}
public function googleCallback()
{
if (Auth::check()){
return redirect('/dashboard');
}
try {
$user = Socialite::driver('google')->user();
$finduser = User::where('google_id', $user->id)->first();
if($finduser){
Auth::login($finduser);
return redirect('/dashboard');
}else{
$newUser = User::create([
'name' => $user->name,
'email' => $user->email,
'google_id'=> $user->id,
'password' => encrypt('passwordDummy')
]);
Auth::login($newUser);
return redirect('/dashboard');
}
} catch (Exception $e) {
dd($e->getMessage());
}
}
}
Buat view
Langkah terakhir silahkan kalian perbarui file resources/view/auth/login.blade.php view nya atau kalian bisa copy code dibawah ini.
<x-guest-layout>
<x-jet-authentication-card>
<x-slot name="logo">
<x-jet-authentication-card-logo />
</x-slot>
<x-jet-validation-errors class="mb-4" />
@if (session('status'))
<div class="mb-4 font-medium text-sm text-green-600">
{{ session('status') }}
</div>
@endif
<form method="POST" action="{{ route('login') }}">
@csrf
<div>
<x-jet-label value="Email" />
<x-jet-input class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
</div>
<div class="mt-4">
<x-jet-label value="Password" />
<x-jet-input class="block mt-1 w-full" type="password" name="password" required autocomplete="current-password" />
</div>
<div class="block mt-4">
<label class="flex items-center">
<input type="checkbox" class="form-checkbox" name="remember">
<span class="ml-2 text-sm text-gray-600">{{ __('Remember me') }}</span>
</label>
</div>
<div class="flex items-center justify-end mt-4">
<a href="{{ url('auth/google') }}">
<img src="https://developers.google.com/identity/images/btn_google_signin_dark_normal_web.png" style="margin-left: 3em;">
</a>
<x-jet-button class="ml-4">
{{ __('Login') }}
</x-jet-button>
</div>
<div class="flex items-center justify-end mt-4">
@if (Route::has('password.request'))
<a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('password.request') }}">
{{ __('Forgot your password?') }}
</a>
@endif
</div>
</form>
</x-jet-authentication-card>
</x-guest-layout>Sekian untuk tutorial kali cara membuat login dengan akun Google di Laravel 8. Jika ada kesulitan kalian bisa komentar dibawah ini.