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

如何解决无法使用谷歌一键登录按钮登录社交名流

我尝试了几乎所有可能的方法，但 Google One Tap 登录按钮在我的 Laravel 8 应用程序中返回 504 错误。我正在使用 laravel socialite 来处理登录过程，如果我放置一个链接按钮而不是 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 Method Not Allowed”。 东西坏了。请让我们知道发生此错误时您在做什么。我们会尽快修复它。给您带来的不便，敬请谅解。

解决方法

来自 Google one tab 的响应是 post not get request

,

我研究了@Mohamed ِRadwan 提供的解决方案，并更新了我的社交名流路线文件，如下所示：

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','callback']);
});

});

这使得 One Tap 提示可以根据社交名流的需要工作，但登录按钮仍然不起作用并抛出 419（意味着页面过期 - 由于 csrf 令牌不匹配）令人惊讶我按照这篇文章发送了 csrf 令牌：

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 以选择帐户，这里是 csrf 令牌过期的地方。

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

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

瞧，它奏效了。