微信小程序授权登录与服务器用户信息保存的整个流程

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

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

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

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

在这里插入图片描述

详细解释：

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、 做为参数 ，调用微信接口

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

# 请求微信接口获取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 ，则表示已经授权 ，若不存在则跳转到微信授权登录 。微信授权登录使用 ，并设置 open-type="" ，这里是微信要求，不用问为什么，微信开发文档就是这样写的。

温馨提示
为保证您的正常使用，请进行授权！
开始使用

复制

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

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
          })
        }
      }
    });
  }

复制

总结：

微信小程序授权登录和信息保存，看起来是有点麻烦 ，但是这个流程是很清晰的 ，大家只要理解了逻辑控制流程 ，就能很好的完成开发。

对此，你有什么疑问？欢迎加我个人微信 或扫码关注微信公众号与我一起交流！

.jpg