踩坑-helloJs实现google、facebook、twitter等第三方登录

你的名字 2022-03-26 07:31 489阅读 0赞

在项目中我们经常会用到第三方登录，但是每个第三方都有自己的api，[hellojs][]解决了这一个难题，上手很简单，它把国际上的一些登录api都封装在了一起，但是必须要注意里面的一些坑，**代码片段注释**和**文章粗体**请仔细阅读。

具体可按照官网的步骤，这里就不多介绍了，也可参考别人的范例，[点击前往][Link 1]，我这里只阐述核心代码：

第一步init（每个授权应用都有对应的一个id，这里redirect\_uri是回调的成功返回页面）：

hello.init({
            facebook: loginId.facebook,
            twitter: loginId.twitter,
            google: loginId.google
          },{ redirect_uri: "/login" });

第二步就是调用登录，也是比较重要的一步，我们这里登录需要第三方的**access\_token**和用户的**openid**：

//params是登录需要的参数 response_type 请求成功的相应数据    scope调用api返回的范围
    //params = { response_type: "token id_token", scope: "openid email" }; //google
    //params = { scope: "email publish" }; //facebook
    //params = { response_type: "token id_token", scope: "openid email" }; //twitter
    hello('facebook').login(params).then(function(res) {//'facebook'登录，该字段可以换成你想要某个第三方应用登录的字段
    	alert('You are signed in to Facebook');
        //res.authResponse.access_token即为后台所需要的token
        //res.authResponse.id_token   google登录所需要的token
    }, function(e) {
    	alert('Signin error: ' + e.error.message);
       //一般出错均为开发者平台没有配好设置
    });
    
    
    
    //除了token如需校验id，就要调用api,查询个人信息获取id
    hello(s).api("me").then(function(json) {
    //json.id   即为所需要的openId，hellojs封装的时候只是把openid换了一个名而已
    //json.id_str   twitter比较特殊，我们这里它取得是id_str的值
    })

**1调用是很简单的，要绝对确保配置正确，否则会有错误的弹窗（init的id不匹配，回调的url页面不正确，权限没开启等等原因都会引起以上错误）**

**2params参数的传递也是非常重要的，因为直接login成功以后的返回参数可能不能满足你所需要的 [点击查看配置参数][Link 2]**

**response\_type   **简单的说就是登录成功的相应数据类型

**scope：**是后期调用个人api需要的数据

**大坑**\-----------如上图代码，我们的后台需要拿id和token进行校验（一定要和后台仔细调试沟通，因为第三方有多个类型的token，不确定你要的就是那一个），google登录**response\_type**多传了一个**id\_token**，登录成功的数据就会多一个**id\_token**的字段，它也有**access\_token**,注意千万不要传错了，否则可能一直校验不通过。。。。

**大坑**\-----------如上图代码，在拿用户**id**的时候，twitter拿的是**id\_str**，并非id，但是这两个id极其相似，我们之前也是没有区分出来，网页跟app数据对比的时候才找到原因。

所有的第三方登录都是让你建一个应用，然后配置你自己的项目，以及登录成功之后回调地址什么的，只是要

**注意获取个人信息google要获取api服务，twitter也比较特殊，这两个坑也是你成功登录之后取字段的时候要注意的，其他调不起来第三方或者吊起之后回调页面不对，请在对应的开发者平台仔细检查，这时候只可能是配的不对，不会是代码问题，需要注意你如果是vue开发，url中的\#是无法进行回调的**。

[hellojs]: http://adodson.com/hello.js/
[Link 1]: https://www.jianshu.com/p/03c7d3a012ef
[Link 2]: http://adodson.com/hello.js/#hellologin