Laravel Social Login using Socialite
Hello everyone, welcome back ! Here am going to tell how to implement social logins in your laravel applications using Socialite package. I will cover most popular social sites like Facebook, Google +, Twitter and Github. Lets get started.
First you need to register at those social networks, get some keys like client_id, client_secret.which are used to connect your laravel app with those networks.
Installing Socialite :
Socialite is a laravel package where authentication with different social network providers is a breeze.
Install it using composer by running the following line in root of you project,
composer require laravel/socialite
After installing Socialite package, you need to register its service provider. In configurations file config/app.php
add the following lines,
'providers' => [
// Other service providers...Laravel\Socialite\SocialiteServiceProvider::class,
],
You also need to add its facade in aliases array,
'Socialite' => Laravel\Socialite\Facades\Socialite::class,
Now Socialite is all set up and you are ready to implement social login in your laravel apps. I will go through each of them mentioned above.
Facebook Login using Socialite :
- Register yourself at developers.facebook.com.
- In the top right corner, if you never developed a facebook app before click 'Create App' button or else in select 'Create App' option in the drop down below your previously created apps.
- Fill your app details like app name, contact email and category,
- After creating a sample app, In you setting section, you need to fill details like 'App Domain/s' and 'Website URL' where you app is used. I just set them to local host for now.
- Now we use those 'App Id' and 'App Secret' as CLIENT_ID and CLIENT_SECRET in you app configuration file. We store those details in
.env
file and reference them inconfig/services.php
in you .env
file,
FB_CLIENT_ID = Your FB App Id
FB_CLIENT_SECRET = Your FB App Secret
FB_REDIRECT = 'http://localhost:8000/callback/facebook'
and in your config/services.php
file
'facebook' => [
'client_id' => env ( 'FB_CLIENT_ID' ),
'client_secret' => env ( 'FB_CLIENT_SECRET' ),
'redirect' => env ( 'FB_REDIRECT' )
],
- Now i will just add simple link which calls facebook login page,
<a href="redirect/facebook">Login in with Facebook</a>
Note : The following routes and controller functions are similar for all the calls, we only set the client_id
and client_secret
in .env
and config/services.php
. For remaining services google +, twitter, github the routes and function are same.
Now it will call the route,
Route::get ( '/redirect/{service}', 'SocialAuthController@redirect' );
the redirect function,
public function redirect($service) {
return Socialite::driver ( $service )->redirect ();
}
After successful login, it will redirect to the url we have set as callback url, I have set it as http://localhost:8000/callback/facebook
the route,
Route::get ( '/callback/{service}', 'SocialAuthController@callback' );
callback function,
public function callback($service) {
$user = Socialite::with ( $service )->user ();
return view ( 'home' )->withDetails ( $user )->withService ( $service );
}
Here we get some details like username, email and gender and display them.
@if($service == 'facebook')
<div class="title m-b-md">
Welcome {{ $details->user['name']}} ! <br> Your email is : {{
$details->user['email'] }} <br> You are {{ $details->user['gender'] }}.
</div>
@endif
That's it, folks. We have successfully logged into facebook using Socialite.
Google + Login using Socialite :
- First, you need to create a new project at console.developers.google.com
- After creating your app successfully, Click credentials in left side navigation and select 'OAuth Consent Screen' , fill out the details there.
- Now you need create credentials for your app. Click credentials in left side navigation and select 'Credentials'. In the dropdown select 'OAuth client ID'
- In the OAuth client ID screen, select the type of application, give origin and callback URLs,
- You also need to enable Google + Api too. Yo will see a 'ENABLE API' button, click it.
- Select Google + in Social API's.
- Now you will get the Client ID and Client secret in the credentials page.
Now add these credentials in your app's .env
and config\services.php
.env
file,
G+_CLIENT_ID = Your G+ Client ID
G+_CLIENT_SECRET = Your G+ Client secret
G+_REDIRECT = 'http://localhost:8000/callback/google'
config\services.php
'google' => [
'client_id' => env ( 'G+_CLIENT_ID' ),
'client_secret' => env ( 'G+_CLIENT_SECRET' ),
'redirect' => env ( 'G+_REDIRECT' )
],
Now I will just add simple link which calls google login page,
<a href="redirect/google">Login in with Google</a>
The routes and controller functions are already covered here.
Here we get some details like username, email and gender and display them.
@if($service == 'google')
<div class="title m-b-md">
Welcome {{ $details->name}} ! <br>
Your email is : {{ $details->email }} <br>
Your are {{ $details->user['gender'] }}.
</div>
@endif
Kudos ! Successfully implemented Google + login in your laravel app.
Twitter Login using Socialite :
- Register a new app at apps.twitter.com
- After creating your app, click 'Keys and Access Tokens' tab at the top to get Client ID(App ID) and Client Secret(App Secret).
- Now I will just add simple link which calls twitter login page,
<a href="redirect/twitter">Login in with Twitter</a>
The routes and controller functions are already covered here.
Here we will get some details like username, your tweets, your followers count and count of people whom you follow.
@if($service == 'twitter')
<div class="title m-b-md">
Welcome {{ $details->name}} ! <br>
Your username is : {{ $details->nickname }}<br>
Total Tweets : {{ $details->user['statuses_count']}}<br>
Followers : {{ $details->user['followers_count']}}<br>
Following : {{ $details->user['friends_count']}}
</div>
@endif
Github Login using Socialite :
- Login to you github account and go to settings.
- Click 'OAuth applications' in 'Developer Settings' menu at left side.
- Register a new application.
- You will get your Client ID and Client secret, place them in your apps's
.env
and reference themconfig/services.php
.
.env
GITHUB_CLIENT_ID = Your Github Client ID
GITHUB_CLIENT_SECRET = Your Github Client secret
GITHUB_REDIRECT = 'http://localhost:8000/callback/github'
config\services.php
'github' => [
'client_id' => env ( 'GITHUB_CLIENT_ID' ),
'client_secret' => env ( 'GITHUB_CLIENT_SECRET' ),
'redirect' => env ( 'GITHUB_REDIRECT' )
]
- Now I will just add simple link which calls github login page,
<a href="redirect/github">Login in with Github</a>
- The routes and controller functions are already covered here.
- We get some details like name, email, total repositories and followers count.
Stay tuned for more awesome posts or check some of the previous posts.