That is the second article within the sequence on studying Laravel social login. Earlier than, we noticed allow Google OAuth login in a Laravel login type.
This tutorial provides pointers on integrating Fb login with Laravel Socialite.
Other than the Socialite bundle, this text additional wants Laravel/ui to get an authentication module. Varied Laravel packages can convey the authentication scaffolding into the appliance. Examples are Jetstream, Breeze, and extra.
If you’re new to Laravel, see create a undertaking and arrange authentication on this linked Google social login article.
Steps to create Fb OAuth credentials
As soon as the Laravel Fb login undertaking is created, then the subsequent step is to get and configure the Fb OAuth credentials. The Fb OAuth API request wants the App ID and App Secret for authorizing the consumer request.
- Log in to the FaceBook developer portal.
- Go to My Apps web page and click on the Create App button
- Select the Usecases menu and choose choices to get permission to entry consumer information.
- Ship for app evaluate to publish the app. That is necessary earlier than going to manufacturing.
- Go to App Settings -> Fundamental and get the App ID and App Secret
- Select Fb Login and arrange a website and Legitimate OAuth Redirect URI.
Add HTTPS URL
Fb wants an HTTPS URL to register a Legitimate OAuth Redirect URI as a callback.
There are a lot of methods to get a HTTPS URL on your native dev surroundings. Instance: The tunneling device like ngrok provides HTTPS URL mapping for the native dev server URL.
Add App Roles
Earlier than going to manufacturing, the Fb authentication must be examined. In growth mode, the API will permit solely the customers to be a part of the app.
Go to App Roles and add Builders or Testers to permit your crew to check Laravel Fb login.
Configure Fb App ID in Laravel App
From this part, it includes modifications to the Laravel app config, mannequin, view, and controllers.
Step one is to configure the Database and the Fb configurations into the .env file. Since we now have seen the Database configuration and different fundamentals within the newcomers’ tutorial, the under code reveals solely the Fb app config.
.env
FACEBOOK_APP_ID="APP ID HERE"
FACEBOOK_APP_SECRET="APP SECRET HERE"
Add Laravel .env constants for having the Fb OAuth login credentials. This fixed must be added to the companies.php
config/companies.php
<?php
return [
...
...
'facebook' => [
'client_id' => env('FACEBOOK_APP_ID'),
'client_secret' => env('FACEBOOK_APP_SECRET'),
'redirect' => env('http://127.0.0.1:8000/facebook/login/callback'),
],
];
?>
Add ‘Check in with Fb’ to the login template
As soon as putting in Laravel authentication bundle, the UI recordsdata might be delivered to the appliance.
The under code is so as to add the ‘Check in with Fb’ choice to the Laravel login template.
It’s linked to a redirect for sending OAuth login requests to the FaceBook API.
AppHttpControllerslogin.blade.php
<div class="row mb-0">
<div class="col-md-12 text-center">
<a href="https://phppot.com/laravel/laravel-facebook-login/{{ route("facebook_login_redirect') }}">
<button sort="button" class="btn px-4 py-2 w-50 btn-fb">
<img src="photos/fb.svg" width="24" class="mx-1 fb-logo-icon" /> Fb
</button>
</a>
</div>
</div>
Load CSS and JS
Within the mum or dad structure template, it imports the CSS and JS belongings utilizing the vite directive.
sources/views/layouts/app.blade.php
<!-- Scripts -->
@vite(['resources/sass/app.scss', 'resources/js/app.js', 'resources/css/app.css'])
To import belongings through this directive, we now have to handle the CSS and JS useful resource in an array with the vite.config.js
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/sass/app.scss',
'resources/js/app.js',
'resources/css/app.css'
],
refresh: true,
}),
]
}];
Laravel Fb login net routes
There are two routes to deal with Fb login. One for API name and the opposite for seize callback from the API. Now we have already seen such a pair of URLs when studying Laravel Google OAuth login.
routesweb.php
Route::get('/fb/login/redirect', [AppHttpControllersFacebookAuthLoginController::class, 'handleFacebookLogin'])->title('facebook_login_redirect');
Route::get('/fb/login/callback', [AppHttpControllersFacebookAuthLoginController::class, 'handleFacebookAuthAPICallback'])->title('facebook_login_callback');
These guidelines map the controller deal with to course of the OAuth login actions.
Create a controller to deal with Fb login
Create a controller class by working php artisan make:controller FacebookAuthLoginController. This class ought to have the login handlers to construct and seize the request and response, respectively.
The under code reveals these features to learn to ship requests to the API through Laravel Socialite.
appHttpControllersFacebookAuthLoginController.php
<?php
namespace AppHttpControllers;
use AppModelsUser;
use LaravelSocialiteFacadesSocialite;
use IlluminateSupportFacadesAuth;
class FacebookAuthLoginController extends Controller
{
public perform handleFacebookLogin()
{
return Socialite::driver('fb')->redirect();
}
public perform handleFacebookAuthAPICallback()
{
$facebookUser = Socialite::driver('fb')->stateless()->consumer();
$consumer = Person::the place('provider_id', $facebookUser->id)->first();
$facebookAccountEmail = $facebookUser->e mail ?: $facebookUser->id . '@fb.native';
if (!$consumer) {
$consumer = Person::create(['name' => $facebookUser->name, 'email' => $facebookAccountEmail, 'password' => Hash::make(rand(100000, 999999))]);
}
Auth::login($consumer);
return redirect()->route("house");
}
}
Add fillables[] to retailer OAuth supplier
The consumer’s database desk could have solely primary fields like e mail, and password within the customers desk. Now we have so as to add extra fields to retailer the OAuth login info like a novel id from Fb API.
This ID is returned by the API with a callback to uniquely establish the Fb OAuth consumer logged in.
I’ve added two columns supplier and provider_id. The supplier column could have ‘Fb’ and the provider_id is a novel id returned by the API.
appModelsUsers.php
protected $fillable = [
'name',
'email',
'password',
'provider',
'provider_id',
];
