در این پست از تجاری اپ ما قصد داریم نحوه لاگین کردن در سایت با اکانت گوگل در لاراول را به شما آموزش دهیم.ما برای این کار از پکیج Socialite استفاده می کنیم.در ادامه با ما همراه باشید و گام های زیر را دنبال کنید:
برای هر پروژه لاراول ما نیاز داریم که 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
دستور زیر را برای نصب پکیج 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';
}
}
}
فایل 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 به کنسول توسعه دهندگان گوگل (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 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’ کلید کنید و با جیمیل خود لاگین کنید.اگر همه ی مراحل را بدرستی انجام داده باشید صفحه ای مانند تصویر زیر را مشاهده خواهید کرد:
2 Comments
تشکر
همه چیز بدرستی و کامل توضیح داده شده ممنون