mpvue实现小程序登录及授权获取用户信息

摘要：首先要明白一件事，小程序中的登录和授权其实是两个操作。拿到之后，引导用户触发的组件，在回调事件中拿到以及，与一起传给后台，后台通过这些向微信服务器请求到和之后，自定义登录态并将其与和关联起来然后写。

首先要明白一件事，小程序中的登录和授权其实是两个操作。
登录的意义就是让web服务器知道当前的用户是谁，传统的web应用中用户通过输入账号和密码实现登录，而小程序中对应的是openId（当前用户对应的唯一标识）。

每个用户相对于每个微信应用（公众号或者小程序）的openId 是唯一的，也就是说一个用户相对于不同的微信应用会存在不同的openId.

小程序中的授权分为很多种，使用摄像头、录音功能、用户信息等等，大多数情况下通过官方提供给的wx.authorize()就可以获取对应的授权（弹出微信授权的对话框，用户允许之后即可获得），但今天要说的用户信息授权，在小程序一系列改版之后，则需要通过其他方式获得。

下面是前端代码实现思路。

调用wx.login()方法获取code（登录凭证），然后发送给后台，后台就可以通过code2Session向微信服务器请求到openid和session_key。

mounted (){
    wx.login({
        success (res) {
            if (res.code){
                // 这里可以把code传给后台，后台用此获取openid及session_key
            }
        },
    })
}

只获取到用户的openid意义并不大，我们还需要用户的昵称、头像等个人基本信息，获取这些是需要用户授权的。大多数情况下我们通过调用wx.authorize()就可以向用户发起某种授权请求，也就是弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据。

例如想调用设备的录音功能：

wx.authorize({
    // 通过scope指明申请获取哪种类型的权限
    scope: "scope.record",
    success() {
      // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
      wx.startRecord()
    }
})

会弹出以下弹窗
"，也就是需要用户手动点击open-type=getUserInfo的组件才可以弹出请求权限的弹窗。

// template代码

获取权限

//script代码

getUserInfoClick(){
    // console.log("click事件首先触发")
}，
bindGetUserInfo(e) {
    // console.log("回调事件后触发")
    const self = this;
    if (e.mp.detail.userInfo){
        console.log("用户按了允许授权按钮")
        let { encryptedData,userInfo,iv } = e.mp.detail;
        self.$http.post(api,{
            // 这里的code就是通过wx.login()获取的
            code:self.code,
            encryptedData,
            iv,
        }).then(res => {
            console.log(`后台交互拿回数据:`,res);
            // 获取到后台重写的session数据，可以通过vuex做本地保存
        }).catch(err => {
            console.log(`api请求出错:`,err);
        })  
    } else {
        //用户按了拒绝按钮
        console.log("用户按了拒绝按钮");
    }
},

到这里就已经获取到用户的基本信息了，可以再稍微优化一下。虽然通过wx.getUserInfo()方法已经不能弹出授权窗口，但授权状态会保存在缓存中，只要授权过且没过期，便可以通过此api的success回调直接获取到用户信息，否则进入会进入fail回调，此时我们再提示用户点击组件进行主动过授权即可。

// template代码

获取权限

// javascript代码

mounted () {
    const self = this;
    wx.login({
        success (res) {
            if (res.code){
                self.code = res.code;
                self.wxGetUserInfo(res.code);
            }
        },
    })
},
methods: {
    wxGetUserInfo (code) {
        const self = this;
        wx.getUserInfo({
            withCredentials: true,
            success (res) {
                let { encryptedData,userInfo,iv } = res;
                self.$http.post("api",{
                    code,
                    encryptedData,
                    iv,
                }).then(res => {
                    console.log(`后台交互拿回数据:`,res);
                    // 获取到后台重写的session数据，可以通过vuex做本地保存
                }).catch(err => {
                    console.log(`自动请求api失败 err:`,err);
                })  
            },
            fail (err) {
                console.log("自动wx.getUserInfo失败:",err);
                // 显示主动授权的button
                self.buttonVisible = true;
            }
        })
    },
    bindGetUserInfo(e) {
        // console.log("回调事件后触发")
        const self = this;
        if (e.mp.detail.userInfo){
            console.log("用户按了允许授权按钮")
            let { encryptedData,userInfo,iv } = e.mp.detail;
            self.$http.post(api,{
                // 这里的code就是通过wx.login()获取的
                code:self.code,
                encryptedData,
                iv,
            }).then(res => {
                console.log(`后台交互拿回数据:`,res);
                // 获取到后台重写的session数据，可以通过vuex做本地保存
            }).catch(err => {
                console.log(`api请求出错:`,err);
            })  
        } else {
            //用户按了拒绝按钮
            console.log("用户按了拒绝按钮");
        }
    },
}

到这里，就通过mpvue简单实现了小程序得登录及获取用户信息授权，总结一下：

首先要通过wx.login()获取code，也就是登录凭证。

拿到code之后，引导用户触发open-type="userinfo"的button组件，在回调事件中拿到encryptedData以及iv，与code一起传给后台，后台通过这些向微信服务器请求到openId和session_key之后，自定义登录态并将其与openId 和session_key 关联起来然后写session。

后台将登录态返回给前端，前端筒骨vuex或者wx.setStorageSync() 方式讲session全局保存起来。