如何在 ruby on rails 的单页应用程序中包含 CSRF 令牌

Question

我正在构建一个单页应用程序前端，它与 ruby on rails 后端进行对话。我正在使用 devise 和 omniauth 进行用户身份验证，我正在尝试使用我的谷歌帐户登录。

我按照这里的说明 (https://developers.google.com/identity/gsi/web/guides/client-library) 和这里 (https://developers.google.com/identity/gsi/web /tools/configurator) 并且我在主页上运行了使用谷歌按钮登录。当你点击它时，你选择了你的谷歌账户，它成功地发布到正确的 omniauth 回调地址。

问题是它会抛出

ActionController::InvalidAuthenticityToken

异常消息“无法验证 CSRF 令牌真实性”。我知道这是因为 rails 会自动将 CSRF 令牌注入到呈现的表单中，但在这种情况下，它是由来自外部库的 javascript 调用发送的。我如何发送令牌？

我按照我之前发布的文档的指示在我的 application.html.erb 文件中包含以下脚本标签。

<script src="https://accounts.google.com/gsi/client" async defer></script>

我制作了以下反应应用程序，使用谷歌按钮登录。

import React from 'react';

const SignInWithGoogle = () => {
  return (
    <div className='sign-in-with-google'>
      <div id="g_id_onload"
          data-client_id="xxxxx.apps.googleusercontent.com"
          data-context="signup"
          data-ux_mode="popup"
          data-login_uri="http://localhost:3000/users/auth/google_oauth2/callback"
          data-auto_prompt="false">
      </div>

      <div className="g_id_signin"
          data-type="standard"
          data-shape="rectangular"
          data-theme="outline"
          data-text="signin_with"
          data-size="large"
          data-logo_alignment="left">
      </div>
    </div>
  );
};

export default SignInWithGoogle;

红宝石版本：3.2.2

rails 版本：7.0.4.3

设计宝石 4.9.2

omniauth 宝石 2.1.1

omniauth-google-oauth2 gem 1.1.1

Answer 1

API 端点默认无法验证 CSRF 令牌。 React FE 是跨站的，SSO 响应也是跨站的。

在我的混合应用程序中，我倾向于有选择地为所有 api 端点禁用 CSRF：

  # Disable CSRF protection on urls that start with /api/v1/
  skip_before_action :verify_authenticity_token, if: :api_endpoint?

你至少需要在

OmniauthCallbacksController

中禁用它。