登录授权流程:(2019.5.31更新)
目前微信小程序是不支持自动获得授权页的,需要开发者设置授权按钮,并绑定自定义的登录授权方法bindGetUserInfo。登陆授权这里坑很多,网上的博客教程也良莠不齐,博主就在这儿折腾了很久。
登陆授权页wxml:
!-- 如果只是展示用户头像昵称,可以使用 open-data / 组件 --view class='avatar' open-data type="userAvatarUrl" class="userImage"/open-data open-data type="userNickName" class="userNickName"/open-data/viewview class="box" wx:if="{{canIUse}}" button class='bottom' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo" 授权登录 /button/view view class="box" wx:else请升级微信版本/view登陆授权页js:
Page({ data: { //判断小程序的API,回调,参数,组件等是否在当前版本可用。 canIUse: wx.canIUse('button.open-type.getUserInfo'), userInfo:'' }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { wx.hideShareMenu();//禁用分享功能 var that = this; // 查看是否授权 wx.getSetting({ success: function (res) { console.log(res); if (res.authSetting['scope.userInfo']) { wx.getUserInfo({ success: function (res) { //从数据库获取用户信息 // that.queryUsreInfo(); //用户已经授权过 wx.switchTab({ url: '/pages/index/index' }) // wx.clearStorage() //清理所有缓存 } }); } } }) }, // 封装post请求 requestData: function (url, data0, successCallback, errorCallback) { wx.request({ url: app.globalData.rootApi + url, //这里将根域名存在全局数据中 data: data0, method: "POST", success: function (res) { successCallback(res); }, error: function (res) { errorCallback(res); }, }); }, // 封装授权登录函数 login: function (data0, successCallback, errorCallback) { this.requestData('接口url', data0, successCallback, errorCallback); }, //点击授权按钮的处理函数 bindGetUserInfo: function (e) { if (e.detail.userInfo) { //用户按了允许授权按钮 var that = this; // 调用登录方法 wx.login({ success: res = { //获取用户的code const code = res.code; // 获取用户信息 wx.getSetting({ success: res = { if (res.authSetting['scope.userInfo']) { // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框 wx.getUserInfo({ success: res = { // console.log(res); //获取到用户数据,将 res 发送给后台解码出 this.userInfo = res.userInfo; var nickName = res.userInfo.nickName; var avatarUrl = res.userInfo.avatarUrl; // 本地缓存存储用户名和头像 wx.setStorageSync('nickName', nickName); wx.setStorageSync('avatarUrl', avatarUrl); var postData = {}; postData.code = code; postData.nickName = nickName; postData.avatarUrl = avatarUrl; //将其他用户信息存在全局数据中 app.globalData.userInfo = res.rawData; //后台服务器授权登录接口 this.login(postData, (res) = { // 请求成功处理函数 if (res.statusCode === 200) {//获取成功 var uToken = res.data; // 先移除可能需要更改的storage wx.removeStorageSync('uToken'); //设置本地缓存,存储服务器端返回的uToken标识 wx.setStorage({ key: 'uToken', data: uToken, }); //用户已经授权过 wx.reLaunch({ url: '/pages/index/index' }); } //请求失败处理函数 else { wx.showModal({ title: '温馨提示', content: res.errMsg }) } } ) // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 if (this.userInfoReadyCallback) { this.userInfoReadyCallback(res) } } }) } } }) } }) } else { //用户按了拒绝按钮 wx.showModal({ title: '警告', content: '您点击了拒绝授权,将无法进入小程序,请授权之后再进入!', showCancel: false, confirmText: '返回授权', success: function (res) { if (res.confirm) { // console.log('用户点击了“返回授权”') } } }) } },})注意点:
我们登陆的流程是,小程序端将code以及需要的用户数据(头像、昵称等)请求到后端接口,后台用code请求腾讯微信小程序的接口 https://api.weixin.qq.com/sns/jscode2session 获取用户的openId,同时返回给前端一个生成的uToken作为身份验证,由前端本地存储。(后台java代码略)之所以在后台请求而不是小程序端直接请求,更多的考虑到安全性,不建议小程序端直接获取到openId。
每次用户在上传表单数据或者图片时,都要附带发送uToken作为用户的身份验证。uToken后台会设置过期时间,过期后小程序端需要清理缓存,重新登录。
后台请求官方接口时,返回的数据中openId和错误码是一起发送的,需要分开接收,这也是坑爹点之一。最好用map接收。切记后台请求接口时需要AppId和AppSecret。
本小程序登陆部分没有用Promise,明显感觉代码结构很差,还是可以改进的,使用箭头函数与Promise。













