论H5嵌入APP的联合登陆的解决方案

什么是联合登陆

由于公司产品的发展，会与第三方的一些商户进行对接，商户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 > 3

越复杂天然越安全，因此，安全性也就是以上的排序。

---

联合登陆的详细步骤

代码就不贴了，详细步骤以下：

• 1：准备进入一个H5页面，它须要登陆方可访问
• 2：在进入以前先取PartnerID，商户APP未登陆则进行APP登陆，再返回PartnerID
• 3：获得PartnerID，去查询相应的H5ID，有则存储帐户登陆信息进入第5步，无关联则进入下一步
• 4：H5登陆页进行登陆，登陆后获得H5ID，将H5ID与PartnerID进行绑定，而且存储帐户登陆信息
• 5：此时已登陆，进入页面中

独立代码

方案有三种，但有些代码是必须得写的，总结以下：

• 配置文件：由于商户不一样，则接入类型和配置参数不一样，假设有一个 shanghu.js ，以下代码：

module.exports = { id: 'a', // 商户名称 type: 1, // 接入方案类型 } 

• 方案1：“调用进入商户受权页”和“调用商户API获取PartnerID”的两个函数
• 方案2：“调用nativeAPI获取PartnerID”的函数
• 方案3：“解密字符串获得PartnerID”的函数

这些根据商户不一样代码也是不一样的，作不到统一解决方案，so，老老实实写吧。

不过有些代码能够作成通用的，开发完成则后续接入能够不用再管了。

通用代码

方案1：受权回调式

说是最复杂的方案，其实通用代码就两个路由：

前往受权 /toAuth：前往须要登陆的页面时（假设地址为A），则先前往此路由，此路由接收一个回调地址（A）并存储在 session 中，而后此路由进入商户受权页（此时调用独立代码中进入商户受权页的函数）

受权回调 /authBack：必须提供给商户的回调路由，当商户受权页面中用户受权后，会返回此路由，用户的token亦会在query上传递回来，经过token去换取PartnerID，即执行联合登陆的三、4步后（此时调用独立代码中调用商户API获取PartnerID的函数），则取出session中的回调地址（例子中的A）并进入

方案2：APP接口式

这个方案的通用代码其实就是一个前端函数：

根据商户调用其特定的独立函数：前端能获得PartnerID，因此在须要登陆以前，先调用该商户的独立代码中的调用nativeAPI获取PartnerID的函数，获得PartnerID，再执行联合登陆的三、4步，最后完成登陆操做。

方案3：凭证解密式

这个方案最简单，只是在入口的路由加一个操做：

存储加密凭证字符串：在入口路由上，将加密凭证存入session中，在须要登陆前，则调用该商户的独立代码中的解密字符串获得PartnerID的函数，获得PartnerID，再执行联合登陆的三、4步，最后完成登陆操做。

查询接口

联合登陆的第3步中，会存在两个api，这些由咱们本身开发，分别是：

• 查询绑定帐户：经过PartnerID查询关联的H5ID，若存在，则返回帐户的登陆信息，若不存在，则返回无绑定关系，前端根据api结果判断是否进入H5的登陆页
• 进行帐户绑定：将PartnerID和H5ID进行绑定，返回帐户的登陆信息

---

其余比较特殊的登陆

静默登陆

在上面的过程当中，中间会有一层绑定的操做，此时须要内部H5页进行一次登陆，而这样会出现两次登陆的状况：APP登陆后，首次进入H5，H5中登陆并绑定。

因此，有些商户有这样的需求：APP已登陆，则在H5内部无需登陆，即首次进入H5也无需在H5进行登陆绑定就能够有登陆状态。

这种样的解决方案其实很简单，在查询的两个接口中，存在查询绑定帐户的接口，这个接口的功能是：

• 经过PartnerID查询关联的H5ID，若存在，则返回帐户的登陆信息，若不存在，则返回无绑定关系，进入H5的登陆页

若是须要知足上述需求，实际是这个接口永远返回登陆信息，包括首次登陆，如此简单便可。

由于在调用接口时，会传递商户名称和PartnerID，接口开发人员能够根据商户名进行操做。

例如：平台cmb须要静默登陆，则后端开发人员在查询绑定帐户接口接收参数 partnerName，若 partnerName === 'cmb'，则静默注册一个帐号并登陆，返回登陆信息，其他的则正常流程。

而对于多个商户都有此类需求，能够维护一个 array ，符合array内的条目，进行进行静默注册并登陆，不符合则走正常的步骤。

快应用的嵌入

快应用页能够获取用户在开放平台unionid，在进行嵌入开发时，有时候须要拿到unionid和H5的帐户进行绑定。

首先，快应用提供了API以获取用户惟一身份标识，其次，快应用自己应该视为一个轻量APP的开发，而快应用也提供了一些方法，咱们能够封存一些方法和接口，由H5以nativeAPI的方式进行调用和开发，故而快应用的联合登陆应该是方案2：APP接口式。

封装

web组件可使用：

• postMessage：向内部H5推送一个消息
• onmessage：监听内部H5的消息

内部H5可使用：

• system.postMessage：向外部web组件推送一个消息
• system.onmessage：监听外部web组件传递的消息

故能够在web组件监听 onmessage ，获得网页 system.postMessage 发送的登陆请求时，在快应用层去调用登陆API，获得PartnerID后，再由web组件的 postMessage 将PartnerID传递给内部H5页面，而H5则获得PartnerID，走正常的联合登陆流程。

---

END

我的特别不建议针对一个商户就写一套方案，浪费时间且大量重复代码，不利于代码维护。

虽然说有多种状况，但大部分都是能够围绕三种方案进行延伸拓展，有其余状况再补充，如今就写到这里。。