准备工作：

打开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. Unsupervised Feature Learning and Deep Learning(UFLDL) Exercise 总结

    7.27 暑假开始后,稍有时间,“搞完”金融项目,便开始跑跑 Deep Learning的程序 Hinton 在Nature上文章的代码 跑了3天 也没跑完 后来Debug 把batch 从200改到 ...

  2. Android ListView分页加载时图片显示问题

    场景:Android ListView需要分页加载,每个item中会有图片,图片又是从网络下载的. 问题:在滑动加载下一页时,上一页的图片明明已经下载完成了,但是无法显示出来. Bug重现: 1,加载 ...

  3. Linux select TCP并发服务器与客户端编程

    介绍:运行在ubuntu linux系统,需要先打开一个终端运行服务端代码,这时,可以打开多个终端同时运行多个客户端代码(注意客户端数目要小于MAX_FD);在客户端输入数据后回车,可以看见服务器收到 ...

  4. My97DatePicker日期控件使用方法

    My97DatePicker是一款网页版非常简单而且好用的日期控件,其实几年前就使用过了,这次再次用到,总结下: 首先去官网下载地址:http://www.my97.net/dp/down.asp 在 ...

  5. arcmap10如果判断一个面是否含洞

    使用字段计算器,使用python !Shape.isMultipart!结果为true就是,false不是

  6. windows下使用redis，Redis入门使用，Redis基础命令

    windows下使用redis,Redis入门使用,Redis基础命令 >>>>>>>>>>>>>>>> ...

  7. 分享4个网址二维码API接口

    说明:把url=后面的网址改成你的,四种任选一.http://pan.baidu.com/share/qrcode?w=150&h=150&url=http://lanyes.org ...

  8. 数据库sharding（scale up to scale out）

    sharding是将一个大数据库按照一定规则拆分成多个小数据库的一门技术. 当我们的应用数据量越来越多,访问量越来越大的时候,我们会作何选择?继续提升数据库服务器的性能还是采用一项技术让数据库平滑扩展 ...

  9. 实现View弹性滑动例子

    弹性滑动原理 将一次大的滑动非为若干次小的滑动,并在一个时间段内完成.有一种顺畅的感觉更-好的用户体验 实现方式很多种,包括用Scroller.动画.延时策略. 使用Handler实现弹性滑动 效果可 ...

  10. UIKit各类概述

    1.UIAcceleration: 被叫做加速事件的一个UIAcceleration类的实例是用来代表即时的三维加速数据.为了接收重力加速度,要注册一个应用应用程序作为一个共享UIAccelerate ...