准备工作：

打开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. XML 语法规则

    转摘自:http://www.w3school.com.cn/xml/xml_elements.asp XML 语法规则 XML 文档包含 XML 元素. XML 的语法规则很简单,且很有逻辑.这些规 ...

  2. [caffe]深度学习之图像分类模型VGG解读

    一.简单介绍 vgg和googlenet是2014年imagenet竞赛的双雄,这两类模型结构有一个共同特点是go deeper.跟googlenet不同的是.vgg继承了lenet以及alexnet ...

  3. android点滴之标准SD卡状态变化事件广播接收者的注冊

    眼下最完整的,须要注冊的动作匹配例如以下: IntentFilter intentFilter = new IntentFilter(Intent.ACTION_MEDIA_MOUNTED); int ...

  4. [AngularJS] angular-formly: expressionProperties

    angular-formly provides a very simple API to dynamically change properties of your field (like disab ...

  5. core dump + LINUX 内核系列博客

    参考:http://www.cnblogs.com/ahuo/category/72819.html http://blog.csdn.net/tenfyguo/article/details/815 ...

  6. ACE的安装方法

    ACE的安装方法 下载ACE --1  ACE的主页以及下载链接 http://www.cs.wustl.edu/~schmidt/ACE.html 安装ACE --1  将ACE-5.5.tar.g ...

  7. 【转】coco2d-x 纹理研究

    1.通常情况下用PVR格式的文件来进行图片显示的时候,在运行速度和内存消耗方面都要比PNG格式要快和小.一般情况下PVR消耗的内存比PNG消耗的内存小25%左右.PVR格式可以用ZWoptex导出.P ...

  8. PHP第四章数组2

    $str =array("dd"=>"d","dc"=>"ds","dd"=>&q ...

  9. mac install php dev

    环境开发配置 mysql 下载mysql压缩包.tar.gz 解压 mv mysql_5.7.10_osx... /usr/local/mysql sudo chown -R root:wheel / ...

  10. skynet是什么

         云风的skynet,定义为一个游戏服务器框架,用c + lua基于Actor模型实现.代码极其精简,c部分的代码只有三千行左右.      整个skynet框架要解决的核心问题是:把一个消息 ...