小程序的登录流程

282 阅读1分钟

1. 首先通过小程序的登录接口 wx.login() 获取到code

wx.login({
    success: (res) => {
        wxCode = res.code
        resolve(res)
    },
    fail: (err) => {
        reject(err)
    }
})

2. 获取到code之后,进行登录凭证的校验,传到开发者服务器调用此接口完成登录流程


let data = {
    appid: appId, // 小程序 appId
    secret: appSecret, // 小程序 appSecret
    js_code: wxCode, // 登录时获取的 code,可通过wx.login获取
    grant_type: "authorization_code", // 授权类型,此处只需填写 authorization_code
}
let url = "https://api.weixin.qq.com/sns/jscode2session"
return new Promise((resolve, reject) => {
    wx.request({
        url,
        data,
        dataType: "json",
        success(res) {
            // 微信服务器返回了 openid 及本次登录的会话密钥 session_key
            resolve(res)
        },
        fail(err) {
            reject(err)
        },
    })
})

3. 获取用户的基本信息,通过wx.getUserInfo()

let params = {
    desc: "获取你的昵称、头像、地区及性别"
}
return new Promise((resolve, reject) => {
    // 如果调用 wx.getUserProfile 需要传入参数desc, 声明获取用户个人信息后的用途
    wx.getUserInfo({
        // ...params,
        success(res) {
            resolve(res.userInfo)
        },
        fail() {
            wx.showToast({
                title: '您拒绝了请求,不能正常使用小程序',
                icon: 'error',
                duration: 2000
            });
        },
        complete(info) {
            console.log(info);
        }
    })
})

接口的支持情况, 从2022 年 10 月 25 日 24 时后,getUserInfo和getUserProfile接口同一获取到的内容是默认头像和默认用户名(微信用户)

image.png

备注: 检查登录状态是否过期 通过调用 wx.checkSession()

wx.checkSession().then(res => {
    // 执行其他方法
    otherFunc()
})

微信登录流程的具体细节

image.png