Using Facebook Authentication For Login in Laravel 5
Laravel has simplified authentication processes either the traditional way or via social media like Facebook, Twitter, LinkedIn or Github by creating a Laravel Socialite Package.
Let’s see how we can utilize this package for Facebook Authentication:
1. Do a clean install of Laravel 5
2. Install Socialite
|
1 |
composer require laravel/socialite |
3. Head over to your config/app.php and add the following in the providers array:
|
1 |
Laravel\Socialite\SocialiteServiceProvider::class |
4. Still in your config/app.php file, also add this to the aliases array:
|
1 |
'Socialite' => Laravel\Socialite\Facades\Socialite::class |
We just registered a Facade for Laravel Socialite.
5. Create Facebook app.
Head over to Facebook Developers Page . Under the My apps, there is a link to create a new app.
A dialog box should appear afterwards showing you different options, Choose Website since we are building a web app. So give your app a name and click “Create new Facebook App ID”.
I named mine “Laravel Auth”.
Another dialog box should appear. Choose the Category. I chose “Education” for the purpose of this tutorial.
Go ahead and create App ID.
Click on Facebook Login when you scroll down here:
6. Add Facebook Config
Head over to your config/services.php and add this:
|
1 2 3 4 5 |
'facebook' => [ 'client_id' => env('FACEBOOK_CLIENT_ID'), 'client_secret' => env('FACEBOOK_CLIENT_SECRET'), 'redirect' => env('CALLBACK_URL'), ], |
Open your .env file and add your facebook client id, secret and callback url like so:
|
1 2 3 |
FACEBOOK_CLIENT_ID=xxxxxxxxx FACEBOOK_CLIENT_SECRET=xxxxxxx CALLBACK_URL=http://localhost:8000/auth/facebook/callback |
where xxxxxxx refers to your APP ID and APP secret. You can find those details when you click on the name of your app in the dropdown that “My apps” provides on the facebook developer dashboard page.
7. Set up Routes and Controller Methods
You will need two routes: one for redirecting the user to the OAuth provider, and another for receiving the callback from the provider after authentication.
Add these to routes.php
|
1 2 |
Route::get('auth/facebook', 'Auth\AuthController@redirectToProvider'); Route::get('auth/facebook/callback', 'Auth\AuthController@handleProviderCallback'); |
Let’s Open up our AuthController.php file in Auth folder and add this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
protected $redirectPath = '/home'; /** * Redirect the user to the Facebook authentication page. * * @return Response */ public function redirectToProvider() { return Socialite::driver('facebook')->redirect(); } /** * Obtain the user information from Facebook. * * @return Response */ public function handleProviderCallback() { try { $user = Socialite::driver('facebook')->user(); } catch (Exception $e) { return redirect('auth/facebook'); } $authUser = $this->findOrCreateUser($user); Auth::login($authUser, true); return redirect()->route('home'); } /** * Return user if exists; create and return if doesn't * * @param $facebookUser * @return User */ private function findOrCreateUser($facebookUser) { $authUser = User::where('facebook_id', $facebookUser->id)->first(); if ($authUser){ return $authUser; } return User::create([ 'name' => $facebookUser->name, 'email' => $facebookUser->email, 'facebook_id' => $facebookUser->id, 'avatar' => $facebookUser->avatar ]); } |
Note: Add the Socialite and Auth class reference at the top of this file like so:
|
1 2 |
use Auth; use Socialite; |
First, it redirects to Facebook, grabs the relevant information and then looks up the user and authenticate as that user. If the user doesn’t exist, it creates the user and authenticate.
8. Database
We need to update our users migration so that it will allow us to store facebook-specific information. Since this is a new app, I could just modify the users migration, but if you have an existing app, you’ll need to make a new migration.
9. Model
Make those fields mass assignable in your User model. name, email, facebook_id and avatar like so:
|
1 2 3 4 5 6 |
/** * The attributes that are mass assignable. * * @var array */ protected $fillable = ['name', 'email', 'facebook_id', 'avatar']; |
Now let’s get to work.
Head over to your welcome.php and edit it to have a login facebook button like so:
Don’t forget to link the file with bootstrap.
In your routes.php, add this:
|
1 2 3 |
Route::get('home', array('as' => 'home', 'uses' => function(){ return view('home'); })); |
Create home.blade.php
Copy the contents of welcome.blade.php into it and just update the body content to have this:
Now, run your migrations lest we forget like so:
|
1 |
php artisan migrate |
Are you ready to test your app?..after all the work!
Now, run php artisan serve and click on the Login with Facebook button on your homepage
Yaaay!!!..Now we are logged in from facebook..and we can access our data from Facebook.
Note: I drew heavy inspiration from Matt Stauffer’s blog post.
So you can check how to use GitHub authentication for Login in Laravel 5 here
You can decide to use the data for anything,…this tutorial aims to simply show you how to authenticate with facebook.
You can find the full source code of this tutorial here
Please, if you have any questions or observations, let me know in the comments section!
- How to build your own Youtube – Part 10 - August 1, 2016
- How to build your own Youtube – Part 9 - July 25, 2016
- How to build your own Youtube – Part 8 - July 23, 2016
- How to build your own Youtube – Part 6 - July 6, 2016
- Introducing Laravel Password v1.0 - July 3, 2016
- How to build your own Youtube – Part 5 - June 28, 2016
- How to build your own Youtube – Part 4 - June 23, 2016
- How to build your own Youtube – Part 3 - June 15, 2016
- How to build your own Youtube – Part 2 - June 8, 2016
- How to build your own Youtube – Part 1 - June 1, 2016
Pingback: facebook login laravel | downoad()