天天看点

近期微信小程序开发总结(2):获取微信用户信息并实现登录及自动登录功能(包括wx.login获取session_key、openid以及getUserProfile替换getUserInfo)

简述:本文比较清晰地讲述了实现微信小程序获取用户信息并登录的步骤;以及讲述了对于更新后getUserInfo获取用户信息为匿名且无弹窗的问题。

对于需要上线的微信小程序,如果需要获取微信用户信息并进行登录的话还是有一套比较严格的流程的,先看微信小程序官方文档给出的这张图

近期微信小程序开发总结(2):获取微信用户信息并实现登录及自动登录功能(包括wx.login获取session_key、openid以及getUserProfile替换getUserInfo)

所以,

一、我们的思路是:

1、通过微信官方文档里面的开放接口wx.login去获取登录凭证code;

2、获取code成功后通过后端给的接口将code码发送到后台服务器;

3、后台服务器收到了code码后连同我们的appid和appsecret一同通过auth.code2Session接口向微信服务器发送请求获取到用户唯一标识openId以及会话密钥session_key(如果微信账号对应的开放平台绑定了微信小程序还能获取到unionId);

4、后台服务器获取到了openId和session_key后,为了安全考虑可以生成一段密文再发送回微信小程序,即我们所说的前端人员能拿到这一密文(我这里的安全性没要求那么高,后端直接将openid和sessoin_key发送回来)然后存入本地,作为后续登录状态检查使用;

下图代码实现了上述的四个步骤:

近期微信小程序开发总结(2):获取微信用户信息并实现登录及自动登录功能(包括wx.login获取session_key、openid以及getUserProfile替换getUserInfo)

5、上述4个步骤实现了之后就可以去获取用户信息了。因为更新问题,使用getUserInfo接口将不再能获取到用户信息,而是一个匿名信息,且使用getUserInfo接口不再进行授权的弹窗询问,即便是已经在button组件中设置了open-type。如下图所示:

近期微信小程序开发总结(2):获取微信用户信息并实现登录及自动登录功能(包括wx.login获取session_key、openid以及getUserProfile替换getUserInfo)
近期微信小程序开发总结(2):获取微信用户信息并实现登录及自动登录功能(包括wx.login获取session_key、openid以及getUserProfile替换getUserInfo)

6、为了解决步骤5里面所出现的问题,我通过调用wx.getUserProfile接口进行获取微信用户信息。如下图:

近期微信小程序开发总结(2):获取微信用户信息并实现登录及自动登录功能(包括wx.login获取session_key、openid以及getUserProfile替换getUserInfo)

7、这个接口就是每次调用都会出现弹窗询问,所以为防止过度弹窗使用户体验感下降,我们在获取信息成功之后要将该信息存入本地缓存,方便下次用户进来时进行信息检验以及把信息给全局,避免重复获取信息而导致弹窗。

二、有了上述的思路,我们下面讲述登录及自动登录功能实现的步骤:

1、用户第一次进入小程序必须要通过手动点击我们自己设置的一个按钮(随便一个按钮即可,绑定好点击事件)进行登录;

2、我们需要在这个点击事件中要做的事有:

a.调用wx.login获取相应openid和session_key,并将其存入本地缓存;

b.调用wx.getUserProfile接口获取用户信息,并将用户信息通过接口上传到后台存入数据库,除此之外还要存入本地缓存,以及存入全局;

c.登录成功,提示信息或进行页面跳转等操作;

3、用户第一次登录之后若再次登录,则进行自动登录或登录态过期需要手动授权登录,自动登录需要检查用户信息及登录态是否过期,具体步骤如下:

a.在页面加载onLoad()函数里面调用wx.checkSession接口,检查登录态,若失败则提示登录态失效,需要重新手动授权登录;

b.若检查登录态仍然有效,则从本地缓存中取出原先存有的用户信息,取出之后赋值给全局,并进行页面跳转或提示登录成功等其他操作;

c.上述b步骤中若登录态检查成功还有一种可能情况就是若用户清除了缓存把用户信息删了,则获取本地缓存中的信息会失败,那么也要提示重新登录(当然这种情况一般不会出现,因为清除了缓存会将存好的登录态一同删除,则在一开始检查登录态的时候就会提示需要重新手动登录)。

以上所有便是我开发微信小程序实现获取用户信息并登录以及后续自动登录的功能的一系列逻辑步骤,有需要的可以借鉴,有不足的希望可以提出指正。

继续阅读