微信H5中静默登录及非静默登录的正确使用姿势

在微信中打开网页且需要调用微信登录接口时，微信官方给我们提供了两种登录调用方式：静默登录和非静默登录；但是官方文档中却没有说明在何种情况下使用静默登录，何种情况下使用非静默登录，所以在这里，我想将之前做项目关于这个问题的心得分享给大家。

一、阅读官方文档，实现两种登录方式

其实通过阅读微信官方文档，很容易就能分别实现两种登录方式，这里我贴一下微信官方文档关于《微信网页授权》的链接以及我的实现代码（如果你已经实现了这两步，就可以直接跳过这一部分啦）：

a. 微信网页授权官方文档链接

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

b. 我的实现代码：

1、调用静默登录：

2、调用非静默登录：

可以看出，除了scope参数（其实这里可以通过加函数参数的方式将两个方法合二为一）

3、获取code之后，调用微信的接口获取用户信息（因为为了将appsecret保存在服务端，所以我们将这一步分为两步：前端拿到code之后调用服务端login接口，服务端login接口根据code调用微信获取用户信息接口）

前端拿到code之后调用服务端login接口：

（因为我使用了react框架和react-router路由管理所以这里将调用服务端login接口写在我的最外层组建的componentDidMount方法中，并通过判断query中是否含有code的方式决定是否调用login方法）

服务端login接口根据code调用微信获取用户信息接口：

（这一步步骤略多，因为我的后端使用的是nodejs，但是因为网络请求都是异步的，即使使用了Promise，代码看起来还是很捉急【回调伤不起。。。】，具体方式那家可以参阅上方的链接：微信官方文档）

二、静默登录及非静默登录的正确使用姿势

回到这张文章的标题：微信H5中静默登录及非静默登录的正确使用姿势

先上代码：

这个代码就是前文中“前端拿到code之后调用服务端login接口”的改装，具体改装方式就一点：在调用服务端login接口后如果拿不到用户信息，则调用微信的非静默登录。

所以这里我们实现的登录逻辑其实是：

1.先调用静默登录

2.拿到code之后调用后端login接口获取用户信息

3.根据2的结果：

　　如果拉取用户信息成功：

　　　　执行客户端登录逻辑（这一步执行完整个登陆过程就结束了）

　　如果拉取用户信息失败：

　　　　执行非静默登录（这一步执行完就会跳到步骤2）

再说原因：

    当一个微信用户进入到我们的网页时，我们没法预先判定 ta 是否已经微信授权过我们的网页，当我们第一次调用微信登录接口时，我们就必须在静默登录与非静默登录中做出选择，先来看调用两者分别会产生什么样的效果：

a.静默登录：用户无感知；如果用户曾经授权过该网页，则后续拉去用户信息会成功；如果用户曾经没有授权过该网页，则后续无法拉取到用户信息；

b.非静默登录：页面会跳转到授权页面，请求用户授权；如果用户曾经授权过该网页，则会显示您近期已经授权过该应用；如果用户曾经没有授权过该网页，则会请求用户授权该网页；

上文中斜体及下划线的地方即使两种方式分别不好的地方；会产生这些缺点的根本原因就是：在一个用户进入我们的网页时，我们没办法判断其以前是否使用微信登录过我们的网页，所以我们无法做出正确的选择

但是我们终究要做出选择，相比两者的缺点，首先使用静默登录的缺点更能让我们接受，因为使用静默登录失败后用户是无感知的，即使是没有拉到用户信息，我们也可以根据返回信息判断从而进一步调用费静默登录；相反，如果首先使用非静默登录，则当用户已经授权过应用时，页面的来回跳转显然不是一个很好的用户体验，而且这也违背了微信官方提供非静默登录方式的初衷：近期已授权过的用户无感知登录

三、总结

以上就是我对于“微信H5中静默登录及非静默登录的正确使用姿势”的看法啦，大家有什么心得和看法，也可以留言与我交流。