نحوه لاگین کردن در سایت با اکانت گوگل در لاراول

در این پست از تجاری اپ ما قصد داریم نحوه لاگین کردن در سایت با اکانت گوگل در لاراول را به شما آموزش دهیم.ما برای این کار از پکیج Socialite استفاده می کنیم.در ادامه با ما همراه باشید و گام های زیر را دنبال کنید:

1. نصب لاراول و پیکربندی اولیه
2. ایجاد احراز هویت در لاراول
3. نصب و پیکربندی پکیج Socialite
4. ایجاد یک کنترلر
5. ایجاد Route
6. ایجاد Google Client ID
7. ویرایش صفحه Login
8. تست پروژه لاگین کردن با اکانت گوگل

نصب لاراول و پیکربندی اولیه

برای هر پروژه لاراول ما نیاز داریم که laravel را نصب کنیم. به همین دلیل ما یک مقاله در رابطه با چگونگی نصب و پیکربندی اولیه laravel آماده کرده ایم که می توانید از اینجا ان را مشاهده نمایید : آموزش نصب لاراول به همراه تنظیمات اولیه

پس از نصب لاراول و پیکربندی اولیه ، به پوشه database/migrations بروید و فایل create_users_table را باز کنید و یک فیلد با نام ‘google_id’ را به فایل اضافه کنید:

public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->string('email')->unique();
            $table->string('google_id');
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }

ایجاد احراز هویت در لاراول

لاراول دارای احراز هویت (authentication) می باشد ، کافیست برای ایجاد آن دستور زیر را اجرا کنید:

php artisan make:auth

سپس دستور زیر را به منظور migrate کردن جداول اجرا کنید:

php artisan migrate

اکنون پروژه خود را اجرا کنید و صفحه ثبت نام و لاگین را مشاهده کنید:

آدرس مربوط به لاگین: http://localhost:8000/login

نصب و پیکربندی پکیج Socialite

دستور زیر را برای نصب پکیج laravel/socialite اجرا کنید:

composer require laravel/socialite

بعد از اجرای دستور بالا و نصب پکیج socialite ما باید provider  و  aliase مربوط به پکیج socialite را به فایل app.php اضافه کنیم.برای این کار به مسیر config >> app.php بروید و provider  را پیدا کنید و خط زیر را به آن اضافه کنید:

'providers' => [
    // ...
    Laravel\Socialite\SocialiteServiceProvider::class,
]

سپس aliases را پیدا کنید و خط زیر را به آن اضافه کنید:

'aliases' => [
    // ...
    'Socialite' => Laravel\Socialite\Facades\Socialite::class,
]

ایجاد یک کنترلر

در این مرحله ما یک کنترلر با نام ” GoogleAuthController ” ایجاد می کنیم:

php artisan make:controller GoogleAuthController

فایل GoogleAuthController.php را از مسیر app\Http\Controllers پیدا کنید و کدهای زیر را در ان بنویسید:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;
use Socialite;
use Auth;
use Exception;


class GoogleAuthController extends Controller
{
    public function redirectToProvider()
    {
        return Socialite::driver('google')->redirect();
    }

    public function handleProviderCallback()
    {
        try {
            $googleUser = Socialite::driver('google')->user();
            $existUser = User::where('email', $googleUser->email)->first();

            if ($existUser) {
                Auth::loginUsingId($existUser->id);
            } else {
                $user = new User;
                $user->name = $googleUser->name;
                $user->email = $googleUser->email;
                $user->google_id = $googleUser->id;
                $user->password = md5(rand(1, 10000));
                $user->save();
                Auth::loginUsingId($user->id);
            }
            return redirect()->to('/home');
        } catch (Exception $e) {
            return 'error';
        }
    }
}

ایجاد Route

فایل routes>>web.php را باز کنید و Route های زیر را در آن وارد کنید:

<?php

Auth::routes();

Route::get('/google-login', 'GoogleAuthController@redirectToProvider');
Route::get('/callback', 'GoogleAuthController@handleProviderCallback');

Route::get('/home', 'HomeController@index')->name('home');

ایجاد Google Client ID

برای ایجاد Google Client ID به کنسول توسعه دهندگان گوگل (https://console.developers.google.com) بروید و سپس با اکانت جیمیل خود وارد شوید و یک client ID بسازید.(مراحل ساخت Google Client ID را در زیر آورده ایم).

پس از وارد شدن بر روی CREATE کلیک کنید:

در مرحله بعد فیلدها را پر کنید (می توانید بصورت پیش فرض رها کنید) و مجددا بر روی دکمه CREATE کلیک کنید:

سپس مانند تصویر زیر از منوی سمت چپ گزینه Credentials را انتخاب کنید:

سپس مانند تصویر زیر بر روی دکمه Create Credentials کلیک کنید و گزینه OAuth Client ID را انتخاب کنید:

در مرحله بعد در بخش Application type گزینه Web application را انتخاب کنید همچنین در فیلد مربوط به Authorized redirect URIs لینک callback پروژه خود را را وارد کنید، مانند http://localhost:8000/callback:

بعد از کلیک بر روی دکمه Create ، client ID و client secret را دریافت خواهید کرد:

بعد از ایجاد Google Client ID به فایل config>>services.php بروید و کدهای زیر را به آن اضافه کنید:

'google' => [
    'client_id' => 'HERE',
    'client_secret' => 'HERE',
    'redirect' => 'http://localhost:8000/callback'
],

در کدهای بالا client_id و client_secret خود را وارد کنید.

ویرایش صفحه Login

در این مرحله ما قصد داریم دکمه ای با نام “Login with Google” را به صفحه لاگین اضافه کنیم.فایل resources > views >  auth >  login.blade.php را باز کنید و کدهای زیر را در آن بنویسید:

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Login') }}</div>

                <div class="card-body">
                    <form method="POST" action="{{ route('login') }}">
                        @csrf

                        <div class="form-group row">
                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

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

                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">

                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-6 offset-md-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>

                                    <label class="form-check-label" for="remember">
                                        {{ __('Remember Me') }}
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group row mb-0">
                            <div class="col-md-8 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    {{ __('Login') }}
                                </button>

                                <a href="{{ url('/google-login') }}" class="btn btn-primary">Login With Google</a>

                                @if (Route::has('password.request'))
                                    <a class="btn btn-link" href="{{ route('password.request') }}">
                                        {{ __('Forgot Your Password?') }}
                                    </a>
                                @endif
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

تست پروژه لاگین با اکانت گوگل

اکنون آدرس لاگین پروژه خود را مشاهده کنید: http://localhost:8000/login

بر روی دکمه ‘Login With Google’ کلید کنید و با جیمیل خود لاگین کنید.اگر همه ی مراحل را بدرستی انجام داده باشید صفحه ای مانند تصویر زیر را مشاهده خواهید کرد: