laravel 7/6 menggunakan socialite. laravel 7/6 socialite menyediakan api untuk login dengan akun gmail. kita dapat dengan mudah masuk menggunakan akun google di project laravel.
Seperti yang kita ketahui, media sosial menjadi semakin populer di dunia. Setiap orang memiliki akun sosial seperti gmail, facebook dll. Saya rasa sebagian besar juga memiliki akun gmail. Jadi jika di aplikasi Anda telah login dengan sosial maka itu menjadi luar biasa. Anda mendapatkan lebih banyak orang terhubung dengan situs web Anda karena kebanyakan orang tidak ingin mengisi formulir pendaftaran atau masuk. Jika ada login dengan sosial daripada itu menjadi luar biasa.
Jadi jika Anda ingin juga menerapkan login dengan akun google gmail maka saya akan membantu Anda petunjuk langkah demi langkah. mari ikuti tutorial dan terapkan.
Pratinjau:
Langkah 1: Instal Laravel
Pada langkah ini, jika Anda belum menyiapkan aplikasi laravel maka kita harus mendapatkan aplikasi laravel yang baru. Jadi jalankan perintah di bawah ini dan dapatkan aplikasi laravel baru yang bersih.
composer create-project --prefer-dist laravel/laravel googleLoginLangkah 2: Pasang Socialite
Pada langkah pertama kita akan menginstal Paket Socialite yang menyediakan api untuk terhubung dengan akun google. Jadi, pertama buka terminal Anda dan jalankan perintah di bawah ini:
composer require laravel/socialiteSetelah menginstal paket di atas kita harus menambahkan provider dan alias di file config, Sekarang buka file config/app.php dan tambahkan service provider dan alias.
'providers' => [
....
Laravel\Socialite\SocialiteServiceProvider::class,
],
'aliases' => [
....
'Socialite' => Laravel\Socialite\Facades\Socialite::class,
],Langkah 3: Buat Google App
Pada langkah ini kita membutuhkan google client id dan secret sehingga kita bisa mendapatkan informasi dari pengguna lain. jadi jika Anda tidak memiliki akun google app maka Anda dapat membuatnya dari sini: Google Developers Console . Anda dapat menemukan layar di bawah ini:
Sekarang Anda harus mengklik Credentials dan memilih opsi pertama oAuth dan klik tombol Create new Client ID. sekarang Anda dapat melihat slide berikut:
setelah membuat akun Anda dapat menyalin id klien dan secret.
Now you have to set app id, secret and call back url in config file jadi buka config/services.php and set id and secret this way:
config/services.php
return [
....
'google' => [
'client_id' => 'app id',
'client_secret' => 'add secret',
'redirect' => 'http://localhost:8000/auth/google/callback',
],
]Langkah 4: Buat Auth
Pada langkah ini, kita perlu menginstal laravel ui dan menghasilkan auth di aplikasi laravel jadi, mari kita jalankan perintah berikut:
Instal Laravel UI:
composer require laravel/uiBuat Auth:
php artisan ui bootstrap --authNPM Install:
npm installRun NPM:
npm run devLangkah 4: Tambahkan Kolom Database
Pada langkah ini pertama kita harus membuat migrasi untuk menambahkan google_id di tabel users Anda. Jadi mari kita jalankan perintah di bawah ini:
php artisan make:migration add_google_id_columnMigration
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
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()
{
//
}
}Update Model seperti ini:
app/User.php
<?php
namespace App;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
class User extends Authenticatable
{
use Notifiable;
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'name', 'email', 'password', 'google_id'
];
/**
* The attributes that should be hidden for arrays.
*
* @var array
*/
protected $hidden = [
'password', 'remember_token',
];
/**
* The attributes that should be cast to native types.
*
* @var array
*/
protected $casts = [
'email_verified_at' => 'datetime',
];
}Langkah 5: Buat Route
Setelah menambahkan kolom google_id terlebih dahulu kita harus menambahkan route baru untuk login google. jadi mari tambahkan route berikut di file routes.php.
app/Http/routes.php
Route::get('/', function () {
return view('welcome');
});
Auth::routes();
Route::get('/home', 'HomeController@index')->name('home');
Route::get('auth/google', 'Auth\GoogleController@redirectToGoogle');
Route::get('auth/google/callback', 'Auth\GoogleController@handleGoogleCallback');Langkah 6: Buat Controller
Setelah menambahkan rute, kita perlu menambahkan metode auth google yang akan menangani url panggilan balik google dan lain-lain, pertama-tama letakkan kode di bawah ini pada file GoogleController.php Anda.
app/Http/Controllers/Auth/GoogleController.php
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use Socialite;
use Auth;
use Exception;
use App\User;
class GoogleController extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function redirectToGoogle()
{
return Socialite::driver('google')->redirect();
}
/**
* Create a new controller instance.
*
* @return void
*/
public function handleGoogleCallback()
{
try {
$user = Socialite::driver('google')->user();
$finduser = User::where('google_id', $user->id)->first();
if($finduser){
Auth::login($finduser);
return redirect('/home');
}else{
$newUser = User::create([
'name' => $user->name,
'email' => $user->email,
'google_id'=> $user->id,
'password' => encrypt('123456dummy')
]);
Auth::login($newUser);
return redirect('/home');
}
} catch (Exception $e) {
dd($e->getMessage());
}
}
}Langkah 7: Perbarui File Blade
Ok, sekarang akhirnya kita perlu menambahkan tampilan blade jadi pertama buat file baru file login.blade.php dan masukkan kode di bawah ini:
resources/views/auth/login.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Laravel 6 - Login with Google Account Example - Medikre.com</div>
<div class="card-body">
<form method="POST" action="{{ route('login') }}">
@csrf
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<div class="col-md-6 offset-md-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
<label class="form-check-label" for="remember">
{{ __('Remember Me') }}
</label>
</div>
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-8 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Login') }}
</button>
@if (Route::has('password.request'))
<a class="btn btn-link" href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
@endif
<a href="{{ url('auth/google') }}" style="margin-top: 20px;" class="btn btn-lg btn-success btn-block">
<strong>Login With Google</strong>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsectionOk, sekarang Anda siap untuk menggunakan buka browser Anda dan periksa di sini: URL + '/ login'.
Anda dapat mengunduh kode dari git: Unduh dari Github
Saya harap ini dapat membantu Anda...
login with google account in laravel laravel
andriajah