uni-app小程序授权登录流程

后端

登录凭证校验。通过 wx.login 接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程。

 1let request = require('request');
 2let WXBizDataCrypt =require('../../../utils/WXBizDataCrypt') 
 3const APP_ID = 'wx6***********' 
 4const APP_SECRET = '600eaf8b88b5*******0f183' 
 5const APP_URL = 'https://api.weixin.qq.com/sns/jscode2session'
 6
 7exports.Code2Session = (req,res)=>{
 8    const js_code  = req.query.code
 9    if(js_code){
10        request(`${APP_URL}?appid=${APP_ID}&secret=${APP_SECRET}&js_code=${js_code}&grant_type=authorization_code`, (error, response, body)=>{
11            let data = JSON.parse(body)
12            res.json({
13                code:200,
14                data
15            })
16        })
17    }else{
18        res.json({ code:403,message:""})
19    }
20}

获取用户信息

 1exports.UserInfo = (req,res)=>{
 2    const { sessionKey, encryptedData, iv } = req.query
 3    let bizDataCrypt = new WXBizDataCrypt(APP_ID, sessionKey)
 4    const data = bizDataCrypt.decryptData(encryptedData, iv)
 5    if (Object.keys(data).length > 0) {
 6        res.send({
 7            code: 200,
 8            data,
 9        })
10    } else {
11        res.send({
12            code: 400,
13        })
14    }
15}

前端

对uniapp网络请求做简单的封装 如下

 1const baseUrl = "https://xxxxx.com/api"
 2const request = (url = "", date = {}, type = "GET", header = {}) => {
 3  return new Promise((resolve, reject) => {
 4    uni
 5      .request({
 6        method: type,
 7        url: baseUrl + url,
 8        data: date,
 9        header: header,
10        dataType: "json",
11      })
12      .then(response => {
13        setTimeout(function () {
14          uni.hideLoading()
15        }, 200)
16        let [error, res] = response
17        if (res.data.code !== 200) {
18          console.log("失败")
19          return
20        }
21        resolve(res.data.data)
22      })
23      .catch(error => {
24        let [err, res] = error
25        reject(err)
26      })
27  })
28}
29export default request

使用uni.login 获取到code 拿到 openid 和 session_key

只要是进入到登录页面首先获取 openid 和 session_key

 1export default {
 2  onLoad() {
 3    this.login()
 4  },
 5  methods: {
 6    login() {
 7      let _self = this
 8      uni.showLoading({
 9        title: "加载中...",
10      })
11      uni.login({
12        provider: "weixin",
13        success: function (loginRes) {
14          let data = { code: loginRes.code }
15          _self.$request("/wx/code", data).then(res => {
16            console.log(res)
17            uni.setStorageSync("openid", res.openid)
18            uni.setStorageSync("session_key", res.session_key)
19            uni.hideLoading()
20          })
21        },
22      })
23    },
24  },
25}

微信授权

当前逻辑用户授权登录之后返回 我的 页面

1<button class="wx-btn-login" type="primary" :plain="isDisable" :disabled="isDisable" @click="getUserProfile">
2        微信登录
3</button>

 1    getUserProfile(e) {
 2      let _self = this
 3      uni.getUserProfile({
 4        desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
 5        success: res => {
 6          let userInfo = res.userInfo
 7          let data = {
 8            encryptedData: res.encryptedData,
 9            iv: res.iv,
10            sessionKey: uni.getStorageSync("session_key"),
11            openId: uni.getStorageSync("openid"),
12          }
13          _self.$request("/wx/userinfo", data).then(ret => {
14            uni.setStorageSync("avatar", ret.avatarUrl)
15            uni.setStorageSync("nickname", ret.nickName)
16            setTimeout(() => {
17              uni.switchTab({
18                url: "/pages/mine/index",
19              })
20            }, 50)
21          })
22        },
23      })
24    },

转自uni-app小程序授权登录流程