怎么在网上接网站建设,做网站有免费的吗,php网站开发linux,与网站建设关系密切的知识点现在教程不少#xff0c;但是自从谷歌升级验证之后#xff0c;以前的老教程就失效了#xff0c;现在写一个新教程以备不时之需。
由于众所周知的特殊原因#xff0c;开发的时候一定注意网络环境#xff0c;如果没有梯子是无法进行开发的哦~
clientID的申请方式我就不再进…现在教程不少但是自从谷歌升级验证之后以前的老教程就失效了现在写一个新教程以备不时之需。
由于众所周知的特殊原因开发的时候一定注意网络环境如果没有梯子是无法进行开发的哦~
clientID的申请方式我就不再进行赘述了其他的教程上面都有我这边只提供最重要的东西
1、要在html文件中导入谷歌的js文件
script srchttps://accounts.google.com/gsi/client/script
自己创建一个模版html文件扔进去就可以比如说我就创建了一个template.h5.html文件如下图所示 2、将html设置为模板 3、复制以下代码放在合适的位置
view classpy-5div idg_id_onloaddata-client_id你的clientIDdata-login_urihttp://localhost:8080/ data-auto_promptfalse/divdiv classg_id_signin data-typestandard data-sizelarge data-themeoutlinedata-textsign_in_with data-shaperectangular data-logo_alignmentleft/div/view
这个代码是一个按钮效果如下 你需要将他放到你代码中合适的位置。注意没有梯子不显示
4、调用谷歌验证的代码
b64DecodeUnicode(str) {return decodeURIComponent(atob(str).replace(/(.)/g, (m, p) {let code p.charCodeAt(0).toString(16).toUpperCase();if (code.length 2) {code 0 code;}return % code;}));},base64UrlDecode(str) {let output str.replace(/-/g, ).replace(/_/g, /);switch (output.length % 4) {case 0:break;case 2:output ;break;case 3:output ;break;default:throw new Error(base64 string is not of the correct length);}try {return this.b64DecodeUnicode(output);}catch (err) {return atob(output);}},handleCredentialResponse(response) {console.log(Encoded JWT ID token: response.credential);// 发送ID Token到服务器进行验证this.OnGoogleAuthSuccess(response.credential);},OnGoogleAuthSuccess(idToken) {const payload idToken.split(.)[1]; // 获取JWT的负载部分const decodedPayload JSON.parse(this.base64UrlDecode(payload));console.log(token 解析:, decodedPayload);// Receive the idToken and make your magic with the backend},OnGoogleAuthFail(error) {console.log(error)console.log(error)},
5、以下代码放到onReady中
var that this;if (google) {google.accounts.id.initialize({client_id: 你的ClientID,callback: that.handleCredentialResponse,});google.accounts.id.renderButton(document.querySelector(.g_id_signin), // 按钮容器{theme: outline,size: large} // 按钮配置);//google.accounts.id.prompt(); // 显示登录提示} else {// 如果库尚未加载完成设置定时器等待const checkGoogleLibrary setInterval(() {if (google) {clearInterval(checkGoogleLibrary);google.accounts.id.initialize({client_id: 你申请到的ClientID,callback: that.handleCredentialResponse});google.accounts.id.renderButton(document.querySelector(.g_id_signin), // 按钮容器{theme: outline,size: large} // 按钮配置);//google.accounts.id.prompt(); // 显示登录提示}}, 100);}
现在已经完成了点击登录控制台就会输出以下信息OnGoogleAuthSuccess这个函数输出的
