微信小程序 授权登录详解（附完整源码）

我来详细讲解一下“微信小程序授权登录详解（附完整源码）”的攻略。

标题一：准备工作

在编写微信小程序授权登录功能之前，需要先了解下几个概念：

1. APPID & APPSECRET：在小程序管理后台配置时生成的小程序对应的appID和appSecret。

2. wx.login()：小程序登录系统的API接口。

3. wx.getUserInfo()：小程序获取用户信息的API接口。

4. wx.request()：小程序发送请求的API接口。

标题二：实现微信小程序授权登录

步骤一：获取用户code

在小程序中调用wx.login()方法，获取用户的code。

wx.login({
  success: function (res) {
    if (res.code) {
      console.log(res.code);
      // 将code发送给后台服务器，用于换取用户openid和session_key等信息，并保存到本地存储中
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

步骤二：拉取用户信息

在小程序中调用wx.getUserInfo()方法，获取用户信息。

wx.getUserInfo({
  success: function (res) {
    console.log(res.userInfo);
    // 将用户信息发送给后台服务器，并保存到本地存储中
  }
})

注意：在获取用户信息之前，需要先判断小程序是否已经获取了用户的授权，如果没有，则需要调用wx.authorize()方法进行授权。关于wx.authorize()的详细用法，可以查看微信小程序官方文档。

步骤三：发送请求，换取用户openid和session_key等信息

封装一个request方法，用于发送请求，并获取用户的openid和session_key等信息。

function request(url, data, method, successCB, failCB) {
  wx.request({
    url: url,
    data: data,
    method: method,
    header: {
      'content-type': 'application/json'
    },
    success: function (res) {
      if (res.statusCode === 200) {
        successCB(res.data);
      } else {
        failCB();
      }
    },
    fail: function () {
      failCB();
    }
  })
}

然后在获取用户code之后，调用上面的request方法，将code发送给后台服务器，用于换取用户openid和session_key等信息，并保存到本地存储中。

wx.login({
  success: function (res) {
    if (res.code) {
      request('服务器接口地址', { code: res.code }, 'GET', function (data) {
        console.log(data);
        // 将用户openid和session_key等信息保存到本地存储中
      }, function () {
        console.log('请求失败！');
      });
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

步骤四：根据用户openid和session_key等信息，验证用户身份

在服务器端，根据用户openid和session_key等信息，验证用户身份，如果验证通过，则可以为该用户提供相应的服务，否则拒绝访问。

标题三：示例说明一

实现微信小程序授权登录的核心代码如下：

// 获取用户code
wx.login({
  success: function (res) {
    if (res.code) {
      // 将code发送给后台服务器，用于换取用户openid和session_key等信息，并保存到本地存储中
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

// 拉取用户信息
wx.getUserInfo({
  success: function (res) {
    // 将用户信息发送给后台服务器，并保存到本地存储中
  }
})

注意：在获取用户信息之前，需要先判断小程序是否已经获取了用户的授权，如果没有，则需要调用wx.authorize()方法进行授权。

标题四：示例说明二

请求接口获取用户openid和session_key等信息的核心代码如下：

function request(url, data, method, successCB, failCB) {
  wx.request({
    url: url,
    data: data,
    method: method,
    header: {
      'content-type': 'application/json'
    },
    success: function (res) {
      if (res.statusCode === 200) {
        successCB(res.data);
      } else {
        failCB();
      }
    },
    fail: function () {
      failCB();
    }
  })
}

wx.login({
  success: function (res) {
    if (res.code) {
      request('服务器接口地址', { code: res.code }, 'GET', function (data) {
        console.log(data);
        // 将用户openid和session_key等信息保存到本地存储中
      }, function () {
        console.log('请求失败！');
      });
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

注意：在发送请求之前，需要先确定服务器接口地址，并使用正确的请求方法和数据格式。同时，需要对接口进行安全验证，防止恶意攻击。