准备工作：

打开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. 拼接<a>标签相关属性

    <s:iterator value="#session.funcs" id="sonbean"> <s:if test="%{#so ...

  2. oracl使用DataBase Configuration Assistant创建、删除数据库

    原文:oracl使用DataBase Configuration Assistant创建.删除数据库 可以使用DataBase Configuration Assistant来创建一个心得数据库.Da ...

  3. 如何停止IIS

    当一台计算机同时安装了IIS服务器和apache服务器的时候,需要运行其中的一个服务器就需要将另一个服务器停止,那么如何停止IIS服务器: 双击[world wide web publishing s ...

  4. mongodb地理位置索引

    初始化集合(经度在前,纬度在后) ? 1 2 3 mongos> db.checkins.insert({ "_id" : "101", "lo ...

  5. 在redhat6下配置yum源的使用

           有好多朋友使用linux redhat版本是不是还在为rpm包的安装而烦恼,yum工具的使用无意是解决这一难题的好工具,他可以解决包安装中依赖问题,但是对于redhat版本的系统来说如果 ...

  6. iOS项目进行测试的配置

    一.首先,注册苹果开发者账号并登陆https://developer.apple.com/account/#/overview/ZFBE9NJZM6, 二.创建测试证书

  7. css制作小三角

    视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top ...

  8. mysql优化概析

    优化从几个方面来说: 表结构设计 适当索引(主键 普通 唯一 全文组合) mysql本身配置 硬件配置 SQL语句优化 存储过程 分表 分区 读写分离 清理垃圾数据

  9. 简单的实现QQ通信功能（五）

    第五部分:聊天界面的设计及代码 一:效果图及界面设计 1. 效果图: 2. 界面设计: (1)左上角显示朋友的头像和“某某正在和某某聊天”. (2)中间的聊天窗口用了一个ListView,视图用详细信 ...

  10. Ubuntu 14.04 忘记用户密码(备忘)

    参考文章地址:www.linuxidc.com/Linux/2013-11/92236.htm 重启电脑 开机就会进入一个Grub引导页面,选择 "Ubuntu 高级选项"之后,按 ...