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

时间:2024-01-21 18:43:57

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

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

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

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中静默登录及非静默登录的正确使用姿势”的看法啦,大家有什么心得和看法,也可以留言与我交流。