Hai Dev,

Di sini, saya akan menunjukkan cara kerja laravel 8 login dengan facebook. Posting ini akan memberi Anda contoh sederhana dari laravel 8 login dengan akun facebook. saya menjelaskan secara sederhana tentang login laravel 8 jetstream dengan facebook. Tutorial ini akan memberi Anda contoh sederhana login dengan facebook di laravel 8.

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 facebook. 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 juga ingin menerapkan login dengan akun facebook maka saya akan membantu Anda petunjuk langkah demi langkah. mari ikuti tutorial dan terapkan.

Pratinjau:

Langkah 1: Instal Laravel 8

Pada langkah ini, jika Anda belum menyiapkan aplikasi laravel 8 maka kita harus mendapatkan aplikasi laravel 8 yang baru. Jadi jalankan perintah di bawah ini dan dapatkan aplikasi laravel 8 yang segar dan bersih.

composer create-project --prefer-dist laravel/laravel facebookLogin

Langkah 2: Instal JetStream

Sekarang, pada langkah ini, kita perlu menggunakan perintah komposer untuk menginstal jetstream, jadi jalankan perintah di bawah dan instal library di bawah.

composer require laravel/jetstream

sekarang, kita perlu membuat otentikasi menggunakan perintah di bawah ini. Anda dapat membuat login dasar, register, dan verifikasi email. Jika Anda ingin membuat manajemen tim maka Anda harus melewati parameter penambahan. Anda dapat melihat perintah di bawah ini:

php artisan jetstream:install livewire

Sekarang, mari paket node js:

npm install

ayo jalankan paket:

npm run dev

sekarang, kita perlu menjalankan perintah migrasi untuk membuat tabel database:

php artisan migrate

Langkah 3: Instal Socialite

Pada langkah pertama kita akan menginstal Paket Sosialita yang menyediakan api untuk terhubung dengan akun facebook. Jadi, pertama buka terminal Anda dan jalankan perintah di bawah ini:

composer require laravel/socialite

Langkah 4: Buat Aplikasi Facebook

Anda harus membuka https://developers.facebook.com dan membuat aplikasi untuk client id dan secret login facebook. Setelah membuat akun Anda dapat menyalin client id dan secret.

Sekarang Anda harus mengatur id aplikasi, secret dan memanggil kembali url di file konfigurasi jadi buka config/services.php dan setel id dan rahasia dengan cara ini:

config/services.php

return [

    ....

    'facebook' => [

        'client_id' => 'app id',

        'client_secret' => 'add secret',

        'redirect' => 'http://localhost:8000/auth/facebook/callback',

    ],

]

Langkah 4: Tambahkan Kolom Database

Pada langkah ini pertama kita harus membuat migrasi untuk menambahkan facebook_id di tabel pengguna Anda. Jadi mari kita jalankan perintah di bawah ini:

php artisan make:migration add_facebook_id_column

Migration

<?php
  
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
   
class AddFacebookIdColumn extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('users', function ($table) {
            $table->string('facebook_id')->nullable();
        });
    }
   
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        //
    }
}

Mode pembaruan seperti ini:

app/Models/User.php

<?php
  
namespace App\Models;
  
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 array
     */
    protected $fillable = [
        'name',
        'email',
        'password',
        'facebook_id'
    ];
  
    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password',
        'remember_token',
        'two_factor_recovery_codes',
        'two_factor_secret',
    ];
  
    /**
     * The attributes that should be cast to native types.
     *
     * @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',
    ];
}

Langkah 5: Buat Route

Setelah menambahkan kolom facebook_id terlebih dahulu kita harus menambahkan route baru untuk login facebook. jadi mari tambahkan route berikut di file routes.php.

app/Http/routes.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\FacebookController;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
  
Route::get('auth/facebook', [FacebookController::class, 'redirectToFacebook']);
Route::get('auth/facebook/callback', [FacebookController::class, 'handleFacebookCallback']);

Langkah 6: Buat Controller

Setelah menambahkan rute, kita perlu menambahkan metode auth facebook yang akan menangani url panggilan balik facebook dan lain-lain, pertama-tama letakkan kode di bawah ini pada file FacebookController.php Anda.

app/Http/Controllers/FacebookController.php

<?php
    
namespace App\Http\Controllers;
    
use Illuminate\Http\Request;
use Laravel\Socialite\Facades\Socialite;
use Exception;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
    
class FacebookController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function redirectToFacebook()
    {
        return Socialite::driver('facebook')->redirect();
    }
          
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function handleFacebookCallback()
    {
        try {
        
            $user = Socialite::driver('facebook')->user();
         
            $finduser = User::where('facebook_id', $user->id)->first();
        
            if($finduser){
         
                Auth::login($finduser);
        
                return redirect()->intended('dashboard');
         
            }else{
                $newUser = User::create([
                    'name' => $user->name,
                    'email' => $user->email,
                    'facebook_id'=> $user->id,
                    'password' => encrypt('123456dummy')
                ]);
        
                Auth::login($newUser);
        
                return redirect()->intended('dashboard');
            }
        
        } 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

<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">
                @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
  
                <x-jet-button class="ml-4">
                    {{ __('Login') }}
                </x-jet-button>
            </div>
            <div class="flex items-center justify-end mt-4">
                <a class="ml-1 btn btn-primary" href="{{ url('auth/facebook') }}" style="margin-top: 0px !important;background: blue;color: #ffffff;padding: 5px;border-radius:7px;" id="btn-fblogin">
                    <i class="fa fa-facebook-square" aria-hidden="true"></i> Login with Facebook
                </a>
            </div>
        </form>
    </x-jet-authentication-card>
</x-guest-layout>

Ok, sekarang Anda siap untuk menggunakan buka browser Anda dan periksa di sini: URL + '/ login'.

Saya harap ini dapat membantu Anda ...