关于开发Google+以及Facebook第三方登录

Posted on by

简述

最近项目中有关于第三方授权登陆的需求，第三方Facebook以及Google +登录。

正好这几天把这个需求做得差不多了，收个尾，作为一个这方面之前基本从未涉及的小白，总结下开发流程以及过程中遇到的一些问题。希望能对大家有所帮助。

基本上，目前互联网上的涉及到第三方登录采用的都为OAuth认证方式，相关原理以及实现方法相关的可以网上搜索查看。不过涉及到Facebook以及Google +的登陆，最大的问题是这两个网站在墙外，想FQ找资料比较费劲，奈何国内这方面的资料也不是很齐全，翻到的官方的文档又全是英文的，阅读无能~

第三方登陆简单可以分为以下几个步骤，分别是：获得第三方登陆许可认证；根据规范添加页面登录样式和js实现，跳转到第三方登陆页面登陆并获取授权后，返回原指定页面（或请求）；后台对登录信息进行校验，并获取对应第三方登陆用户的信息；将第三方用户信息与本系统用户进行关联。

下面就以上几个步骤的一些关键信息，或者说是我开发当中遇到的问题做一下简要的记录。因为Facebook以及Google +第三方登陆都采用的是Auth2技术，因此只会在具体实现不同的地方单独说明。理解有误的地方，或者是没有说全的地方，还请各位谅解~

一 获得第三方登陆许可认证

在获取许可上，需要在对应的开发平台上申请登陆接入许可，基本上你可能需要准备以下几样东西：

  • 你当前需要接入第三方登陆的网址域名（用于第三方平台校验是否这个登录请求来自于你的网站本身）;
  • 给用户展示的网站logo和文字（用于在第三方登陆的时候给用户直观的展（装）示（逼））;
  • 登陆成功后，跳回的URL（用于获取并使用登陆用户的相关信息）;

申请成功之后，第三方平台会提供给你对应的AppID以及AppSecret，用以后台进行额外的操作。基本上操作按照官方api的顺序一步一步来就可以了惹，这里就不再赘述了~（请掌握基本的英语阅读能力…）

二 根据规范添加页面登录样式和js实现

简单点讲就是在页面上添加登录Button，并通过点击触发跳转到第三方的请求。Google+以及Facebook在大体上逻辑一致，在细节上实现略有不同。

       Google+登录。会引用自己封装的js（<script src=”https://apis.google.com/js/platform.js” defer async=”true”></script>）来实现登录操作（gapi），并提供了多种登陆实现方案可供选择。这里贴一下，我目前项目中实现的方案，仅供参考。

1.在对应页面引用Google第三方js。https://apis.google.com/js/api:client.js（这里的js其实和官方最新的platform.js内容是一样的…吧~）

2.页面定义Google+登录的按钮样式（这里谷歌有内置的规范按钮样式可以直接调用，不用自己定义）

20190404153828（id=”googleLogin”）

3.根据引用的第三方js提供的api，作如下初始化操作：

0
1
2
3
4
auth2 = gapi.auth2.init({
client_id: clientID,    //第一步申请的时候，提供给你的appid
cookiepolicy: 'single_host_origin',
scope: 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email'    //需要获取的用户信息领域
});

4.初始化后，接着需要对你定义的按钮绑定鼠标点击事件，作如下操作：

0
auth2.attachClickHandler('googleLogin',{},startApp.onSuccess,startApp.onFailure); //googleLogin为按钮的ID

5.做完这些之后就等用户点击（上钩）啦~这里需要注意下startApp.onSuccess以及startApp.onFailure方法，这里是在谷歌成功登陆之后的回调函数。在onSuccess里第三方已经登录并返回，我们已经可以根据接口api获取想要的用户信息了，而在onFailure里因为登录失败，我们可以自定义一些提示信息。

6.等等！上面代码中的变量都是干嘛用的啊喂~别慌，下面附上完整的js！项目开发使用了RequireJs，代码仅供参考！

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
define("glogin", ['google', 'jquery'], function(google, $) {
 
    var startApp = {};
    var googleUser = {};
 
    var clientID = "#your AppID#";
 
    startApp.onSuccess = function(googleUser) {
        var profile = googleUser.getBasicProfile();
        var authProfile = googleUser.getAuthResponse();
 
        var userName = profile.getName();
        var userImage = profile.getImageUrl();
        var userEmail = profile.getEmail();
        var idToken = authProfile.id_token;
 
        var flag = true;
 
        if (userEmail && idToken) {
            $.ajax({
                url: "/action.do",
                data: {
                    userName: userName,
                    firstName: userName,
                    lastName: userName,
                    email: userEmail,
                    idToken: idToken,
                    userType: '3'
                },
                dataType: "json",
                tyep: "post",
                success: function(data) {
                    if (data.success == true) {
                        window.location.reload(true);
                    } else {
                        flag = false;
                    }
                }
 
            });
        }
 
        if (!flag) {
            alert.alert("XXX.");
        }
    };
 
    startApp.onFailure = function(error) {
        console.log(error);
        alert.alert("XXX.");
    };
 
    startApp.init = function() {
        gapi.load('auth2', function() {
            auth2 = gapi.auth2.init({
                client_id: clientID,
                cookiepolicy: 'single_host_origin',
                scope: 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email'
            });
 
            auth2.attachClickHandler('googleLogin', {}, startApp.onSuccess, startApp.onFailure);
        });
    };
 
    return startApp;
});
 
require(["glogin"], function(main) {
    main.init();
});

       Facebook登录。同样会调用自己封装的js（<script src=”https: //connect.facebook.net/en_US/sdk.js” defer async=”true”></script>）来实现登录操作（FB），实现步骤基本同Google+登陆类似。

1.在对应页面引用Facebook第三方js。https: //connect.facebook.net/en_US/sdk.js;

2.页面定义Facebook登录的按钮样式

20190404154043（id=”fblogin”）

3.根据引用的第三方js提供的api，作如下初始化操作：

0
1
2
3
4
5
FB.init ({
    appId      : '#your AppID#',
    cookie     : true,
    xfbml      : true,
    version    : 'v2.4'
});

4.初始化后，接着需要对你定义的按钮绑定鼠标点击登录事件，作如下操作：

0
1
2
3
4
$("#fblogin").click(function (){
    FB.login(function(response) {
        statusChangeCallback(response);  //登录回调函数
    },{scope: 'email'});  //需要获取的信息scope
});

5.statusChangeCallback为登录回调函数，需要在里面做下登陆返回的相关操作：

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var statusChangeCallback = function (response){
    if (response.status === 'connected') {
        var accessToken = response.authResponse.accessToken; //取得 accessToken
 
        FB.api('/me?fields=name,first_name,last_name,email', function(response) { // /me为API指定的调用方法，用于获取登陆用户相关信息
            if(response.email!=null){
                $.ajax({
                    url:"/action.do",
                    data:{
                        userName:response.name,
                        firstName:response.first_name,
                        lastName:response.last_name,
                        email:response.email,
                        idToken:accessToken,
                        userType:'2'
                    },
                    dataType:"json",
                    tyep:"post",
                    success:function(data){
                        if(data.success == true){
                            window.location.reload(true);
                        }
                    }
                });
            }else{
                alert("XXX.");
            }
        });
    }
};

更详细的接口以及实现请参考最下面提供的官方API链接！多读读就懂了！

三 后台对登录信息进行校验，并获取对应第三方登陆用户的信息

在用户正确的登录第三方平台并进行授权之后，调用返回函数，这时需要对用户的登录信息和状态进行确认！这里非常关键，因为要确保用户的确是从对应第三方平台登录，而不是随随便便敲一个URL就能让请求通过了。所以我们需要第三方平台提供的access_token值，根据约定好的校验规则进行校验，放行校验通过的登陆请求。

由于验证信息涉及到app的隐私信息，以及确保验证不会被人为的篡改，因此需要在服务器后端进行token的验证。

参见第二条相关js实现，在第三方调用返回函数之后，代码中会进行ajax请求，调用后台的对应接口 /action.do，来在后台进行access_token的正确性判断。

后台会根据登陆的第三方类型，进行https请求验证，来确保用户登陆的信息无误。

Google+的token验证地址：https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=XXX

Google+的token验证通过返回的Json格式（校验aud是否与后台保存的AppId匹配）：

0
1
2
3
4
5
6
7
8
9
10
{
"iss": "https://accounts.google.com",
"sub": "110169484474386276334",
"azp": "1008719970978-hb24n2dstb40o45d4feuo2ukqmcc6381.apps.googleusercontent.com",
"email": "billd1600@gmail.com",
"at_hash": "X_B3Z3Fi4udZ2mf75RWo3w",
"email_verified": "true",
"aud": "1008719970978-hb24n2dstb40o45d4feuo2ukqmcc6381.apps.googleusercontent.com",
"iat": "1433978353",
"exp": "1433981953"
}

Facebook的token验证地址（%7C为encode的 ‘|’符号）：https://graph.facebook.com/debug_token?access_token={Your AppId}%7C{Your AppSecret}&input_token=XXX

Facebook的token验证通过返回的Json格式（”is_valid”: true）：

0
1
2
3
4
5
6
7
8
9
10
11
12
13
{
    "data": {
        "app_id": 000000000000000,
        "application": "Social Cafe",
        "expires_at": 1352419328,
        "is_valid": true,
        "issued_at": 1347235328,
        "scopes": [
            "email",
            "publish_actions"
        ],
        "user_id": 1207059
    }
}

因为这里后台采用JAVA开发，在验证地址为HTTPS请求验证的时候，后台利用HttpClient请求的时候涉及到证书验证的问题，所以这里采用了 @rongyongfeikai2同学的方法：《JAVA利用HttpClient进行POST请求（HTTPS）》，有需求的可以参考借鉴。

后台根据对应官方的api文档的token校验方式，对获取到的token进行校验。如果请求的验证地址返回的信息为校验通过，则可以进行后面的操作了。

四 将第三方用户信息与本系统用户进行关联

在进行前端js请求的时候，对应平台的api接口会获取到用户的信息（参照上述代码）。与此同时，在进行用户token校验的时候，返回的对应json对象中也会包含对应的用户信息，这些信息可以在后台进行解析和获取，详细的数据结构可以参考官方文档。为了确保用户信息不会被中途截断篡改，可以在后台进行数据获取。

在获取到第三方登录用户的信息之后，就可以与本系统的账户进行匹配操作了。之后的操作存在几种不同的方式类型，对于本系统来讲，采用的是以下鉴定流程。

20190404154228

后叙

以上为目前我们系统中的第三方登录的基本实现方案，也许并不太完整（毕竟基本上之前没怎么涉及过…），但是希望其中的涉及到的点能够帮助到大家，也希望大家能指出写的不对的地方，并多多包涵哈。

PS：第一次写博客，不知道该怎么下手，明明脑子里想的很多，一写动笔就不知道该写什么好惹……

以下为开发过程中参考的文章地址，有需求的朋友可以自行点击查阅！

Google+登录api：https://developers.google.com/identity/sign-in/web/devconsole-project

Google+自定义button：https://developers.google.com/identity/sign-in/web/build-button

Google+ token验证：https://developers.google.com/identity/sign-in/web/backend-auth

Facebook登录api：https://developers.facebook.com/docs/facebook-login?locale=zh_CN

Facebooktoken验证 api：https://developers.facebook.com/docs/facebook-login/access-tokens/debugging-and-error-handling

Facebook token验证解决方案：http://stackoverflow.com/questions/19359868/how-would-you-perform-debug-token-call-using-facebook-php-sdk

后台https地址请求解决方法：http://blog.csdn.net/rongyongfeikai2/article/details/41659353

原文地址：https://www.cnblogs.com/lngg057/p/5020192.html