Hello friends! Today I would like to share with you a small application that in any admin page is indispensable, that is the longin function to authenticate user accounts before they access the system. But today we will not login in the usual way, create a login form so that the user can enter the user and password as usual, but I want to divide the login into an application via google account. your. Now to create more convenience for users, as well as help users not to create too many accounts and to remember each account to access and each system. Website applications have created many utilities for creating accounts such as you can login with your Google account, facebook or github..vv. This not only helps users do not need to waste more time creating a new account and then have to remember it every time you want to log into the system. And today I will work with you to make a small login application through your own google account, we will create this application based on the framework of the Laravel framework offline..Let’s go.
Steps To Perform
- Install laravel 6 application
- Database setup
- Install the support package
- How to get an account from google
- Create Route
- Create Controller & Methods
- Create view
- Run the development server
- Conclusion
1. Install laravel application 6.
To start of course we need to download the laravel to your local, here I will download the latest version. You can type or copy your command below to quickly.
1 2 | composer create-project --prefer-dist laravel/laravel blog |
- For those new to laravel, if you want to run the command on the terminal (ubuntu), CMD (window), you should install the composer first.
2. Set up the database.
Next step, after downloading laravel to your device, open the .env file and set some information.
1 2 3 4 5 6 7 | DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=here your database name here DB_USERNAME=here database username here DB_PASSWORD=here database password here |
- Note this step needs to set up the correct information with your database on phpmyadmin.
3. Install the package.
In this step we will install a package already supported by laravel so we can connect to google.
1 2 | composer require laravel/socialite |
After successfully installing the social package, we need to configure aliese and provider in config / app.php.
1 2 3 4 5 6 7 8 9 10 | 'providers' => [ // Other service providers… LaravelSocialiteSocialiteServiceProvider::class, ], 'aliases' => [ // Other aliases… 'Socialite' => LaravelSocialiteFacadesSocialite::class, ], |
4. How to get an account from google.
First of all, we need to have CLIENT ID and CLIENT SECRET to add social google login button in laravel based project, go to https://console.developers.google.com/ and create a new application. If you are not familiar with creating then you can search google, there are many instructions, this article I am not convenient to just step here 
). After successfully creating an application in Google and receiving login information from the Google control panel, go to config / service.php and add the configuration below:
1 2 3 4 5 6 | 'google' => [ 'client_id' => 'xxxx', 'client_secret' => 'xxx', 'redirect' => 'http://127.0.0.1:8000/callback/google', ], |
Next you move to the App / User.php file and change as the code below.
1 2 3 4 | protected $fillable = [ 'name', 'email', 'password', 'provider', 'provider_id' ]; |
Continue on you go to app / database / create_users_table.php and change the code as below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | public function up() { Schema::create('users', function (Blueprint $table) { $table->increments('id'); $table->string('name'); $table->string('email')->unique()->nullable(); $table->string('provider'); $table->string('provider_id'); $table->timestamp('email_verified_at')->nullable(); $table->string('password')->nullable(); $table->rememberToken()->nullable(); $table->timestamps(); }); } |
After that you need to create an auth for login.
1 2 | php artisan make:auth |
And run the command to create the data base is executed.
1 2 | php artisan migrate |
If in the process of running the error, you go to the file app / providers / AppServiceProvider.php and add the following code line.
1 2 3 4 5 6 7 8 9 10 | ... use IlluminateSupportFacadesSchema; .... function boot() { Schema::defaultStringLength(191); } ... |
5. Create route.
You navigate to routes / web.php and create routes as shown below.
1 2 3 | Route::get('/auth/redirect/{provider}', ' <a class="__cf_email__" href="/cdn-cgi/l/email-protection" data-cfemail="e6b589858f878aa589889294898a8a8394a69483828f94838592">[email protected]</a> '); Route::get('/callback/{provider}', ' <a class="__cf_email__" href="/cdn-cgi/l/email-protection" data-cfemail="b3e0dcd0dad2dff0dcddc7c1dcdfdfd6c1f3d0d2dfdfd1d2d0d8">[email protected]</a> '); |
6. Create COntroller.
Next we create the Controller.
1 2 | php artisan make:controller SocialController |
After successfully creating, access app / controls / SocialControll.php and put the following code:
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 | <?php namespace AppHttpControllers; use IlluminateHttpRequest; use Validator,Redirect,Response,File; use Socialite; use AppUser; class SocialController extends Controller { public function redirect($provider) { return Socialite::driver($provider)->redirect(); } public function callback($provider) { $getInfo = Socialite::driver($provider)->user(); $user = $this->createUser($getInfo,$provider); auth()->login($user); return redirect()->to('/home'); } function createUser($getInfo,$provider){ $user = User::where('provider_id', $getInfo->id)->first(); if (!$user) { $user = User::create([ 'name' => $getInfo->name, 'email' => $getInfo->email, 'provider' => $provider, 'provider_id' => $getInfo->id ]); } return $user; } } |
- Socialite :: driver (‘$ provider’) -> redirect () is called, this processing task redirects the user to the Google authentication page.
- After successful authentication, it will redirect to Authorization callback URL and take user data.
- Save user information and login. Now we move to Resources / Views / Auth, and create a balde register.blade.php, we will create a login button using google.
1 2 3 4 5 6 7 | <hr> <div class="form-group row mb-0"> <div class="col-md-8 offset-md-4"> <a href="{{ url('/auth/redirect/google') }}" class="btn btn-primary"><i class="fa fa-google"></i> Google</a> </div> </div> |
Navigate to Resources / Views / Auth / login.blade.php and add the code below.
1 2 3 4 5 6 7 | <hr> <div class="form-group row mb-0"> <div class="col-md-8 offset-md-4"> <a href="{{ url('/auth/redirect/google') }}" class="btn btn-primary"><i class="fa fa-google"></i> Google</a> </div> </div> |
8. Run the server
You run the command line below to run serve.
1 2 | php artisan serve |
If the port you configured is not the default port 80, then we will run up the command as shown below.
1 2 3 4 | http://127.0.0.1:8000/login hoặc câu lệnh http://localhost/blog/public/login |
9. Conclusion.
That’s it, I have just shared with you a small application for logging in with your google account in laravel, wish you success. In the following post, I will share with you the login with your github account.