微信小程序授权登录与用户信息保存详解（微信报修小程序源码讲解六）

原创

热心的程序员

修改于 2020-04-02 14:33:44

8.5K0

修改于 2020-04-02 14:33:44

文章被收录于专栏：编程之路

微信小程序开发很重要的一步就是微信授权登录与服务器用户信息保存，很多同学并不了解流程，下面我为大家讲解一下最简单的登录流程。

提醒：小程序端源码已经更新整理，相比旧源码，新源码简洁、结构清晰、需要的同学及时找我获取源码。

微信小程序授权、服务器保存信息到数据库

下面这张图是我花了近一小时画出来的，画的不好，大家凑合看。本图详细讲解了微信小程序授权登录与用户信息保存的整个流程。

详细解释：

1、小程序端，执行 wx.login() 方法后会获取到code ，获取成功后将 code 通过 api 接口api/v1/wx/login 传递给后台。

login:function(){
    wx.login({
      success: function (res) {
        if (res.code) {
          wx.request({
            url: app.serverUrl + 'api/v1/wx/login',
            data: {
              code: res.code
            },
            success: function (res) {
              if(typeof(res.data.id)=='undefined'){
                wx.showModal({
                  title: '警告',
                  content: '尚未进行授权，请点击确定跳转到授权页面进行授权。',
                  success: function (res) {
                    if (res.confirm) {
                      wx.navigateTo({url: '../auth/auth',})
                    }
                  }
                });
              }
              app.globalData.openid = res.data.openid
              app.globalData.userInfo=res.data
            }
          })
        } else {
          console.log('获取用户登录态失败！' + res.errMsg)
        }
      }
    })
  }

2、将 code、appId、appSecret 做为参数，调用微信接口 jscode2session

，调用成功将返回 openid 、session_key（session_key是很有用的，目前我们的代码中并没有使用到，他用于解密用户信息、可解密出用户unionid、手机号，这里我们用不到暂不讲解），根据 openid 查询数据库 wx_user表，存在信息直接返回，不存在用户信息则只返回 openid 。

# 请求微信接口获取openid、session_key
@api.route("/v1/wx/login", methods=['GET', 'POST'])
def wxLogin():
    code = request.args.get("code")
    wxUrl = "https://api.weixin.qq.com/sns/jscode2session?appid={appId}&secret={appSecret}&js_code={code}&grant_type=authorization_code".format(
        appId=appId, appSecret=appSecret, code=code)
    req = requests.get(wxUrl)  # wxUrl 你要请求的接口地址
    jsonText = req.text  # wxUrl接口地址返回的数据字符串
    resultJson = json.loads(jsonText)  # 将json字符串转换成字典
    resultUser = WxUser.query.filter(WxUser.openid == resultJson['openid']).first()
    if resultUser is not None:
        jsonData = {'id': resultUser.id, 'openid': resultUser.openid, "avatarUrl": resultUser.avatarUrl,
                    "nickName": resultUser.nickName,
                    "isBindingMobile": resultUser.isBindingMobile}
        resultJson = jsonData
    else:
        resultJson = {"openid": resultJson['openid']}
    return resultJson

3、小程序端调用 api 接口成功后，若存在用户id ，则表示已经授权，若不存在则跳转到微信授权登录。微信授权登录使用 button ，并设置 open-type="getUserInfo" ，这里是微信要求，不用问为什么，微信开发文档就是这样写的。

<view class='title'>温馨提示</view>
<view class='info'>为保证您的正常使用，请进行授权！</view>
<button class="bt" open-type="getUserInfo" bindgetuserinfo="getUserInfo">开始使用</button>

bindgetuserinfo 绑定的是getUserInfo 方法，在getUserInfo方法中即可获取到用户的信息。

getUserInfo: function (e) {
    app.globalData.userInfo = e.detail.userInfo;
    wx.request({
      url: app.serverUrl + 'api/v1/wx/saveUserInfo',
      data: {
        openid: app.globalData.openid,
        nickName: app.globalData.userInfo.nickName,
        avatarUrl: app.globalData.userInfo.avatarUrl
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        if(res.status==200){
          wx.navigateBack({
            delta: 1
          })
        }else{
          wx.showToast({
            title: '授权失败，请重试',
            icon: 'none',
            duration: 2000
          })
        }
      }
    });
  }