自 微寻 和 爱五 笔之后，我便打算以后只做海外的产品。

但无论是否做海外的产品，对于用户认证、授权相关的逻辑还是那些，之前在国内我搞了一个微寻，但很快就被 微信封杀 了，索性我也不再去弄。

而海外就简单太多了，Google、Github、Facebook、X 等这些平台都是可以 OAuth 登录的，我选择 Google OAuth，而且我平时非常喜欢有 Google OAuth 的网站，有 Google OAuth 的网站我是绝对不会去使用邮箱或者其它渠道进行注册登录的。

我甚至认为，只要有 Google OAuth 就够了，起步阶段不必花费时间去搞什么邮箱登录，从我的认知来看，海外的网站一般都是邮箱登录和其它第三方登录。

一、为什么要用 OAuth 呢？

一句话：省事儿。

一般的 OAuth 都会提供：用户名和头像，我们以邮箱账号注册为例，分析一下一个网站对于这种注册登录机制需要哪些逻辑：

  • 注册页面
    • 注册逻辑
    • 邮箱确认逻辑（包含发送邮箱验证码或确认链接）
  • 登录页面
    • 登录逻辑
    • 忘记密码（向邮箱发送验证码或确认链接）
    • 修改密码
  • 用户中心
    • 修改密码
    • 修改头像

而以上这些，在我决定只采用 Google OAuth 授权登录以后都不存在了，甚至我的用户表里连密码字段都不需要存在。

二、申请 Google OAuth

新建项目

登录 Google Cloud Console 新建一个项目：

新建项目

然后选择这个新建的项目，并点击进入 API 和服务：

在新项目中点击进入 API 和服务

OAuth 权限请求页面

点击 OAuth 权限请求页面，选择 External：

OAuth 权限请求页面

点击 创建 以后会跳转到 OAuth consent screen 选项中，必填的参数有：

  • 应用名称
  • 用户支持电子邮件
  • 开发者联系信息 - 电子邮件地址

填写 OAuth consent screen 选项中的信息

范围

在 范围 选项页面中，点击 添加或移除范围，选择这三个，然后点击 更新：

添加或移除范围

Test users

在 Test users 选项页面中，点击 ADD USERS 添加自己的 Google 账号邮箱，保存并继续：

添加测试用户

Summary

在 Summary 选项页面中，直接点击 BACK TO DASHBOARD。

凭据

在 凭据 菜单中点击 创建凭据：

创建凭据

选择 OAuth 客户端 ID：

OAuth 客户端 ID

  • 应用类型 选择 Web 应用
  • 已获授权的 JavaScript 来源 里添加上 本地开发的域名
  • 已获授权的重定向 URI 里添加上 本地开发的回调地址

填写 OAuth 相关信息

信息填写完成以后，点击 创建，会弹出来 OAuth 客户端信息窗口，需要保存好 客户端 ID 和 客户端密钥：

获取到 OAuth 客户端 ID 和密钥

三、Laravel 项目接入 Google OAuth

在 Laravel 项目中接入 Google OAuth 非常简单，官方提供了一个 Laravel Socialite 包。

安装并配置 Laravel Socialite：

1
composer require laravel/socialite

在 config/services.php 中添加一个 Google OAuth 的配置信息：

1
2
3
4
5
'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),
    'client_secret' => env('GOOGLE_CLIENT_SECRET'),
    'redirect' => env('GOOGLE_REDIRECT_URL'),
]

在项目根目录的 .env 文件中添加这三个环境变量，GOOGLE_REDIRECT_URL 是用户在使用 Google 账号登录以后，Google 会携带用户信息请求这个地址。

配置路由

在 web.php 中添加两条路由：

1
2
3
4
5
// 跳转到 Google 授权页面
Route::get('/auth/redirect', [AuthController::class, 'redirect'])->name('auth.redirect');

// 用户授权后 Google 携带用户相关信息回调此地址
Route::get('/auth/callback', [AuthController::class, 'callback'])->name('auth.callback');

创建控制器

创建一个 AuthController 并添加两个方法：

  • redirect()：用户在前端页面上点击了 使用 Google 登录 按钮以后，跳转到这个路由，然后在这个方法里跳转到 Google 授权登录页面。
  • callback()：用户确认使用 Google 授权登录以后，Google 携带用户相关信息请求此路由。
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
<?php

namespace App\Http\Controllers;

use App\Models\User;
use Laravel\Socialite\Facades\Socialite;

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

    public function callback()
    {
        $googleUser = Socialite::driver('google')->user();

        $user = User::where('google_user_id', $googleUser->id)->first();
        if (!$user) {
            $user = User::create([
                'name' => $googleUser->name,
                'email' => $googleUser->email,
                'avatar' => $googleUser->avatar,
                'google_user_id' => $googleUser->id,
            ]);
        }

        auth()->login($user);

        return to_route('home');
    }
}