Laravel 5 Tutorial : Login with Google, Twitter & Facebook in Laravel 5.3 Part 3

Laravel 5.3 tutorial : using google +, Twitter, Facebook media social for login to laravel 5 project, working with socialite packages in laravel 5.3

Laravel 5 tutorial for beginners - Part3 how to working with socialite package in Laravel 5.3. This lessons is continued previews lessons about how to create login page in laravel using media social twitter login & facebook login.

Before create this project, we recomended you to read previews lesson about login using twitter and facebook, please read Login with Twitter & Facebook Socialite in Laravel 5.3.

Create Google, Twitter & Facebook Login in Laravel 5.3

First, we must create Apps in goolge account, Create your app ini google console, go to this link Google Console.

Create new project in Google Console

Login with Google, Twitter & Facebook in Laravel 5.3

Next, we will configure our app, please Select Credentials submenu and then chose OAuth consent screen tab.
Login with Google, Twitter & Facebook in Laravel 5.3
Next, we will create New credentials and OAuth client ID in Credentials tabs.
Login with Google, Twitter & Facebook in Laravel 5.3

Next we will define our client as a client.

Login with Google, Twitter & Facebook in Laravel 5.3

We will authorize our development url which is http://localhost:8080 and we will use like before callback route with google parameter: http://localhost:8080/callback/google.

At the last step, we will enable Google + Api to get work in our login using google account later.
on the Api Google, click on Social Api (Google + Api)

Login with Google, Twitter & Facebook in Laravel 5.3

Socialite Configuration

On your Laravel project, we need to add Google services, that stored on config/services.php

'google' => [
    'client_id' => '288493963032-qgusa1b3jtg5lv7rcg0lck55krirtcv9.apps.googleusercontent.com', // configure with your app id
    'client_secret' => 'ySrwsKOhvvWGRDpH8d5EvxEb', // your app secret
    'redirect' => 'http://localhost:8080/callback/google', // leave blank for now
    ],

Next, add google login in our auth login, that stored on our views folder.

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Login</div>
                <div class="panel-body">
                    <form class="form-horizontal" role="form" method="POST" action="{{ url('/login') }}">
                        {{ csrf_field() }}

                        <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                            <label for="email" class="col-md-4 control-label">E-Mail Address</label>

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required autofocus>

                                @if ($errors->has('email'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                            <label for="password" class="col-md-4 control-label">Password</label>

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control" name="password" required>

                                @if ($errors->has('password'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('password') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="remember"> Remember Me
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-8 col-md-offset-4">
                                <button type="submit" class="btn btn-primary">
                                    Login
                                </button>

                                <a class="btn btn-link" href="{{ url('/password/reset') }}">
                                    Forgot Your Password?
                                </a>
                            </div>
                            <div class="col-md-8 col-md-offset-4">
                              <a class="btn btn-link" href="redirect/facebook">
                                  Facebook Login
                              </a>
                              <a class="btn btn-link" href="redirect/twitter">
                                  Twitter Login
                              </a>
                              <a class="btn btn-link" href="redirect/google">
                                  google Login
                              </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Note :
if you got some error like "Error: redirect_uri_mismatch" just wait couple of minutes and it should work normally.
Login with Google, Twitter & Facebook in Laravel 5.3 Part 3

Video tutorial

Login with Google videos is realised as impossible..

Create Socialite Facebook Login in laravel 5.3



Login with Twitter & Facebook Socialite in Laravel 5.3


See you next lessons .........

COMMENTS

Next Recomended


Feel free to code it up and send us a pull request.

Hi everyone, let's me know how much this lesson can help your work. Please Subscribe and Follow Our Social Media 'kodeajaib[dot]com' to get Latest tutorials and will be send to your email everyday for free!, Just hit a comment if you have confused. Nice to meet you and Happy coding :) all ^^



Follow by E-Mail


Name

ADO.NET,3,Ajax,6,Android,9,AngularJS,4,ASP.NET,4,Blogger Tutorials,7,Bootstrap,7,C++,1,Codeigniter,2,Cplusplus,6,Crystal Report,6,CSharp,25,Ebook Java,2,FlyExam,1,FSharp,3,Game Development,2,Java,35,JDBC,2,Laravel,84,Lumen,2,MariaDB,2,Ms Access,3,MySQL,31,ODBC,6,OleDB,1,PHP,14,PHP Framework,5,PHP MYSQLI,9,PHP OOP,5,Python,8,Python 3,4,SQL Server,4,SQLite,4,Uncategorized,5,Vb 6,2,Vb.Net,89,Video,48,Vue Js,4,WPF,2,Yii,3,
ltr
item
KODE AJAIB: Laravel 5 Tutorial : Login with Google, Twitter & Facebook in Laravel 5.3 Part 3
Laravel 5 Tutorial : Login with Google, Twitter & Facebook in Laravel 5.3 Part 3
Laravel 5.3 tutorial : using google +, Twitter, Facebook media social for login to laravel 5 project, working with socialite packages in laravel 5.3
https://4.bp.blogspot.com/-d9Y_lYUnF_M/V_PN9qu7WoI/AAAAAAAACow/I-hgKLAMkFQGaAw_cT1zt_utslKKhie1QCLcB/s320/sociallite-google-login-laravel.png
https://4.bp.blogspot.com/-d9Y_lYUnF_M/V_PN9qu7WoI/AAAAAAAACow/I-hgKLAMkFQGaAw_cT1zt_utslKKhie1QCLcB/s72-c/sociallite-google-login-laravel.png
KODE AJAIB
https://www.kodeajaib.com/2016/10/laravel-5-tutorial-login-with-google-in-laravel-53.html
https://www.kodeajaib.com/
https://www.kodeajaib.com/
https://www.kodeajaib.com/2016/10/laravel-5-tutorial-login-with-google-in-laravel-53.html
true
3214704946184383982
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy