英文:
How to migrate to new google identity service sign in?
问题
我有一个应用程序，需要迁移到新的Google身份验证服务的登录方法。几天来，我一直卡在这个问题上，不知道该如何做，Google提供的文档对我来说似乎非常混乱，因此我来这里寻求帮助。
我的当前登录包括几个部分：
- HTML文件：
<!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 %>
<% include partials/header.ejs %>
<div id="application"></div>
<% include partials/footer.ejs %>
<script src="//apis.google.com/js/client.js"></script>
<script type="application/javascript">
window.ENVIRONMENT = '<%= process.env.NODE_ENV %>';
</script>
<script type="text/javascript" src="/js/app<%= version %>.js"></script>
<script type="application/javascript">
APP.init();
</script>
</body>
</html>
我猜这里我需要包含Google提供的新脚本文件？
- app.jsx文件：
gapi.load('auth2', () => gapi.auth2.init({
client_id: Config.googlePlus.clientId,
}));
在这里，我需要更新什么？如您所见，我正在使用gapi方法，但不知道新的方法是什么，我从库中找不到它。
- 登录组件：
let auth2 = gapi.auth2.getAuthInstance();
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:
-
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 %><% include partials/header.ejs %> <div id="application"></div> <% include partials/footer.ejs %> <script src="//apis.google.com/js/client.js"></script> <script type="application/javascript"> window.ENVIRONMENT = '<%= process.env.NODE_ENV %>'; </script> <script type="text/javascript" src="/js/app<%= version %>.js"></script> <script type="application/javascript"> APP.init(); </script> </body> </html>
I guess here I need to include the new script file that google provides?
-
The app.jsx file:
gapi.load('auth2', () => gapi.auth2.init({ client_id: Config.googlePlus.clientId, }));
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.
-
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 登录 按钮时，您需要使用以下代码来初始化客户端：
const client = window.google.accounts.oauth2.initTokenClient(params);
这里的参数为：
{
client_id: <你的客户端ID>,
callback: <成功回调函数>,
scope: <你的授权范围>,
error_callback: <错误回调函数>,
}
步骤 3：使用客户端请求令牌
在客户端加载后，请求访问令牌：
client.requestAccessToken();
全部步骤合并
const handleSuccessResponse = (response) => {
console.log(response.access_token)
}
const handleErrorResponse = (response) => {
console.log(response)
}
const signInWithGoogle = () => {
// 创建参数
const params = {
client_id: <你的客户端ID>,
callback: handleSuccessResponse,
scope: <你的授权范围>,
error_callback: handleErrorResponse,
}
// 创建客户端
const client = window.google.accounts.oauth2.initTokenClient(params);
// 请求令牌
client.requestAccessToken();
}
英文:
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
const client = window.google.accounts.oauth2.initTokenClient(params);
Here the params are
<!-- language: lang-js -->
{
client_id: <your_client_id>,
callback: <success_callback_function>,
scope: <your_auth_scopes>,
error_callback: <error_callback_function>,
}
<!-- end snippet -->
Step 3: Request token using the client
After the client is loaded request for access token
client.requestAccessToken();
All together
<!-- language: lang-js -->
const handleSuccessResponse = (response) => {
console.log(response.access_token)
}
const handleErrorResponse = (response) => {
console.log(response)
}
const signInWithGoogle = () => {
// create params
const params = {
client_id: <your_client_id>,
callback: handleSuccessResponse,
scope: <your_auth_scopes>,
error_callback: handleErrorResponse,
}
// create client
const client = window.google.accounts.oauth2.initTokenClient(params);
// Request token
client.requestAccessToken();
}
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论