Halo semuanya, kembali lagi di tulisan saya. Baiklah pada kesempatan kali ini kita akan belajar bagaimana cara menerapkan login google pada project laravel. Bagaimana cara membuatnya?, ayo ikuti tutorialnya berikut ini.
Google sign-in adalah fitur yang sangat populer digunakan oleh banyak aplikasi untuk melakukan pendaftaran dan masuk ke dalam sebuah sistem. Dengan menggunakan fitur ini, user akan lebih mudah masuk karena mereka hanya butuh menekan tombol sign-in/sign-up untuk bisa mendapatkan autentikasi ke dalam sistem.
Dari sisi keamanan, password user tidak akan tersimpan di dalam sistem, karena autentikasi akan dilakukan oleh google. Data yang bisa disimpan hanya email, foto, nama, platform login, dan data publik lainnya. Adapun password tidak akan tersimpan dan tidak akan bisa diambil datanya dari pihak selain google
Dari sisi UX flownya menjadi lebih simpel, dan dari sisi kemanan password user terjamin dan autentikasi dilakukan oleh google.
Pada tutorial kali ini, kita akan menggunakan library socialite dengan laravel versi 7. Socialite adalah salah satu library yang didukung oleh laravel dan dapat digunakan untuk membuat fitur login google, faceook, github, twitter, dll.
Baca Artikel Lain ✨ |
📰 1. Cara Cepat Membuat Back-end Restful API Tanpa Coding dengan Typicode Json Server read more |
📰 2. Cara Menggunakan Library Datatable Serverside di Laravel Moodle read more |
📰 3. Cara Membuat Import Data Excel ke Database Mysql dengan php read more |
📰 4. Cara Membuat Peta Digital dengan Leafletjs, Alternatif Peta Digital tanpa Google Maps API read more |
Cara Membuat Fitur Login Google di Laravel
1. Instalasi Laravel dan Membuat Laravel Auth
composer create-project --prefer-dist laravel/laravel:^7.0 latihan_google_signin
composer require laravel/ui:^2.4
php artisan ui vue --auth
npm install
npm run dev
php artisan migrate
![]() |
Instalasi laravel dan laravel auth |
2. Mendapatkan Client Id dan Client Secret pada Google
![]() |
Membuat project baru (1) |
![]() |
Membuat project baru (2) |
![]() |
Membuat OAuth consent screen (1) |
![]() |
Membuat OAuth consent screen (2) |
![]() |
Membuat credentials (1) |
![]() |
Copy client id dan client secret yang diberikan |
![]() |
Setting file .env |
3. Instalasi dan Setting Library Socialite
composer require laravel/socialite
<?php
return [
/*
|--------------------------------------------------------------------------
| Third Party Services
|--------------------------------------------------------------------------
|
| This file is for storing the credentials for third party services such
| as Mailgun, Postmark, AWS and more. This file provides the de facto
| location for this type of information, allowing packages to have
| a conventional file to locate the various service credentials.
|
*/
.....
'google' => [
'client_id' => env('GOOGLE_CLIENT_ID'),
'client_secret' => env('GOOGLE_APP_SECRET'),
'redirect' => env('GOOGLE_REDIRECT'),
],
];
4. Membut Tombol Sign-in Google pada View
<div class="form-group row mb-0">
<div class="col-md-8 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Login') }}
</button>
<!-- tambahkan script di bawah ini untuk membuat tombol signin google -->
<a class="btn btn-danger" href="{{ '/auth/redirect'}}">google</a>
@if (Route::has('password.request'))
<a class="btn btn-link" href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
@endif
</div>
</div>
5. Setting LoginController
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
use Laravel\Socialite\Facades\Socialite; //tambahkan library socialite
use App\User; //tambahkan model user
class LoginController extends Controller
{
/*
|--------------------------------------------------------------------------
| Login Controller
|--------------------------------------------------------------------------
|
| This controller handles authenticating users for the application and
| redirecting them to your home screen. The controller uses a trait
| to conveniently provide its functionality to your applications.
|
*/
.........
//tambahkan script di bawah ini
public function redirectToProvider()
{
return Socialite::driver('google')->redirect();
}
//tambahkan script di bawah ini
public function handleProviderCallback(\Request $request)
{
try {
$user_google = Socialite::driver('google')->user();
$user = User::where('email', $user_google->getEmail())->first();
//jika user ada maka langsung di redirect ke halaman home
//jika user tidak ada maka simpan ke database
//$user_google menyimpan data google account seperti email, foto, dsb
if($user != null){
\auth()->login($user, true);
return redirect()->route('home');
}else{
$create = User::Create([
'email' => $user_google->getEmail(),
'name' => $user_google->getName(),
'password' => 0,
'email_verified_at' => now()
]);
\auth()->login($create, true);
return redirect()->route('home');
}
} catch (\Exception $e) {
return redirect()->route('login');
}
}
}
6. Menambah Routing
Route::get('/auth/redirect', 'Auth\LoginController@redirectToProvider');
Route::get('/auth/callback', 'Auth\LoginController@handleProviderCallback');
![]() |
Tampilan login google |
Posting Komentar