2021-02-03 分类: 网站建设
什么是联合登录
因为公司产品的发展,会与第三方的一些商户进行对接,商户APP提供入口,进入我们的H5页,从而提供服务。
而商户希望用户在其APP进行账户登录后,进入H5页不再进行登录,所以我们的H5需要拿到用户在商户的账户的标识id(暂时称之PartnerID),然后与我们的产品的账户标识id(暂时称之H5ID)进行一个关联,这样在用户登录APP后,我们能够通过PartnerID去查询关联的H5ID以获取账户信息,这样就可以保持登录的同步了。
解决方案
上述描述中的一个关键点是:如何拿到PartnerID
获取PartnerID大体有以三种方案:
方案1:授权回调式,商户提供授权页面,H5页面需要登录时,先进入商户提供的授权页,由用户同意授权,进而获取PartnerID 方案2:APP接口式,商户APP存在nativeAPI,H5页面调用nativeAPI以获取PartnerID 方案3:凭证解密式,商户APP在H5的url的query上添加加密字符串,H5页面取之解密后获取PartnerID
基本说遇到的联合登录大多以上三种之一,例如微信授权登录,可以视微信为商户,微信的unionid即PartnerID,微信使用的就是方案1。
另外实方案1是方案2的一个完善,商户提供的授权页上其实使用了方案2来获取PartnerID,这样可以保证自己APP的nativeAPI是由自己的H5页所调用,进而增加安全性。
代码就不贴了,详细步骤如下:
独立代码
方案有三种,但有些代码是必须得写的,总结如下:
module.exports = { id: 'a', // 商户名称 type: 1, // 接入方案类型}复制代码
这些根据商户不同代码也是不同的,做不到统一解决方案,so,老老实实写吧。
不过有些代码可以做成通用的,开发完成则后续接入可以不用再管了。
通用代码
方案1:授权回调式
说是最复杂的方案,其实通用代码就两个路由:
前往授权 /toAuth:前往需要登录的页面时(假设地址为A),则先前往此路由,此路由接收一个回调地址(A)并存储在 session 中,然后此路由进入商户授权页(此时调用独立代码中进入商户授权页的函数)
授权回调 /authBack:必须提供给商户的回调路由,当商户授权页面中用户授权后,会返回此路由,用户的token亦会在query上传递回来,通过token去换取PartnerID,即执行联合登录的3、4步后(此时调用独立代码中调用商户API获取PartnerID的函数),则取出session中的回调地址(例子中的A)并进入
方案2:APP接口式
这个方案的通用代码其实就是一个前端函数:
根据商户调用其特定的独立函数:前端能得到PartnerID,所以在需要登录之前,先调用该商户的独立代码中的调用nativeAPI获取PartnerID的函数,得到PartnerID,再执行联合登录的3、4步,最后完成登录操作。
方案3:凭证解密式
这个方案最简单,只是在入口的路由加一个操作:
存储加密凭证字符串:在入口路由上,将加密凭证存入session中,在需要登录前,则调用该商户的独立代码中的解密字符串得到PartnerID的函数,得到PartnerID,再执行联合登录的3、4步,最后完成登录操作。
查询接口
联合登录的第3步中,会存在两个api,这些由我们自己开发,分别是:
其他比较特殊的登录
静默登录
在上面的过程中,中间会有一层绑定的操作,此时需要内部H5页进行一次登录,而这样会出现两次登录的情况:APP登录后,首次进入H5,H5中登录并绑定。
所以,有些商户有这样的需求:APP已登录,则在H5内部无需登录,即首次进入H5也无需在H5进行登录绑定就可以有登录状态。
这种样的解决方案其实很简单,在查询的两个接口中,存在查询绑定账户的接口,这个接口的功能是:
如果需要满足上述需求,实际是这个接口永远返回登录信息,包括首次登录,如此简单即可。
因为在调用接口时,会传递商户名称和PartnerID,接口开发人员可以根据商户名进行操作。
例如:平台cmb需要静默登录,则后端开发人员在查询绑定账户接口接收参数 partnerName,若 partnerName === 'cmb',则静默注册一个账号并登录,返回登录信息,其余的则正常流程。
而对于多个商户都有此类需求,可以维护一个 array ,符合array内的条目,进行进行静默注册并登录,不符合则走正常的步骤。
快应用的嵌入
快应用页可以获取用户在开放平台unionid,在进行嵌入开发时,有时候需要拿到unionid和H5的账户进行绑定。
首先,快应用提供了API以获取用户唯一身份标识,其次,快应用本身应该视为一个轻量APP的开发,而快应用也提供了一些方法,我们可以封存一些方法和接口,由H5以nativeAPI的方式进行调用和开发,故而快应用的联合登录应该是方案2:APP接口式。
封装
web组件可以使用:
内部H5可以使用:
故可以在web组件监听 onmessage ,得到网页 system.postMessage 发送的登录请求时,在快应用层去调用登录API,得到PartnerID后,再由web组件的 postMessage 将PartnerID传递给内部H5页面,而H5则得到PartnerID,走正常的联合登录流程。
文章标题:H5嵌入APP的联合登录
链接URL:https://www.cdcxhl.com/news/98966.html
成都网站建设公司_创新互联,为您提供微信公众号、服务器托管、面包屑导航、微信小程序、搜索引擎优化、外贸建站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联
猜你还喜欢下面的内容