google+ 登录API 使用 javascript sdk 快速入门 （图解）

准备工作：

打开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>

 

 

posted @ 2014-05-06 15:47  辰阳  阅读(6105)  评论(1)  编辑  收藏  举报