什么是联合登入

因为公司产品的发展，会与第三方的一些商户进行对接，商户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页所呼叫，进而增加安全性。

所以说，就安全性的排序为：1 > 2 > 3

越安全开发即越复杂，所以，开发的复杂度也就是以上的排序。

联合登入的详细步骤

程式码就不贴了，详细步骤如下：

1：准备进入一个H5页面，它需要登入方可访问2：在进入之前先取PartnerID，商户APP未登入则进行APP登入，再返回PartnerID3：得到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，即执行联合登入的3、4步后（此时呼叫独立程式码中呼叫商户API获取PartnerID的函式），则取出session中的回拨地址（例子中的A）并进入

方案2：APP界面式

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

根据商户呼叫其特定的独立函式：前端能得到PartnerID，所以在需要登入之前，先呼叫该商户的独立程式码中的呼叫nativeAPI获取PartnerID的函式，得到PartnerID，再执行联合登入的3、4步，最后完成登入操作。

方案3：凭证解密式

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

储存加密凭证字串：在入口路由上，将加密凭证存入session中，在需要登入前，则呼叫该商户的独立程式码中的解密字串得到PartnerID的函式，得到PartnerID，再执行联合登入的3、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，走正常的联合登入流程。