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
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.