使用 身份验证是现代应用程序中的常见做法。在这篇博文中，我们将讨论如何将 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

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

太長; 讀書

Making security fun one episode at a time

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

太長; 讀書

Company Mentioned

Shloka Shah

About Author

標籤

Languages

这篇文章刊登在...

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

太長; 讀書

Company Mentioned

Shloka Shah

About Author

標籤

Languages

这篇文章刊登在...

相關故事