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 ...
随机推荐
- 在.net Core 中像以前那样的使用HttpContext.Current
今晚在学习.net Core 的使用 拿来以前项目进行改造最简单的问题就是怎么做到让httpcontext 和以前兼容 ,折腾的很久 终于搞定,纪录一下 .net core中使用了无处不在的注入,看了 ...
- cocos2d-x 的CCObject与autorelease 之深入分析
转自: http://blog.csdn.net/honghaier/article/details/8160519 CCObject.h: #ifndef __CCOBJECT_H__ #defin ...
- Linux 内核进程管理之进程ID 。图解
http://www.cnblogs.com/hazir/tag/kernel/ Linux 内核进程管理之进程ID Linux 内核使用 task_struct 数据结构来关联所有与进程有关的数 ...
- web工程中spring+ibatis的单元测试--转载
为了保证代码的正确,软件的质量,单元测试几乎是每个程序员都要面临的工作了;而开发中大部分的工作都涉及数据库的操作,也就是平时经常可以看到的DAO了;由于是对数据库的操作,就必然有事务的问题了;如果是启 ...
- flex学习网站地址
http://hacker47.iteye.com/blog/213887 http://www.cuplayer.com/player/PlayerCode/Flex/ http://bbs.9ri ...
- c#实现几种排序方法
插入排序 1.简介 插入排序(Insertion Sort)的算法描述是一种简单直观的排序算法.它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并插入.插入排序 ...
- thinkphp中关于rbac的两个session
最近在做单点登录,需要session由sso的client生成.所以研究了下RBAC的类的代码. 有了这两个seesion就可以用rbac进行权限验证 $_SESSION[C('ADMIN_AUTH_ ...
- "只能在执行Render()的过程中调用RegisterForEventValidation" 解决方案
开发中遇到令人蛋疼的问题: 只能在执行Render()的过程中调用RegisterForEventValidation 当出现的异常的提示: 异常详细信息: System.InvalidOperati ...
- 20151210 Jquery 学习笔记 AJAX 进阶
一．加载请求 在 Ajax 异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的问题.而超 过一定时间的请求,用户就会变得不再耐烦而关闭页面.而如果在请求期间能给用户一些提 示,比如:正在努力加 ...
- 各种排序算法及c语言实现
插入排序O(n^2) 冒泡排序 O(n^2) 选择排序 O(n^2) 快速排序 O(n log n) 堆排序 O(n log n) 归并排序 O(n log n) 希尔排序 O(n^1.25) 1.插 ...