<html>
<head>
<meta name="google-signin-client_id" content="Myvalue.apps.googleusercontent.com">
</head>
<body>
<div id="my-signin2"></div>
<script>
function onSuccess(googleUser) {
console.log('Logged in as: ' + googleUser.getBasicProfile().getName());
}
function onFailure(error) {
console.log(error);
}
function renderButton() {
gapi.signin2.render('my-signin2', {
'scope': 'profile email',
'width': 240,
'height': 50,
'longtitle': true,
'theme': 'dark',
'onsuccess': onSuccess,
'onfailure': onFailure
});
}
</script>
<script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
</body>
</html>
我想登录使用谷歌，但得到这些错误
cb = gapi.loaded_0 ?勒= scs: 177未捕获{错误:'idpiframe_initialization_failed'，详细信息:'您已经创建了一个新的客户端应用程序，使用…i/web/guides/gis-migration)获取更多信息。'}细节：您已经创建了一个新的客户端应用程序，该应用程序使用即将弃用的库进行用户身份验证或授权。新的客户端必须使用新的库;在这些库被弃用之前，现有的客户端也必须进行迁移。有关更多信息，请参阅迁移指南。错误："idpiframe_initialization_failed">
在HTML中更改Google签名的身份验证和授权JavaScript和.
在仅认证登录场景中，显示了现有Google Sign-In按钮的示例代码和渲染。从弹出模式或重定向模式中选择，以查看JavaScript回调或安全重定向到后端服务器登录端点处理身份验证响应的方式的差异。
旧方法和弃用。
<html>
<body>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
<div class="g-signin2" data-onsuccess="handleCredentialResponse"></div>
</body>
</html>
新方法
在简单的仅认证的登录中使用新库场景选择从Popup或模式并使用代码示例来替换登录页面上的现有实现。
那么弹出方式是什么呢:使用回调来处理直接从用户的浏览器登录。
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload"
data-client_id="YOUR_CLIENT_ID"
data-callback="handleCredentialResponse">
</div>
<div class="g_id_signin" data-type="standard"></div>
</body>
</html>
重定向方式为:Google调用由data-login_url属性指定的登录端点。以前，您负责POST操作和参数名称。新库将ID令牌发送到凭据参数中的端点。最后，验证后端服务器上的ID令牌。
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload"
data-client_id="YOUR_CLIENT_ID"
data-ux_mode="redirect"
data-login_uri="https://www.example.com/your_login_endpoint">
</div>
<div class="g_id_signin" data-type="standard"></div>
</body>
</html>