google+ 登录API 使用 javascript sdk 快速入门 （图解）
准备工作：
打开Google API 控制台 : https://code.google.com/apis/console
点击 My Project (我的项目)
按照图示流程，您将完成一个google+ 登录API。快来尝试一下吧。
参考API地址：https://developers.google.com/
1、
2、
3、
4、
5、
6、
7、
8、
9、
10、
11、
12、
13、代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
// 加载google js文件
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js?onload=render'; // 后边加onload触发初始化函数
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
// 初始化函数
function render() {
gapi.signin.render('google_login', {
'callback': 'signinCallback',
'approvalprompt': 'auto',
// 这里写入你的App ID
'clientid': '732990474661-01mhrf8i4hlbustv0pv4mnokf2vm50mr.apps.googleusercontent.com',
'cookiepolicy': 'single_host_origin',
'requestvisibleactions': 'http://schemas.google.com/AddActivity',
'scope': 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email'
});
}
// 回调函数
function signinCallback(authResult) {
if (authResult) {
// 是否有错
if(authResult["error"]==undefined){
// 隐藏登录按钮
$("#google_login").hide();
// 加载api
gapi.client.load('plus','v1',function(){
// 传入me即视为自己
var request=gapi.client.plus.people.get({'userId':'me'});
// 回调函数
request.execute(function(profile){
// 取得头像、生日、名字。只有公开的资料才能获取
$("#name").html(profile["displayName"]);
$("#age").html(profile["ageRange"]["min"]);
// sz=200 即图片大小200
$("#head").attr("src",profile["image"]["url"]+"&sz=200");
});
});
// 加载api
gapi.client.load("oauth2","v2",function(){
var request=gapi.client.oauth2.userinfo.get();
request.execute(function(obj){
// 取得登录邮箱并显示
if(obj["email"]){
$("#email").html(obj["email"]);
}
});
});
// 显示登录后的信息
$("#vip").show();
}
}
} // 取消与应用关联的代码
function disconnectUser() {
var revokeUrl = 'https://accounts.google.com/o/oauth2/revoke?token=' + gapi.auth.getToken().access_token;
$.ajax({
type: 'GET',
url: revokeUrl,
async: false,
contentType: "application/json",
dataType: 'jsonp',
success: function(nullResponse) {
// 成功以后隐藏登录信息
$("#vip").hide();
// 显示登录按钮
$("#google_login").show();
alert("退出成功！");
},
error: function(e) {
alert("取消關聯失敗！請到 https://plus.google.com/apps 手动解除！");
window.open("https://plus.google.com/apps");
}
});
}
} </script>
</head>
<body>
<div id="vip" style="font-size:14px;font-weight:blod;color:red;display:none;">
<img id="head" /><br />邮箱：<span id="email"></span><br />年龄：<span id="age"></span>
<br />姓名：<span id="name"></span><br /><a href="javascript:;" onclick="disconnectUser()">退出</a>
</div>
<span id="google_login"><a href="javascript:;">login</a></span>
</body>
</html>
google+ 登录API 使用 javascript sdk 快速入门 （图解）的更多相关文章
- 【JavaScript】快速入门
摘抄地址快速入门 No1: JavaScript严格区分大小写 No2: JavaScript不区分整数和浮点数,统一用Number表示 NaN表示Not a Number,当无法计算结果时用NaN表 ...
- 华为云函数中使用云数据库的JavaScript SDK基础入门
背景介绍 使用云数据库Server端的SDK,此处我以华为提供的官方Demo为例,他们的Demo也已经开源放在了GitHub上,大家需要的可以自行下载. https://github.com/AppG ...
- IdentityServer4实现.Net Core API接口权限认证(快速入门)
什么是IdentityServer4 官方解释:IdentityServer4是基于ASP.NET Core实现的认证和授权框架,是对OpenID Connect和OAuth 2.0协议的实现. 通俗 ...
- MinIO Python Client SDK 快速入门指南
官方文档地址:http://docs.minio.org.cn/docs/master/python-client-quickstart-guide MinIO Python Client SDK提供 ...
- Google 地图 API V3 针对移动设备进行开发
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
- Google第三方网站登录（JavaScript SDK）
官网:https://developers.google.com/identity/sign-in/web/ 一.创建应用 a.去谷歌控制台创建应用 网址:https://accounts.g ...
- ArcGIS API for JavaScript 入门教程[1] 渊源
->对于萌新,你可能需要了解一下这个东西是什么 ->对于已经知道要用这个东西的开发者,你可能需要了解一下它的底层机制 不针对大牛.龟速更新ing. 转载注明出处.博客园&CSDN& ...
- JAVA WEB快速入门之从编写一个基于SpringBoot+Mybatis快速创建的REST API项目了解SpringBoot、SpringMVC REST API、Mybatis等相关知识
JAVA WEB快速入门系列之前的相关文章如下:(文章全部本人[梦在旅途原创],文中内容可能部份图片.代码参照网上资源) 第一篇:JAVA WEB快速入门之环境搭建 第二篇:JAVA WEB快速入门之 ...
- IdentityServer4 中文文档 -15- （快速入门）添加 JavaScript 客户端
IdentityServer4 中文文档 -15- (快速入门)添加 JavaScript 客户端 原文:http://docs.identityserver.io/en/release/quicks ...
随机推荐
- 安装J2EE的SDK报错：could not find the required version of the Java(TM)2 Runtime Environment in '(null)'的解决办法。
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- Shell 命令--文件创建、搜索命令--总结自《Linux Shell 脚本攻略》
(一)文件创建命令 1.touch命令 比如:touch abc命令在本地文件夹中创建了一个名为abc的空文件 2.cp命令 cp命令同意我们把一个文件的内容拷贝到同名或不同名的文件里,复制得到的文件 ...
- [转]Compact Normal Storage for Small G-Buffers
http://aras-p.info/texts/CompactNormalStorage.html Intro Baseline: store X&Y&Z Method 1: X&a ...
- EM算法原理
在聚类中我们经经常使用到EM算法(i.e. Estimation - Maximization)进行參数预计, 在该算法中我们通过函数的凹/凸性,在estimation和maximization两步中 ...
- Android开源git40个App源码
http://www.itbbu.com/1039.html (JamsMusicPlayer)很棒的音乐播放器(new) (F8)日程安排的软件 (Conversations)基于XMPP的 ...
- MySQL参数优化
目前针对MySQL数据库进行了一些参数优化,具体如下: my.ini / my.cnf 参数说明 #使用查询缓存 query_cache_size=100M # ...
- OC最实用的runtime总结，面试、工作你看我就足够了！
前言 runtime的资料网上有很多了,部分有些晦涩难懂,我通过自己的学习方法总结一遍,主要讲一些常用的方法功能,以实用为主,我觉得用到印象才是最深刻的,并且最后两个demo也是MJExtension ...
- L2TP
点击查看详情>> 我的贡献 |退出 L2TP 编辑词条 L2TP是一种工业标准的Internet隧道协议,功能大致和PPTP协议类似,比如同样可以对网络数据流进行加密.不过也有不同之处 ...
- Android 自定义View修炼-仿360手机卫士波浪球进度的实现
像360卫士的波浪球进度的效果,一般最常用的方法就是 画线的方式,先绘sin线或贝塞尔曲线,然后从左到右绘制竖线,然后再裁剪圆区域. 今天我这用图片bitmap的方式,大概的方法原理是: (1)首先用 ...
- 导出EXCEL数据时防止数值变科学计数的办法
网上有很多说法,最简单直接正确的做法是判断一下是否为数值以及长度,然后给单元格加上以下CSS即可: mso-generic-font-family:auto; mso-font-charset:1 ...