如何将 Laravel Socialite 登录添加到通过 Laravel Sanctum 进行身份验证的 SPA

Question

我有一个 vue3 应用程序，它使用 Sanctum 对 Laravel 后端进行身份验证。

我的 Sanctum 后端验证工作流程如下所示：

• 前端使用user/pass向API发出ajax请求
• 后端检查数据库中的用户/密码

• Auth::login($user)

  被调用，创建会话
• API向前端返回响应，其中包含圣所cookie
• 前端重定向到受保护的仪表板

我正在尝试通过 Socialite 添加 Google 登录。 Socialte 文档中描述的工作流程是这样的：

• 在前端添加按钮，重定向到 api 重定向路由：

    public function redirect(): \Symfony\Component\HttpFoundation\RedirectResponse|\Illuminate\Http\RedirectResponse
    {
        return Socialite::driver('google')->redirect();
    }

• 用户然后被重定向到 Google OAuth 屏幕。他们登录了。
• 登录后，用户将被重定向到回调 URL。

    public function callback(Request $request): \Illuminate\Http\RedirectResponse|\Symfony\Component\HttpFoundation\RedirectResponse
    {
        session()->put('state', $request->input('state'));
        $googleUser = Socialite::driver('google')->user();
        
        // business-specific auth logic

        Auth::login($user);
        session()->regenerate();

        // attempt to add cookie manually, does not work
        $cookie = new Cookie(
            session()->getName(),
            session()->getId(),
            config('session.lifetime'),
            '/',
            '.app.local',
            false,
            true,
            false,
            'lax'
        );

        return redirect('http://app.local/dashboard')->withCookie($cookie);
    }

问题是此重定向不包含 Sanctum cookie。 Google 重定向到 API 后端，然后后端重定向回前端。因此，当前端加载时，客户端没有后续受保护的后端请求所需的 cookie，前端会重定向回登录屏幕。

我已经尝试了很多方法来实现这项工作，但我无法在这里找到解决方案。手动创建cookie似乎不起作用； Chrome 不会显示请求的标头。相反，它显示“显示临时标题”。

Answer 1

此问题可能是由于必须使用 ngrok URL 作为配置文件中的

redirect

值引起的。

• API URL：api.app.local
• SPA 网址：spa.app.local
• Google 重定向：api.app.local/auth/callback

Google 要求您使用公共 URL，因此我使用 NGROK url 作为回调 URL。这似乎剥夺了通过 Sanctum 进行身份验证所需的 cookie 的请求，从而使请求搁浅，无法将会话 ID 传递到后端。

推送到公共测试环境可以解决该问题。