Google Sign In
我们平常也经常使用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 ;
} .customGPlusSignIn {
display: inline-block;
width: 180px;
/* 背景顏色設定 */
background-color: #4285f4;
color: #ffffff;
border-radius: 5px;
border: thin solid #;
box-shadow: 1px 1px 1px grey;
white-space: nowrap;
}
.customGPlusSignIn:hover {
cursor: pointer;
}
.label {
/* display: none; */
padding-left: 3px;
color: #;
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 % no-repeat;
background-color: #ffffff;
border-radius: 5px 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: ""
family_name: "AA" /* 姓 */
given_name: "vvv" /* 名 */
iat: ""
iss: "accounts.google.com" /* google账号登录的标识 */
jti: "ce11dc29ac53aa52533f5489b1dde03988035785"
kid: "60f4060e58d75fd3f70beff88c794a775327aa31"
locale: "zh-CN"
name: "vvv AA" /* 姓名 */
picture: "https://lh6.googleusercontent.com/**********/photo.jpg" /* 头像url */
sub: "" /* 与上面的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 = ; i < mutationsList.length; i++) {
var mutation = mutationsList[i]; for (var j = ; 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"; }, );
}
// 10秒后隐藏窗体
var timer = setTimeout(function () { node.style.display = "none"; }, );
}
}
}
}); 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>
Google Sign In的更多相关文章
- google+ sign in and get the oauth token 转摘：https://gist.github.com/ianbarber/5170508
package com.example.anothersignintest; import java.io.IOException; import com.google.android.gms ...
- Google Spreadsheet Add-on Links Extractor 谷歌表格插件链接提取器的制作与发布（附源码）
引言 为什么想到制作这么一个插件呢,是因为博主在更新微信公众号[刷尽天下]的后台数据库时,需要有博客园题目帖子的链接,那么就要从这篇帖子 LeetCode All in One 题目讲解汇总(持续更新 ...
- Android Weekly Notes Issue #258
Android Weekly Issue #258 May 21st, 2017 Android Weekly Issue #258 本期内容: 围绕着Google I/O的热潮, 本周的posts除 ...
- android studio学习---模板
Android Studio还为开发人员提供多种模板选项,从而大大提升开发速度.这些模板能自动创建Activity以及必要的XML文件.大家还可以利用这些模板创建出较为基础的Android应用程序,并 ...
- Google Play sign sha1 转 Facebook login 需要的 hashkey
:4E:::::3A:1F::A6:0F:F6:A1:C2::E5::::2E | xxd -r -p | openssl base64 输出 M05IhBlQOh9jpg/2ocIx5QE4VS4= ...
- [转]Code! MVC 5 App with Facebook, Twitter, LinkedIn and Google OAuth2 Sign-on (C#)
本文转自:https://www.asp.net/mvc/overview/security/create-an-aspnet-mvc-5-app-with-facebook-and-google-o ...
- 算法系列（1）：Google方程式
有一个字符组成的等式:WWWDOT – GOOGLE = DOTCOM,每个字符代表一个0-9之间的数字,WWWDOT.GOOGLE和DOTCOM都是合法的数字,不能以0开头.请找出一组字符和数字的对 ...
- google play iap 常见问题
1.测试阶段query时获取的sku对象为空 解:测试阶段只能使用如下sku // private static final String SKU_TEST = "android.test. ...
- How Google TestsSoftware - Part Three
Lots of questions in thecomments to the last two posts. I am not ignoring them. Hopefully many of th ...
随机推荐
- 转: zabbix对cisco2960的监控
转自:http://blog.chinaunix.net/uid-12115233-id-3561954.html 1:首先在官网下载Cisco2950 模板https://www.zabbix.co ...
- <USACO06NOV>玉米田Corn Fields
状压emm 二进制真有趣 来自dp垃圾的欣喜 Description 农民 John 购买了一处肥沃的矩形牧场,分成M*N(1 <= M <= 12; 1 <= N <= 12 ...
- HTTP 协议的基本知识，包括请求流程、请求方法等
一.什么是http协议? HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写.它的发展是万维网协会(World Wide Web Consortium)和Int ...
- 红灯区：DevOps 建设的思考和实践
点击关注"有赞coder" 获取更多技术干货哦- 作者:费解 团队:效能改进 背景 众所周知,在丰田精益生产中,核心观念包含对人的尊重.消除浪费.持续改善,只有这样,企业才能保持良 ...
- linux find命令格式及find命令详解
本文详细介绍了linux find命令格式及find命令案例,希望对您的学习有所帮助.1.find命令的一般形式为:find pathname -options [-print -exec -ok . ...
- Android Studio NDK编程初探
继上一篇学习了如何使用NDK编译FFMPEG后,接下来就是要学习如何在Android Studio中使用了. 经过参考和一系列的摸索,记录下具体步骤. 创建C++ Support的Android St ...
- 天哪！毫无思绪！令人感到恐惧的数学(水题?)(TOWQs)
这道题的题目描述灰常简单,第一眼看以为是一道十分水的题目: 但是!!!(我仔细一看也没有发现这背后隐藏着可怕的真相~) 下面给出题目描述: 给出一个整数x,你可以对x进行两种操作.1.将x变成4x+3 ...
- 作为前端，你需要懂得javascript实现继承的方法
在ES6之前,javascript不跟其他语言一样,有直接继承的方法,它需要借助于构造函数+原型对象模拟实现继承.现在我们可以利用ES6的extends方法实现继承,如果想了解更多有关ES6实现的继承 ...
- 什么是x86什么是x64 它们有什么区别
1.内存寻址不同: 32位系统,最大支持3.5G内存,如果在32位系统中使用4G或更大的内存,电脑最多只可以识别3.4G左右可用,而64位系统最大可以支持128G大内存. 2.运算速度不同: 64位系 ...
- pycharm 关于模块安装出现的“[error] Microsoft Visual C++ 14.0 is required” 解决办法
刚才正准备对pycharm进行一番操作的时候,噔 噔磴噔噔 “no module define xxx” ,那我当然要把xxx给搞到pycharm上来啊, 不一会功夫 ,biu~ “[error] ...