小程序登录wx.getUserInfo 与 wx.login方法 即小程序用户的登录

依稀记得小程序刚出来那会的轰动景象，回首再看，小程序现在已经发展到方方面面了，遍及生活，作为一个前端人员甚是欣慰！

废话不多说，直接上代码：

wxml：

---

js：

---

login: function (fn) {

    var that = this;

    wx.getUserInfo({//早先此方法可以直接调起用户授权弹窗，后来机制更改需要配合button open-type='getUserInfo'来调起授权

        success: res => {

            //拿到部分用户未加密数据

            that.globalData.loginsatus = true;

            var imgurl = encodeURIComponent(res.userInfo.avatarUrl),//传给后台，后台要求转码

                iv = res.iv,//加密算法的初始向量

                encryptedData = res.encryptedData;//完整用户信息的加密数据

            res.userInfo.avatarUrl = imgurl;

            that.globalData.userInfo = res.userInfo;//用户信息对象，不包含 openid 等敏感信息

            wx.setStorageSync('userInfo', res.userInfo);

            // 登录

            wx.login({

                success: res => {

                    if (res.code) {

                        //请求登陆接口

                        wx.request({

                            url: that.globalData.weachLoginApi,//调取后台解密登录接口

                            data: {

                                code: res.code,//获取到的用户登录凭证

                                encryptedData: encryptedData,//getUserInfo拿到的加密串

                                iv: iv,//加密算法的初始向量

                                user: JSON.stringify(that.globalData.userInfo),//用户信息对象，

                                softName: "duiduinongzhuang"//后台定义的登录小程序名

                            },

                            method: 'POST',

                            header: {

                                "Content-Type": 'application/x-www-form-urlencoded; charset=UTF-8'

                            },

                            success: function (res) {

                                //返回的用户数据 -- 具体怎么操作，看后台回传值

                                if (res.data.error_code== 0) {

                                    wx.setStorageSync('loginsatus', true);

                                    wx.setStorageSync('userData', res.data.user);

}

}

})

}

},

                fail: res => {

}

})

},

        fail: res => {

            wx.showModal({

                title: '警告',

                content: '您点击了拒绝授权，无法使用此功能。如想正常使用，请点授权按钮重新授权',

                showCancel: false,

                success: function (res) {

                    if (res.confirm) {

                        console.log('用户点击确定')

}

}

})

}

})

},

---

退格什么的自己IDE格式化一下，登录逻辑就是用户点击button按钮，调起授权，getUserInfo拿到用户加密数据，login获取用户登录码，然后发给后台解密，返回openid，token，userdata，unionid等其他关键用户数据，有的后台会让前端自己解密，就更恶心了，不过还好有nodejs方法，可以前端自行解密，但要考虑到前端数据暴露的风险！
具体解密方法在此：
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html#method-decode

自己下载解压，然后找到nodejs的代码，直接es6方法引入，调用，但是需要调用小程序的appid和小程序的session_key，而这两个数据前者暴露风险不大，后者暴露风险极高！

所有开发小程序登录的前端同仁，尽量进行后台解密，要是后台NB的天老大，他老二，就是让你解密，那你就和直系领导汇报风险，API里写的风险很明确，领导同意前端解密，直接撸代码，不同意的话，让后台做老大[Smart][Smart][Smart]