Login dengan Google pada Laravel

Selamat datang kembali di website asepit yang selalu memberikan informasi mengenai dunia Teknologi khususnya pada bidang Komputer, Pemograman, dan juga Jaringan. Bagaimana kabar kalian semua, mudah - mudahan dalam keadaan sehat wal afiat dan selalu dilancarkan rezekinya. Pada pembahasan kali ini mengenai cara menambahkan fitur login pada Laravel lewat akun google, yang dimana cara ini untuk mempermudah pengguna dalam Login pada sebuah aplikasi. Langkah yang diterapkan dalam login menggunakan google ini yaitu si pengguna agar tidak lagi mengisi form register hanya cukup login menggunakan akun google yang sudah terdaftar maka akan langsung redirect login ke sebuah aplikasi tersebut. Mengenai langkah yang harus dilakukan simaklah dibawah ini

1. Instal project laravel terlebih dahulu / bisa juga langsung di terapkan di project yang sedang dikembangkan

composer create-project laravel/laravel=5.8 google-login
php artisan make:auth

2. Penginstalan Package Socialite dengan menggunakan perintah berikut

composer require laravel/socialite "^3.2.0"

Kemudian tambahkan konfigurasi berikut pada config / app.php 

'providers' => [
....
Laravel\Socialite\SocialiteServiceProvider::class,
],

'aliases' => [
....
'Socialite' => Laravel\Socialite\Facades\Socialite::class,
],

3. Untuk mendapatkan Id dan Secret Key dari Google kita bisa mengakses link Google Developer Console berikut ini

   A. Setelah berhasil masuk dengan akun gmail yang akan dipakai sebagai admin berikut tampilan awalnya

1

   B. Lalu kita Create Project serta masukkan nama Project tersebut (bisa bebas)

2

   C. Lalu kita akan di arahkan ke jendela awal dengan project yang telah kita tambahkan, klik pada APIs & Services -> Credentials -> Klik Create Credencials -> pilih OAuth client ID dan langsung di arahkan ke tampilan Configure Consent Screen -> Pilih External untuk tahap pengembangan

C

   D. Dan isi App name, User support email, Logo (jika ada) dan yang lainnya lanjut Save and Continue

   E. Kemudian pergi lagi ke Credentials -> Create Credentials -> OAuth client ID -> Web application

E

   F. Isi Nama Aplikasi, Alamat URl dan juga URl redirect seperti dibawah ini

9

   G. Lalu akan muncul ID Client dan Secret Key

10

4. Setelah selesai mendapatkan ID dan Secret Key, masukkan dan koneksikan database pada file .env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Di isi dengan nama Database
DB_USERNAME=Di isi dengan nama pengguna Database
DB_PASSWORD=Di isi dengan kata sandi Database
...
GOOGLE_ID= 'id client'
GOOGLE_SECRET= 'secret key'
GOOGLE_CALLBACK= 'http://localhost:8000/google/callback'

5. Atur pada Auth/LoginController.php

....
use Laravel\Socialite\Facades\Socialite;
use Illuminate\Support\Facades\Auth;
use App\User;

....
      //
      public function redirectGoogle()
      {
          return Socialite::driver('google')->redirect();
      }

      //
      public function handleGoogle()
      {
          $user = Socialite::driver('google')->stateless()->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' => bcrypt(str_random(25)),
              ]);

              Auth::login($newUser);
              return redirect('/home');
          }
      }
...
...

6. Dan tambahkan juga pada route nya

Route::get('google', 'Auth\LoginController@redirectGoogle')->name('google');
Route::get('google/callback', 'Auth\LoginController@handleGoogle');

7. Tambahkan juga pada Reosurces/Views/Auth/login.blade.php

<div class="form-group row mb-0">
    <div class="col-md-8 offset-md-4">
         <a href="{{ route('google') }}" class="btn btn-primary"><i class="fa fa-google"></i> Google</a>
    </div>
</div>

8. Tambahkan juga pada skema database app/database/create_users_table.php

public function up()
{
Schema::create('users', function (Blueprint$table) {
$table->increments('id');
$table->string('name');
$table->string('email')->unique();
$table->string('google_id')->nullable();
$table->timestamp('email_verified_at')->nullable();
$table->string('password');
$table->rememberToken();
$table->timestamps();

});
}

Lanjut migrate dengan perintah ini

php artisan migrate:refresh

9. Tambahkan juga pada app/providers/AppServiceProvider.php

....
use Illuminate\Support\Facades\Schema;
....
function boot()
{
Schema::defaultStringLength(191);
}
....

10. Selanjutnya tambahkan juga pada app / User.php

protected $fillable = [
   'name', 'email', 'password', 'google_id'
];

11. Tambahkan pada config / service.php dengan syntak seperti ini

'google' => [
'client_id' => 'env('GOOGLE_ID')',
'client_secret' => 'env('GOOGLE_SECRET')',
'redirect' => 'env('GOOGLE_CALLBACK')',
],

12. Dan kemudian coba jalankan serta tes login google

php artisan serve

 

 

Mungkin hanya itu untuk pembahasan kali ini mudah - mudahan dapat bermanfaat bagi kita semua, dan jika terdapat kesalahan serta kekurangan dalam penyampaian saya mohon di maklumi. Dan jangan lupa kunjungi juga platform lainnya dibawah ini, saya ucapkan sekian dan Terima Kasih...

Website klik disini
Youtube klik disini
Fans Page Klik disini

Related Articles

Comments