准备工作：

打开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 快速入门 （图解）的更多相关文章

  1. 【JavaScript】快速入门

    摘抄地址快速入门 No1: JavaScript严格区分大小写 No2: JavaScript不区分整数和浮点数,统一用Number表示 NaN表示Not a Number,当无法计算结果时用NaN表 ...

  2. 华为云函数中使用云数据库的JavaScript SDK基础入门

    背景介绍 使用云数据库Server端的SDK,此处我以华为提供的官方Demo为例,他们的Demo也已经开源放在了GitHub上,大家需要的可以自行下载. https://github.com/AppG ...

  3. IdentityServer4实现.Net Core API接口权限认证(快速入门)

    什么是IdentityServer4 官方解释:IdentityServer4是基于ASP.NET Core实现的认证和授权框架,是对OpenID Connect和OAuth 2.0协议的实现. 通俗 ...

  4. MinIO Python Client SDK 快速入门指南

    官方文档地址:http://docs.minio.org.cn/docs/master/python-client-quickstart-guide MinIO Python Client SDK提供 ...

  5. Google 地图 API V3 针对移动设备进行开发

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  6. Google第三方网站登录（JavaScript SDK）

    官网:https://developers.google.com/identity/sign-in/web/ 一.创建应用 a.去谷歌控制台创建应用     网址:https://accounts.g ...

  7. ArcGIS API for JavaScript 入门教程[1] 渊源

    ->对于萌新,你可能需要了解一下这个东西是什么 ->对于已经知道要用这个东西的开发者,你可能需要了解一下它的底层机制 不针对大牛.龟速更新ing. 转载注明出处.博客园&CSDN& ...

  8. JAVA WEB快速入门之从编写一个基于SpringBoot+Mybatis快速创建的REST API项目了解SpringBoot、SpringMVC REST API、Mybatis等相关知识

    JAVA WEB快速入门系列之前的相关文章如下:(文章全部本人[梦在旅途原创],文中内容可能部份图片.代码参照网上资源) 第一篇:JAVA WEB快速入门之环境搭建 第二篇:JAVA WEB快速入门之 ...

  9. IdentityServer4 中文文档 -15- （快速入门）添加 JavaScript 客户端

    IdentityServer4 中文文档 -15- (快速入门)添加 JavaScript 客户端 原文:http://docs.identityserver.io/en/release/quicks ...

随机推荐

  1. JDK之jstat的用法

    http://www.51testing.com/html/92/77492-203728.html jstat的用法 用以判断JVM是否存在内存问题呢?如何判断JVM垃圾回收是否正常?一般的top指 ...

  2. Ubuntu下开启root登陆

    亲手安装过Ubuntu的童鞋都知道,默认安装只会添加一个普通用户名和密码,而超级用户权限则是利用sudo命令来执行.在Ubuntu下使用root登陆或者在shell中用su命令切换到root时会提示错 ...

  3. VC中获取窗体句柄的各种方法

    AfxGetMainWnd AfxGetMainWnd获取自身窗体句柄 HWND hWnd = AfxGetMainWnd()->m_hWnd; GetTopWindow 函数功能:该函数检查与 ...

  4. careercup-递归和动态规划 9.5

    9.5 编写一个方法,确定某字符串的所有排列组合. 类似leetcode:Permutations 解法: 跟许多递归问题一样,简单构造法非常管用.假设有个字符串S,以字符序列a1a2a...an表示 ...

  5. UITableview自定义accessory按钮和ImageView大小一致

    if (cell == nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseI ...

  6. Calendar 类的应用

    上一篇 说的 Date 类 最主要的作用就是获得当前时间,同事这个类里面也具有设置时间以及一些其他的功能,但是由于本身设计的问题,这些方法却遭到众多的批评,不推荐使用,要推荐使用Calendar 类进 ...

  7. (转载)重温SQL——行转列，列转行

    原文地址:http://www.cnblogs.com/kerrycode/archive/2010/07/28/1786547.html 行转列,列转行是我们在开发过程中经常碰到的问题.行转列一般通 ...

  8. Atom编辑器入门到精通(二) 插件的安装和管理

    在本节中我们会学习如果安装和使用插件插件是Atom中一个非常重要的组成部分,很多功能都是以插件形式存在的.比如上篇文章中提到的目录树和设置等窗口都是通过默认安装的插件来实现的. 查看已安装的插件 打开 ...

  9. Linux理念

    1.小即是美 2.让程序只做好一件事 3.可移植性比效率更重要 4.一切即文件——使用方便而且吧硬件作为文件处理是安全的 5.使用shell脚本来提高效率和可移植性 6.避免使用可定制性低下的用户界面 ...

  10. CSS样式表介绍

    一.    CSS中的样式选择 1)内样式(内联样式) style=””; 2)内嵌样式 <style type="text/css"></style> 3 ...