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

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

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

第一步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成功以后的返回参数可能不能满足你所需要的点击查看配置参数

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实现google、facebook、twitter等第三方登录相关推荐

hellojs实现google+facebook登陆
hellojs实现google+facebook登陆传送门:hellojs in npm
php 微信第三方登录demo,第三方登录 - 快速接入微信、QQ、微博等第三方登录方式 – 基于ThinkPHP和Bootstrap的极速后台开发框架...
此插件基于FastAdmin和Thinkphp5开发的第三方登录插件,可用于对接微.微博.QQ等第三方登录,目前CMS中的小程序账号登录绑定就是基于此插件开发,在使用CMS中的小程序登录功能之前请务必 ...
谷粒商城笔记+踩坑（17）——【认证模块】登录，用户名密码登录+微博社交登录+SpringSession+xxl-sso单点登录
导航: 谷粒商城笔记+踩坑汇总篇目录 5. 用户名密码登录 5.1[认证模块]登录业务 5.1.1 模型类,接收用户名密码 5.1.2 feign客户端新增登录功能 5.1.3 LoginContr ...
谷粒商城笔记+踩坑（19）——订单模块构建、登录拦截器
导航: 谷粒商城笔记+踩坑汇总篇目录 1.页面环境搭建 1.1 动静分离 1.2 hosts添加域名映射 1.3 配置网关和nacos 1.4 引导类开启注册发现和feign客户端 1.5 thym ...
一个Github项目搞定微信、QQ、支付宝等第三方登录
今日推荐推荐 7 个牛哄哄 Spring Cloud 实战项目推荐一个非常火爆的电商开源项目! 推荐两个项目! 第三方登录是目前非常常用的登录方式,引入第三方登录的方式可以大大的降低开发的成本,同 ...
SpringCloud微服务实战——搭建企业级开发框架（四十一）：扩展JustAuth+SpringSecurity+Vue实现多租户系统微信扫码、钉钉扫码等第三方登录
前面我们详细介绍了SSO.OAuth2的定义和实现原理,也举例说明了如何在微服务框架中使用spring-security-oauth2实现单点登录授权服务器和单点登录客户端.目前很多平台都提供了单 ...
IOS-海外版授权分享推送统计 Google FaceBook Twitter Instagram
目录备注 Google Google分享 Google推送 FaceBook FaceBook分享 Twitter Twitter分享 Instagram Instagram分享 SDK下载 UIW ...
分享google+facebook+twitter(Eclipse)
最近做游戏分享功能,遇到了这3大平台的分享,网上的介绍好多,但也不全,没有做到很详细的分享图片,文字,链接的介绍,所以我结合了一下,自己封装了3大平台的分享. 一,google+分享不需要申请,直接 ...
关于使用QQ、新浪微博、腾讯微博等第三方登录网站的开发过程（一）
(一). 实现QQ登录自己开发的网站首先需要在http://connect.qq.com/申请一个网站应用的 APP ID 和APP KEY.申请流程如下: 1. 登录QQ互联之后,注册成为开发者, ...

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

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

最新文章

热门文章