微信小程序详细登录过程及讲解

936 阅读4分钟
小程序登录

小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系。

说明: 调用 wx.login() 获取 临时登录凭证 code ,并回传到开发者服务器。调用 auth.code2Session 接口,换取 用户唯一标识 OpenID 和 会话密钥 session_key。之后开发者服务器可以根据用户标识来生成自定义登录态,用于后续业务逻辑中前后端交互时识别用户身份。

注意:会话密钥 session_key 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全,开发者服务器不应该把会话密钥下发到小程序,也不应该对外提供这个密钥。临时登录凭证 code 只能使用一次且具有时效

小程序登录态

对于小程序来说,也需要一个唯一的标识符来区分用户,也就是session来保持会话,但是小程序没有cookie, 因此我们的唯一标识符会被存储在 localstorage 里面,每次发请求时,都会从localStorage 里面拿到这个唯一标识符,带在请求中。

微信的openid

openid是用来唯一标识用户的一个字符串。在微信小程序中,每个用户的openid都是唯一的。通过openid,小程序可以获取用户的基本信息,如头像、昵称等。

注意: 同一个用户在不同的小程序中拥有不同的openid。因此,在开发小程序时,不能使用openid来进行用户的唯一性判断。

微信的unionid

unionid是在用户绑定同一微信开放平台账号下的多个应用时,用来唯一标识用户的一个字符串。如果用户在多个小程序中使用同一个微信号进行登录授权,那么这些小程序中的unionid都是相同的。

注意: 用户的unionid只有在用户将多个应用绑定到同一个微信开放平台账号下时才会生成。因此,如果用户没有绑定多个应用,那么小程序将无法获取用户的unionid。

微信的code

code是用户登录凭证,由微信服务器颁发给小程序。在用户授权登录后,小程序可以通过调用微信登录接口获取用户的code。然后,通过code向微信服务器请求用户的openid和session_key等信息。

注意: 每个code只能使用一次,且有效期为5分钟。因此,在使用code进行登录时,需要及时将其转换成用户的openid和session_key等信息,以免出现code过期的情况

openid、unionid和code是微信小程序登录授权中非常重要的三个参数,了解这些参数的作用和用法,有助于开发者更好地设计和开发小程序登录授权功能。

小程序登录的流程

登录过程主要涉及到 小程序服务端微信服务端

  1. 小程序的登录会在用户一进入就调用 wx.login 获取到一个临时的 code,将获取的的 code 传递给后端服务器,这就是前端该干的事情

    wx.login({
      success: res => {console.log(res.code)},
      fail: err => {console.log(err)}
    })
    
  2. 后端服务器获取到code时,再从服务器通过auth.code2Session 向微信的服务器发送网络请求并携带 code + appid + appsecret

  3. 微信开发平台中查看 appid + appsecret;

  4. 待微信服务端响应 openid + session_keysession_key主要用于再向微信服务器发起请求用到, session_key生成access_token向微信服务器发送请求),openid是不会直接传到小程序中的,而是需要在后端将 openid + session_key 等信息转换生成自定义的token(自定义登录态)返回给小程序,而小程序获取到token则进行登录,获取业务数据方面的操作;

获取用户信息

在早期使用wx.getUserInfo进行获取,但由于一进入页面就立马弹出获取用户的弹窗,用户体验不行,且拒绝授权人数多。而且得到的数据基本都是默认匿名数据;

现在则使用wx.getUserProfile授权,需要用户手动点击授权才会出现弹窗;

javascript复制代码<button open-type="getUserInfo" bindtap="handleGetUser">获取用户信息</button>

handleGetUser:function(){
    wx.getUserProfile({
      desc: '描述',
      success: (res) => { console.log(res) },
      fail: (err) => {console.log(err) }
    })
}