使用 Socialite Package 的 Laravel Google OAuth 身份验证

17 Mar 2025 | 4 分钟阅读

在本节中，我们将学习 Google OAuth 身份验证。我们将使用 Laravel 和 socialite 包来完成。社交网络正在全球范围内传播，并且大量的人与他们联系。如今，我们的网站需要实现社交身份验证，因为诸如 Twitter、Facebook、Github、Google 等社交网络与许多开发人员、许多用户等相关联。在我们的应用程序中，我们将看到登录和注册 Google 帐户的过程。使用Laravel，我们可以非常轻松地注册我们的 Google ID 并登录 Google 帐户。 socialite 包由 Laravel 5 提供，用于社交身份验证。为了登录和注销，步骤描述如下

步骤 1

在此步骤中，我们将进行 Socialite 包安装。该软件包用于提供 fb api，这将帮助我们与 Google 帐户连接。为此，我们将使用命令提示符并运行以下命令

成功安装上述软件包后，我们将使用名为 config 的文件，并将别名和提供程序添加到其中。现在，我们将使用名为 config/app.php 的文件，然后将别名和服务提供程序添加到其中，如下所示

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

步骤 2

在此步骤中，我们将创建 Google App。为此，我们需要 Google 客户端和密钥的 ID。使用这些详细信息，我们可以获取其他用户的信息。如果我们没有，可以使用以下链接创建 Google 应用程序帐户

https://console.cloud.google.com/projectselector2/apis/dashboard?supportedpurview=project

当我们点击此链接时，我们将获得以下页面

Laravel Google OAuth authentication using Socialite Package

现在我们将点击凭据。之后，我们将选择第一个选项 OAuth。然后，我们将单击名为创建新客户端 ID 的按钮。在此之后，我们将看到以下页面

当我们完成创建帐户的过程时，我们可以复制用户的 ID 和密钥。现在，我们将使用配置文件并设置应用程序的 ID、密钥和回调 URL。为此，我们将打开一个名为 config/services.php 的文件，然后我们将像这样设置 ID 和密钥

config/services.php

return [
	....
	'google' => [
        'client_id' => 'app id',
        'client_secret' => 'add secret',
        'redirect' => 'http://learnl52.hd/auth/google/callback',
    ],
]

步骤 3

在此步骤中，我们将创建 Google 登录。现在，我们必须通过在用户表中创建迁移来添加 google_id。创建迁移的代码描述如下

迁移

Schema::table('users', function ($table) {
    $table->string('google_id');
});

当我们成功添加 google_id 列时，我们必须先通过添加新路由登录 Google。为此，我们将使用 routes.php 文件并将以下路由代码添加到其中，如下所示

app/Http/routes.php

Route::get('google', function () {
    return view('googleAuth');
});
Route::get('auth/google', 'Auth\AuthController@redirectToGoogle');
Route::get('auth/google/callback', 'Auth\AuthController@handleGoogleCallback');

当我们成功添加路由时，我们必须添加 Google 身份验证方法。使用此方法，我们可以处理 Google 回调等的 URL。我们将使用名为 AuthController.php 的文件并将以下代码添加到其中，如下所示

app/Http/Controllers/Auth/AuthController.php

namespace App\Http\Controllers\Auth;

use App\User;
use Validator;
use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\ThrottlesLogins;
use Illuminate\Foundation\Auth\AuthenticatesAndRegistersUsers;
use Socialite;
use Auth;
use Exception;

class AuthController extends Controller
{

    use AuthenticatesAndRegistersUsers, ThrottlesLogins;

    protected $redirectTo = '/';

    public function __construct()
    {
        $this->middleware('guest', ['except' => 'logout']);
    }

    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => 'required|max:255',
            'email' => 'required|email|max:255|unique:users',
            'password' => 'required|confirmed|min:6',
        ]);
    }

    protected function create(array $data)
    {
        return User::create([
            'name' => $data['name'],
            'email' => $data['email'],
            'password' => bcrypt($data['password']),
        ]);
    }

    public function redirectToGoogle()
    {
        return Socialite::driver('google')->redirect();
    }

    public function handleGoogleCallback()
    {
        try {
            $user = Socialite::driver('google')->user();
            
            $userModel = new User;
            $createdUser = $userModel->addNew($user);
            Auth::loginUsingId($createdUser->id);
            return redirect()->route('home');
        } catch (Exception $e) {
            return redirect('auth/facebook');
        }
    }
}

在此之后，我们必须添加 blade 视图。为此，我们将创建一个名为 googleAuth.blade.php 的新文件，然后将以下代码添加到其中，如下所示

resources/views/googleAuth.blade.php

@extends('layouts.app')
@section('content')
<style type="text/css">
.account-box
{
    border: 2px solid rgba(153, 153, 153, 0.75);
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -khtml-border-radius: 2px;
    -o-border-radius: 2px;
    z-index: 3;
    font-size: 13px !important;
    font-family: "Helvetica Neue" ,Helvetica,Arial,sans-serif;
    background-color: #ffffff;
    padding: 20px;
}
.logo
{
    background-position: 0 -4px;
    margin: -5px 0 17px 80px;
    position: relative;
    text-align: center;
    width: 138px;
}
.forgotLnk
{
    margin-top: 10px;
    display: block;
}
.or-box
{
    position: relative;
    border-top: 1px solid #dfdfdf;
    padding-top: 20px;
    margin-top:20px;
}
</style>
<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="account-box">
                <div class="logo ">
                    <img src="http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png" width="80px" alt=""/>
                </div>
                <form class="form-signin" action="#">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Email" required autofocus />
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" placeholder="Password" required />
                </div>
                <button class="btn btn-lg btn-block btn-primary" type="submit">
                    Sign in</button>
                </form>
                <a class="forgotLnk" href="http://www.jquery2dotnet.com">I can't access my account</a>
                <div class="or-box">
                    <div class="row">
                        <div class="col-md-12 row-block">
                            <a href="{{ url('auth/google') }}" class="btn btn-lg btn-danger btn-block">
                                <strong>Login With Google</strong>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="or-box row-block">
                    <div class="row">
                        <div class="col-md-12 row-block">
                            <a href="http://www.jquery2dotnet.com" class="btn btn-primary btn-block">Create New Account</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

现在我们的以上代码已准备好运行。当我们打开我们的 URL 时，将生成以下输出

下一个主题使用 Laravel 5.7 的新通知系统

← 上一个下一个 →

使用 Socialite Package 的 Laravel Google OAuth 身份验证

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Laravel 教程

Windows 上的安装

Laravel 路由

Laravel 控制器

Laravel 视图

Laravel Blade 模板

Laravel 迁移

Laravel 数据库

杂项。

面试题

使用 Socialite Package 的 Laravel Google OAuth 身份验证

相关帖子

Laravel vs CodeIgniter

Laravel 文件上传

使用 Laravel 5.7 的新通知系统

Laravel Yajra Datatables 导出到 Excel CSV 按钮

Laravel vs WordPress

使用 Laravel 检查 Blade 中数组是否为空

使用 Laravel 中的 dompdf 从 html 视图文件生成 PDF 并下载

使用 Laravel 5.7 实现 Flash 消息

在 Laravel 5 中使用 Maatwebsite 导入导出到 Excel 和 CSV

使用 Laravel 中的复选框删除多个记录

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器