我们平常也经常使用QQ，微信账号，登录其他应用。最近公司让我给网站添加一个谷歌账号登录。我来这里记录一下，莫怪~~~莫怪~~~
1. 申请一个账号登录ID: https://developers.google.com/identity/sign-in/web/sign-in#before_you_begin
2. 拿到ID:
var clientId = "**********.apps.googleusercontent.com";
3. 在官网https://developers.google.com/identity/sign-in/web/有一段代码更改下clientId就可以在页面中使用，只是效果可能与实际需求有点差别。
<html lang="en"> <head> <title>test.html</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="google-signin-scope" content="profile email"> <meta name="google-signin-client_id" content="*** Your client_id ***.apps.googleusercontent.com" /> <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script> <script src="https://apis.google.com/js/platform.js" async defer></script> <script type="text/javascript"> function onSignIn(googleUser) { var profile = googleUser.getBasicProfile(); var parameter = { id: profile.getId(), userName: profile.getName(), email: profile.getEmail(), imageUrl: profile.getImageUrl(), givenName: profile.getGivenName(), familyName: profile.getFamilyName(), imgUrl: profile.getImageUrl() };
var vid_token = googleUser.getAuthResponse().id_token; } function signOut() { var auth2 = gapi.auth2.getAuthInstance(); auth2.signOut().then(function () { console.log('User signed out.'); }); }</script> </head> <body> <div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div> <a href="#" onclick="signOut();">Sign out</a> </body> </html>
4. 来啦来啦，下面是我根据公司网站和实际需求，参考着官网上写的代码。（感觉公司对待某些网站功能时，挺随意的，需要的说添加就添加。呃，我啥也没说~_~~~）
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<style type="text/css">
.g-signin-wrapper {
padding: 5px 0;
}
.customGPlusSignIn {
display: inline-block;
width: 180px;
/* 背景顏色設定 */
background-color: #4285f4;
color: #ffffff;
border-radius: 5px;
border: thin solid #888;
box-shadow: 1px 1px 1px grey;
white-space: nowrap;
}
.customGPlusSignIn:hover {
cursor: pointer;
}
.label {
/* display: none; */
padding-left: 3px;
color: #676767;
font-family: serif;
font-weight: normal;
}
.icon {
display: inline-block;
vertical-align: middle;
width: 34px;
height: 24px;
background: url('https://developers.google.com/identity/sign-in/g-normal.png') transparent 3px 50% no-repeat;
background-color: #ffffff;
border-radius: 5px 0 0 5px;
}
.buttonText {
display: inline-block;
vertical-align: middle;
width: 140px;
font-size: 14px;
font-weight: bold;
font-family: 'Roboto', sans-serif;
text-align: center;
}
</style>
<script>
var clientId = "******.apps.googleusercontent.com";
//登錄按鈕事件
function GoogleLogin() {
gapi.load('auth2', function () {
var auth2 = gapi.auth2.init({
client_id: clientId,
//fetch_basic_profile: false, //这里true或false的值会影响，下面的googleUser.getBasicProfile()的取值和api验证返回结果res的值
fetch_basic_profile: true,
scope: "profile email"
});
auth2.signIn().then(function (googleUser) {
var profile = googleUser.getBasicProfile();
var response = googleUser.getAuthResponse();
var parameter = {
id: profile.getId(),
userName: profile.getName(),
email: profile.getEmail(),
imageUrl: profile.getImageUrl(),
givenName: profile.getGivenName(),
familyName: profile.getFamilyName()
};
var verifyUrl = "https://oauth2.googleapis.com/tokeninfo?id_token=" + response.id_token;
getRespone(verifyUrl);
});
});
}
function getRespone(url) {
$.ajax({
type: "GET",
cache: false,
url: url,
success: function (res) {
console.log(res); // res： api驗證后的結果
}
});
}
</script>
</head>
<body>
<div id="gSignInWrapper" class="g-signin-wrapper">
<span class="label">Sign in with:</span>
<div id="customBtn" class="customGPlusSignIn" onclick="GoogleLogin()">
<span class="icon"></span>
<span class="buttonText">Sign in with Google</span>
</div>
</div>
</body>
</html>
5.API: https://oauth2.googleapis.com/tokeninfo?id_token=*********验证通过的返回值
{ alg: "RS256" at_hash: "EZlzneWBRJGP4318W12vZQ" aud: "******.apps.googleusercontent.com" /* 与ClientID的值相同 */ azp: "******.apps.googleusercontent.com" email: "******@gmail.com" /* google的邮箱账号 */ email_verified: "true" /* 是否是邮箱账号 */ exp: "1565577892" family_name: "AA" /* 姓 */ given_name: "vvv" /* 名 */ iat: "1565574292" iss: "accounts.google.com" /* google账号登录的标识 */ jti: "ce11dc29ac53aa52533f5489b1dde03988035785" kid: "60f4060e58d75fd3f70beff88c794a775327aa31" locale: "zh-CN" name: "vvv AA" /* 姓名 */ picture: "https://lh6.googleusercontent.com/**********/photo.jpg" /* 头像url */ sub: "116604411058332859522" /* 与上面的googleUser.getBasicProfile().getId()相同 */ typ: "JWT" }
6. 在浏览器加载页面时，判断是否登录google账号，若已登录，则弹出提示窗口。
这个功能在iframe嵌套的页面会出错，具体原因不知道，听老大说，有些服务会禁止在iframe嵌套的页面使用。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://smartlock.google.com/client" defer></script>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<script>
var clientId = "******.apps.googleusercontent.com";
//進入頁面，Google登錄彈窗提示
window.onGoogleYoloLoad = function (googleyolo) {
var config = {
supportedAuthMethods: ["https://accounts.google.com"],
supportedIdTokenProviders: [{ uri: "https://accounts.google.com", clientId: clientId }]
};
googleyolo.hint(config).then(function (credential) {
getRespone("https://oauth2.googleapis.com/tokeninfo?id_token=" + credential.idToken);
}, function (error) {
console.log(error);
});
var bodyObserver = new MutationObserver(function (mutationsList) {
for (var i = 0; i < mutationsList.length; i++) {
var mutation = mutationsList[i];
for (var j = 0; j < mutation.addedNodes.length; j++) {
var node = mutation.addedNodes[j];
if (node.nodeName === 'IFRAME' && node.src.includes('smartlock.google.com/iframe/')) {
bodyObserver.disconnect();
node.onmouseover = function () {
clearInterval(timer);
}
node.onmouseleave = function () {
timer = setTimeout(function () { node.style.display = "none"; }, 5000);
}
// 10秒后隐藏窗体
var timer = setTimeout(function () { node.style.display = "none"; }, 10000);
}
}
}
});
bodyObserver.observe(window.document.body, { childList: true });
}
function getRespone(url) {
$.ajax({
type: "GET",
cache: false,
url: url,
success: function (res) {
console.log(res); // res： api驗證后的結果
}
});
}
</script>
</head>
<body>
<!-- 参考链接：
https://github.com/zapier/google-yolo-inline/blob/master/google-yolo-iframe.html
https://github.com/openid/OpenYOLO-Web
https://medium.com/groww-engineering/all-about-googles-one-tap-sign-in-b8c1c93305d4
-->
</body>
</html>
