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 ...
随机推荐
- linux下的时区修改
Centos 7时区问题: 通常使用tzselect命令选择时区,今天在修改centos7的时区的时候,修改完以后时区还是没有发生变化,重启也是没有用的:通过网络的帮助了解到,在Centos和ubun ...
- c/c++ main 函数命令行参数的使用
C程序最大的特点就是所有的程序都是用函数来装配的.main()称之为主函数,是所有程 序运行的入口.其余函数分为有参或无参两种,均由main()函数或其它一般函数调用,若调用的是有参函数,则参数在调用 ...
- MyBatis 逆向工程介绍
1. 概念: 逆向工程就是根据数据库中对应的表在项目工程中生成相应的MyBatis代码(XXXMapper.java/XXXMapper.xml/Moudle(XXX)),逆向工程生成的代码可以进行简 ...
- linux在线书籍
<Linux就该这么学-刘遄>https://www.linuxprobe.com/
- <NOIP2005提高T2>过河の思路
emm又一道dp dp真有趣(你的良心呢?!!! Description 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一 ...
- IDEA+Maven+JavaWeb+tomcat项目搭建（图文并茂，详细）
一.创建Maven项目 1:如果刚打开IDEA,显示的是这个页面,我们直接单击 Create New Project(创建项目) 或者 File-> New-> Project 2:选中左 ...
- Vue组件传递数据
组件命名 1.字母全小写且必须包含一个连字符 my-componnect 2.使用 kebab-case(短横线分隔命名) 定义一个组件时,你也必须在引用这个自定义元素时使用 kebab-case,例 ...
- 数据库及MySQL概述
#什么是数据 用来描述事物的符号记录.可以是数字.文字.图形等,有多种形式,经过数字化之后存入计算机 #什么是数据库 数据库(Database)就是一个用来存放数据库的仓库,是按照一定的数据结构来组织 ...
- 第二章 表与指针Pro SQL Server Internal (Dmitri Korotkev)
聚集索引 聚集索引就是表中数据的物理顺序,它是按照聚集索引分类的.表只能定义一个聚集索引. 如果你要在一个有数据的堆表中创建一个聚集索引,如2-5所示,第一步要做的就是SQL服务器创建另一个根据聚集索 ...
- 何用Java8 Stream API进行数据抽取与收集
上一篇中我们通过一个实例看到了Java8 Stream API 相较于传统的的Java 集合操作的简洁与优势,本篇我们依然借助于一个实际的例子来看看Java8 Stream API 如何抽取及收集数据 ...