使用 身份验证是现代应用程序中的常见做法。在这篇博文中，我们将讨论如何将 Google 身份服务集成到任何使用 作为服务器的前端应用程序中。 Google 身份服务提供 Google 登录进行 Ruby on Rails 自定义登录/注册按钮   一键登录 让我们潜入！ 第 1 步：在 Google Developer Console 中创建一个应用程序。 为了使用 Google Sign In 或 One Tap，我们需要一个 来添加我们的 以及  。 client_id client server 要创建应用程序，请前往 谷歌开发者控制台 选择  。在执行此操作之前，您需要配置您的 .  Create Credentials > OAuth Client ID 同意屏幕 创建 client_id 时，请确保在 Authorized Javascript Origin for development 和生产 URL 中包含 和客户端运行的端口。  localhost 完成后，您将获得格式为 的 1234567890-abcdefg.apps.googleusercontent.com client_id 有关设置应用程序的更多详细信息，您可以阅读 。 在这里 第 2 步：在客户端中设置库 为了加载客户端库，如果您使用 或 _app，请在 中添加   如果使用 React.js index.html <script src="https://accounts.google.com/gsi/client" async defer></script> _app.jsx Next.js。 第 3 步：显示自定义的登录按钮  useEffect(() => { /* global google */ google.accounts.id.initialize({ client_id: "YOUR_GOOGLE_CLIENT_ID", callback: signInCallback, cancel_on_tap_outside: false, }); google.accounts.id.renderButton(document.getElementById("signInDiv"), { theme: "outline", size: "large", }); }, []); 添加 以显示 google 已在我们的 中全局定义 global google index.html 方法基于给定字段创建一个 Sign In With Google 客户端实例。  是我们从创建 google 应用程序中获得的必填字段， 是 JavaScript 函数（此处  ），用于处理从 One Tap 提示或弹出窗口返回的 ID 令牌。 google.accounts.id.initialize client_id 回调 为 signInCallback 默认情况下，如果用户单击屏幕上的任意位置，则会在 One Tap 提示上应用指数冷却。如果您希望提示始终可见，请将此值设置为  。您可以查看更多配置 false 这里。   方法呈现一个 Sign In With Google 按钮。你可以玩弄配置 google.accounts.id.renderButton 这里。   是 HTML 元素。通过将以下代码添加到您的网页 HTML， document.getElementById("signInDiv")   return ( <div className="App"> <div id="signInDiv" /> </div> ); 您将能够看到这样的自定义按钮 第 4 步：显示一键式提示 为了显示提示，将其添加到 useEffect  google.accounts.id.prompt(); 第 5 步：定义回调函数 如 所述，signInCallback 是我们的回调函数，可以定义为 第 3 步 const signInCallback = (result) => { if (result.credential) { const params = { token: result.credential }; axios .post("http://localhost:3000/user/google", params) .then((res) => { const { authToken, ...userInfo } = res.data.data; // set token in local storage/cookies based on your authentication method // redirect to the authenticated page }) .catch((err) => console.log(err)); } }; 在哪里， 是我们将在下一步中创建的服务器 URL 本地主机：3000/用户/谷歌 一旦我们单击“登录”或“一键式”按钮， 就是来自 Google 的响应。 结果 包含两个字段 结果  ：此字段是作为 base64 编码的 JSON Web 令牌 (JWT) 字符串的 ID 令牌 credential  ：显示如何选择凭证。更多关于它 . select_by 这里 我们从结果中获取凭证并将其作为参数传递给我们的服务器。 第 6 步：将控制器和路由添加到服务器 我们将在服务器中创建一个路由来处理来自客户端的请求。在我们这样做之前，我们需要创建一个控制器来接受来自客户端的 JWT。 创建一个文件  ，添加一个方法  。 app/controllers/users/user_controller.rb google 在 中添加路由  google_oauth 。 config/routes.rb users/user# 一旦路由收到 JWT，第一步也是最关键的一步是验证 JWT 是否经过验证。为此，我们可以使用 gem  ，这是来自 Google 的官方 gem，用于验证颁发的 ID 令牌。   google_auth 这可以很容易地使用 Google::Auth::IDTokens.verify_oidc access_token, aud: "YOUR_GOOGLE_CLIENT_ID" 其中 是从客户端收到的 JWT，而 是谷歌应用程序客户端 ID。 access_token aud 如果令牌有效，它将返回这样的哈希或抛出异常 { "iss": "https://accounts.google.com", "nbf": 12345678, "aud": "YOUR_GOOGLE_CLIENT_ID, "sub": "1112223333444", "email": "your-email@gmail.com", "email_verified": true, "azp": "YOUR_GOOGLE_CLIENT_ID", "name": "First Last", "picture": "https://lh3.googleusercontent.com/a/AItbvmnvsIQFJw", "given_name": "First", "family_name": "Last", "iat": 1653797115, "exp": 1653805725, "jti": "8ffa19190gngd46745ff558821f953802" } 如果令牌有效，您可以在数据库中检查用户是否存在并相应地创建用户。完成后，您可以根据您的身份验证方法登录或重定向用户。   # users/user_controller.rb def google begin data = Google::Auth::IDTokens.verify_oidc access_token, aud: "YOUR_GOOGLE_CLIENT_ID" // find the user in the data // if the user does not exist, create a user using data // sign the user (based on your authentication method) rescue StandardError => e end end   # config/routes.rb scope :user do post 'google' => 'users#user_controller.rb' end    ：确保在您的服务器上安装 并添加此 PS rack-cors application.rb   config.middleware.insert_before 0, Rack::Cors do allow do origins '*' resource( '*', headers: :any, expose: ['Authorization'], methods: %i[get patch put delete post options show] ) end end 避免遇到这样的错误    ：如果您的应用程序使用适用于 Web 的 Google 登录 JavaScript 平台库，请确保将其迁移到 Google 身份服务，因为前者将被弃用。 PPS 关联 我希望本文能帮助您将 One Tap Login 集成到您的项目中。更详细的信息可以查看官方 . 文档 也在 发布 这里

Google

2022 - HackerNoon Contributor of the Year - Learning

Read My Stories

Nominated for 2022 - HackerNoon Contributor of the Year - Learning

SDE II @ HackerRank

該音頻是用故事的原始語言製作的！

如何使用 Ruby on Rails 实现一键式 Google 登录

About Author

註釋

標籤

这篇文章刊登在

Related Stories

点击赚钱：Telegram 可能会在 Solana 之前吸引下一个 100 亿加密用户

比特币 UTXO 模型，为独特的生态系统提供动力

从论坛到信息流：社交媒体算法如何塑造数字互动

Telegram：加密岛通往大陆的桥梁

点击赚钱：Telegram 可能会在 Solana 之前吸引下一个 100 亿加密用户

比特币 UTXO 模型，为独特的生态系统提供动力

从论坛到信息流：社交媒体算法如何塑造数字互动

Telegram：加密岛通往大陆的桥梁

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps