准备工作：

打开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. 查找无用代码Dead Code的一些心得

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:查找无用代码Dead Code的一些心得.

  2. asp.net Mvc+bootstarp+esayUI+EF 框架（一）

       "框架" 这两个字从通俗的意义来讲就是提高复用性,解耦类之间的关系和方便开发人员开发.   使用的技术也是大家基本现在都用过的,而这个系类我所要讲的内容是什么呢? 框架的基本 ...

  3. android 控件花屏问题

    发现自己的手机上某个界面出现了花屏,某些控件背景被拉伸过多遮住了其他控件,很难看.这种现象高概率出现,分析了下发现:一旦发生这种现象,必然 会打印下面这种log,google了下,这种log应该是硬件 ...

  4. 跟我一起学extjs5(05--主界面上增加顶部和底部区域)

    跟我一起学extjs5(05--主界面上增加顶部和底部区域)         这一节为主界面加一个顶部区域和底部区域. 一个管理系统的界面能够粗分为顶部标题部分.中间数据展示和处理的部分.底部备注和状 ...

  5. eclipse设置快捷键sysout+Alt+/后出System.out.println！亲測可用！

    曾经一直用myeclipse,没有这方面的顾虑,如今换到了eclipse,非常多要自己设置了,比方非常多快捷键. 最经常使用的,执行到sysout ,eclipse总是不自己主动补全,非常是恼火!!! ...

  6. Cisco 交换机与路由器故障处理方法分享

    一.网络的复杂性 一般网络包括路由.拨号.交换.视频.WAN(ISDN.帧中继.ATM.…).LAN.VLAN.… 二.故障处理模型 1. 界定问题(Define the Problem) 详细而精确 ...

  7. Java基础知识强化之集合框架笔记71：模拟斗地主洗牌和发牌并对牌进行排序的案例

    1. 模拟斗地主洗牌和发牌并对牌进行排序的原理图解: 2. 代码实现: 思路: • 创建一个HashMap集合 • 创建一个ArrayList集合 • 创建花色数组和点数数组 • 从0开始往HashM ...

  8. Java并发——同步工具类

    CountDownLatch  同步倒数计数器 CountDownLatch是一个同步倒数计数器.CountDownLatch允许一个或多个线程等待其他线程完成操作. CountDownLatch对象 ...

  9. 前端编辑器 之 sublime-text3

    工善欲其事,必先利其器 作为一名前端工程师,一定要有熟练,便捷的开发工具,虽然自己一直使用神一样的编辑器,但是却没有使用的像神一样,于是再次深入了解下这款工具 下载sublime-text 去官网下载 ...

  10. c中计时的几种方法

    C计时的几种方法说明及例程 1. 使用clock() 函数 头文件:<time.h> clock()函数,返回“自程序启动到调用该函数,CPU时钟的计时单元数(clock tick)” 每 ...