无法使用 google 一键登录按钮登录社交名流

Question

我几乎尝试了所有可能的方法，但 Google 一次点击登录按钮在我的 Laravel 8 应用程序中返回 504 错误。我正在使用 laravel 社交名流来处理登录过程，如果我放置一个 link 按钮而不是 Google 登录按钮，它绝对可以正常工作。

这是我的一键式按钮代码：

<div id="g_id_onload" data-client_id="{{ config('services.google.client_id') }}" data-context="signin" data-login_uri="{{ route('frontend.auth.social.login', 'google') }}" data-auto_prompt="true"></div>

<div class="g_id_signin" data-type="standard" data-shape="rectangular" data-theme="filled_blue" data-text="signin_with" data-size="large" data-logo_alignment="left"></div>

这是我遇到的错误：

糟糕！发生错误服务器返回“405 方法不允许”。东西坏了。请让我们知道发生此错误时您在做什么。我们会尽快修复它。对造成的不便深表歉意。

Answer 1

来自 Google 一个选项卡的响应是 post 未获得请求

Answer 2

我研究了@Mohamed ِRadwan 提供的解决方案并更新了我的 socialite 路由文件如下：

Route::group(['as' => 'auth.'], function () {
Route::group(['middleware' => 'guest'], function () {
    // Socialite Routes
    Route::any('login/{provider}', [SocialController::class, 'redirect'])->name('social.login');
    Route::get('login/{provider}/callback', [SocialController::class, 'callback']);
});

});

这使得 One Tap 提示按 socialite 的要求工作，但登录按钮仍然不起作用并抛出 419（意味着页面已过期 - 由于 csrf 令牌不匹配）令人惊讶的是我正在发送 csrf根据这个 post:

How to handle google one tap with laravel csrf

这是我的登录按钮代码：

    <div id="g_id_onload"
       data-client_id="{{ config('services.google.client_id') }}"
       data-context="signin"
       data-ux_mode="redirect"
       data-login_uri="{{ route('frontend.auth.social.login', 'google') }}"
       data-_token="{{ csrf_token() }}"
       data-auto_prompt="true">
   </div>
   <div class="g_id_signin"
       data-type="standard"
       data-shape="rectangular"
       data-theme="filled_blue"
       data-text="signin_with"
       data-size="large"
       data-logo_alignment="left">
  </div>

似乎 csrf tken 已过期，因为按钮导航到 google uri 到 select 帐户，这里是 csrf 令牌过期的地方。

所以我在我的 VerifyCsrfToken.php 中间件中关闭了 google socialite 路由的 csrf 验证，如下所示：

 protected $except = [
    'login/google',
];

瞧，它成功了。

无法使用 google 一键登录按钮登录社交名流

Unable to login to socialite using google one tap signin button

laravel-8

google-one-tap