如何迁移到新的Google身份验证服务登录？

huangapple
go评论206阅读模式
英文:

How to migrate to new google identity service sign in?

问题

我有一个应用程序，需要迁移到新的Google身份验证服务的登录方法。几天来，我一直卡在这个问题上，不知道该如何做，Google提供的文档对我来说似乎非常混乱，因此我来这里寻求帮助。

我的当前登录包括几个部分：

  1. HTML文件：
  1. <!DOCTYPE html>
  2. <html lang="en" class="clicking">
  3. <head>
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  5.     <title><%= title %></title>
  6.     <link rel="stylesheet" href="/css/app<%= version %>.css?"/>
  7.     <link rel="icon" type="image/x-icon" href="/assets/favicon.ico"/>
  8.     <% include partials/_hotjar.ejs %>
  9.     <% include partials/_googleAnalytics.ejs %>
  10. </head>
  11. <body id="account">
  12. <% include partials/_googleTagManagerNoScript.ejs %>
  14. <% include partials/header.ejs %>
  16. <div id="application"></div>
  18. <% include partials/footer.ejs %>
  19. <script src="//apis.google.com/js/client.js"></script>
  20. <script type="application/javascript">
  21.     window.ENVIRONMENT = '<%= process.env.NODE_ENV %>';
  22. </script>
  23. <script type="text/javascript" src="/js/app<%= version %>.js"></script>
  24. <script type="application/javascript">
  25.     APP.init();
  26. </script>
  27. </body>
  28. </html>

我猜这里我需要包含Google提供的新脚本文件？

  1. app.jsx文件：
  1. gapi.load('auth2', () => gapi.auth2.init({
  2.     client_id: Config.googlePlus.clientId,
  3. }));

在这里，我需要更新什么？如您所见，我正在使用gapi方法，但不知道新的方法是什么，我从库中找不到它。

  1. 登录组件：
  1. let auth2 = gapi.auth2.getAuthInstance();
  2. auth2.grantOfflineAccess({ redirect_uri: 'postmessage' });

新方法的替代方法是什么？

如果您能帮助我，我将不胜感激，提前感谢！

英文:

I have an app where I need to migrate to the new google identity service sign in methods. For several days I am stuck on this issue and I have no idea how to do it, the documentation that google provides seems really confusing for me, so I came here to ask for the help.

My current sign in consists of several parts:

  1. The html file:

    <!DOCTYPE html>
    <html lang="en" class="clicking">
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title><%= title %></title>
    <link rel="stylesheet" href="/css/app<%= version %>.css?"/>
    <link rel="icon" type="image/x-icon" href="/assets/favicon.ico"/>
    <% include partials/_hotjar.ejs %>
    <% include partials/_googleAnalytics.ejs %>
    </head>
    <body id="account">
    <% include partials/_googleTagManagerNoScript.ejs %>

    1. &lt;% include partials/header.ejs %&gt;
    3. &lt;div id=&quot;application&quot;&gt;&lt;/div&gt;
    5. &lt;% include partials/footer.ejs %&gt;
    6. &lt;script src=&quot;//apis.google.com/js/client.js&quot;&gt;&lt;/script&gt;
    7. &lt;script type=&quot;application/javascript&quot;&gt;
    8.     window.ENVIRONMENT = &#39;&lt;%= process.env.NODE_ENV %&gt;&#39;;
    9. &lt;/script&gt;
    10. &lt;script type=&quot;text/javascript&quot; src=&quot;/js/app&lt;%= version %&gt;.js&quot;&gt;&lt;/script&gt;
    11. &lt;script type=&quot;application/javascript&quot;&gt;
    12.     APP.init();
    13. &lt;/script&gt;
    14. &lt;/body&gt;
    15. &lt;/html&gt;

I guess here I need to include the new script file that google provides?

  1. The app.jsx file:

    1.     gapi.load(&#39;auth2&#39;, () =&gt; gapi.auth2.init({
    2.         client_id: Config.googlePlus.clientId,
    3.     }));

What do I need to update here, as you can see I am using the gapi method, but what would be the new one, I do not get from the library.

  1. The login component:

    let auth2 = gapi.auth2.getAuthInstance();
    auth2.grantOfflineAccess({redirect_uri: 'postmessage'})

What would be the replacement from the new method?

If you can help me with this, I would gladly appreciate it, thanks in advance!

答案1

得分: 2

这个流程有三个步骤：

步骤 1：加载脚本

包括此脚本 https://accounts.google.com/gsi/client。

步骤 2：初始化客户端

当用户点击 使用 Google 登录 按钮时，您需要使用以下代码来初始化客户端：

  1. const client = window.google.accounts.oauth2.initTokenClient(params);

这里的参数为：

  1. {
  2.     client_id: <你的客户端ID>,
  3.     callback: <成功回调函数>,
  4.     scope: <你的授权范围>,
  5.     error_callback: <错误回调函数>,
  6. }

步骤 3：使用客户端请求令牌

在客户端加载后，请求访问令牌：

  1. client.requestAccessToken();

全部步骤合并

  1. const handleSuccessResponse = (response) => {
  2.   console.log(response.access_token)
  3. }
  5. const handleErrorResponse = (response) => {
  6.   console.log(response)
  7. }
  9. const signInWithGoogle = () => {
  10.   // 创建参数
  11.   const params = {
  12.     client_id: <你的客户端ID>,
  13.     callback: handleSuccessResponse,
  14.     scope: <你的授权范围>,
  15.     error_callback: handleErrorResponse,
  16.   }
  17.   
  18.   // 创建客户端
  19.   const client = window.google.accounts.oauth2.initTokenClient(params);
  20.   
  21.   // 请求令牌
  22.   client.requestAccessToken();
  23. }
英文:

The process has three steps

Step 1: Load script

Include this script https://accounts.google.com/gsi/client

Step 2: Initiate a client

When user clicks the Sign in with google button you have to initiate the client using

  1. const client = window.google.accounts.oauth2.initTokenClient(params);

Here the params are

<!-- language: lang-js -->

  1. {
  2.     client_id: &lt;your_client_id&gt;,
  3.     callback: &lt;success_callback_function&gt;,
  4.     scope: &lt;your_auth_scopes&gt;,
  5.     error_callback: &lt;error_callback_function&gt;,
  6. }

<!-- end snippet -->

Step 3: Request token using the client

After the client is loaded request for access token

  1. client.requestAccessToken();

All together

<!-- language: lang-js -->

  1. const handleSuccessResponse = (response) =&gt; {
  2.   console.log(response.access_token)
  3. }
  5. const handleErrorResponse = (response) =&gt; {
  6.   console.log(response)
  7. }
  9. const signInWithGoogle = () =&gt; {
  10.   // create params
  11.   const params = {
  12.     client_id: &lt;your_client_id&gt;,
  13.     callback: handleSuccessResponse,
  14.     scope: &lt;your_auth_scopes&gt;,
  15.     error_callback: handleErrorResponse,
  16.   }
  17.   
  18.   // create client
  19.   const client = window.google.accounts.oauth2.initTokenClient(params);
  20.   
  21.   // Request token
  22.   client.requestAccessToken();
  23. }

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年3月7日 18:56:01
  • 转载请务必保留本文链接：https://go.coder-hub.com/75661077.html
  • google-identity
  • html
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定