微信联合登录 PC端和移动端整合实现过程

titu002.jpg

前一篇有提到过微信联合登录的坑 http://www.pinn.im/discussion/380
通过对它的解读和理解，我们来实现微信PC端联合登录和公众号网页授权的整合。

建议还没有仔细阅读上一篇的仔细去阅读一下再开始上手来实现，可以最大程度的降低实现难度。

一、建立场景

其实这个场景也是一般信任登录的场景方法，通常包括：新用户使用信任登录实现直接登录，已有帐号和社交账户进行关系绑定（例如网易音乐），注册网站帐号和社交帐号解绑，我们来看这个图

微信登录.png

有了场景的概念，我们就接着针对不同场景进行流程设计

二、针对不同场景设计实现流程

微信同时实现了PC端扫码登录和移动端授权自动登录两套流程，这里边的最大问题恐怕就是我们必须把这个场景同时应用在移动端和PC端，也就意味着两边要实现两次类似的场景流程设计。先来看PC端

A. 点击微信登录
B. 跳转到二维码页面
C. 微信扫码，确认授权
D. 自动回跳到指定页面完成授权登录
E. 自动登录

实现的难点在于D，回跳回来之后，简单的实现方案是直接授权登录，相信很多站点/商城/系统都有自己的账户体系，那么就需要和自己的用户体系进行整合。

第一次 给用户选择，选择1: 直接登录，不创建实际账户； 选择2: 注册创建站点帐号，完成帐号和微信登录的绑定 选择3: 如果已有帐号，可直接和已有帐号进行绑定
第N+1次，只要用户授权正常，则扫码实现自动登录

再来看移动端：

移动端要实现网页授权必须具备 认证过的微信公众号 因为网页授权的实质是通过微信公众号获取用户open_id，进一步获取用户资料

有两种实现方案：方案1: 打开站点时，就提示用户进行授权，直接登录 方案2:默认不登录，页面保留登录入口按钮，用户点击后发起授权请求

还是这个问题，如果你的站点全部依赖于微信帐号体系，那么可以选择方案1，否则建议还是选择方案2，用户可以微信直接登录，也可以选择其它帐号进行绑定/解绑

三、实现整合登录体验

这一步就是参照微信的规则：

1. 注册微信公众号 mp.weixin.qq.com，并且进行认证
2. 注册微信开放平台帐号 open.weixin.qq.com 创建网站应用
3. 在微信开放平台内绑定你的微信公众号

那么在具体实现过程里，PC端和手机端的接口数据中都会有一个unionid，通过unionid来实现PC端扫码和移动端网页授权对用户的唯一识别。

具体的大家可以看PINN社区的实现方案，通过PC端和手机端体验。

qrcode_for_gh_c881d2fa0ce3_258.jpg