微信登录功能模块的坑

学习微信小程序登录模块所踩过的坑

用户登录是小程序中获取用户加密信息、使用模板消息、客服消息、微信支付等接口的先决条件。微信小程序登录是为了让开发者的服务器获取用户的openId以及session_key的令牌。

在微信小程序早期，我们是先通过调用wx.login()，成功后再调用wx.getUserInfo()获取用户的信息。而微信在今年9月初却发布一个公告，声称平台将回收“使用 wx.getUserInfo 接口直接弹出授权框”的能力，开发者需要使用组件方式唤起登录授权弹窗。因此我们将不能再使用wx.getUserInfo这个api接口了。

如今，如果你只想获取用户的明文信息，可使用 open-data （小程序）或者开放数据域（小游戏）的方式展示用户信息（无需用户授权）；如果需要获取加密信息用于后续微信支付，模板消息等功能，则需使用button（小程序）或UserInfoButton（小游戏）组件，用户点击后弹窗请求用户授权。

前端代码如下：

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  onReady: function() {
    var that = this;
    wx.login({
      success: function(loginRes) {
        that.setData({
          code: loginRes.code
        })
      }
    })
  },

  onGotUserInfo(userRes) {
    var that = this;
    wx.request({
      url: 'http://localhost/wxopen/wxCheckUserInfo.php',
      data: {
        code: that.data.code,
        signature: userRes.detail.signature,
        rawData: userRes.detail.rawData
      },
      success: function(res) {
        console.log(res.data);
      }
    })
  }
})

此处注意需要在微信开发者工具中勾选不校验合法域名的选项，否则会报错：
点击微信开发者工具菜单栏右侧的详情按钮即可查看

后端程序代码中，需要先使用PHP语言的CURL功能向微信服务器发送请求，代码如下：

class WXLogin{
    private $loginUrl;
    private $wxAppID;
    private $wxAppSecret;

    function WXLogin(){
        // 导入config.php配置文件
        // config.php中为一个数组。
        // 数组中封装了appID、appSecret和'用于code获取openId以及session_key'的https接口loginUrl三个数据
        $config = include('./config.php');
        $this->loginUrl = $config['LOGINURL'];
        $this->wxAppID = $config['WXAPPID'];
        $this->wxAppSecret = $config['WXAPPSECRET'];
    }

    public function login($code){
        // 通过sprintf()函数，将wxAppID,wxAppSecret和code的值依次赋值给loginUrl里面三个所需参数
        $loginUrl = sprintf($this->loginUrl, $this->wxAppID, $this->wxAppSecret, $code);
        $ch = curl_init();  // 进行curl_init()函数初始化
        $timeout = 10;      // 设置超时时间
        try{
            curl_setopt($ch, CURLOPT_URL, $loginUrl);
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
            curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
            $res = curl_exec($ch);
            curl_close($ch);

            $resArray = json_decode($res, true);
            return $resArray;
        }
        catch (Exception $e){
            return $e;
        }
    }
}

注：默认情况下，PHP是不支持CURL功能的，需要在php.ini中开启该功能：
（; extension = php_curl.dll）将extension前面的分号去掉，保存并重启Apache服务器
使用curl的操作步骤如下：

用curl_init()函数进行初始化操作
用curl_setopt()函数进行设置选项
进行执行事务curl_exec();
最后关闭curl_close();

配置函数config.php的代码如下：

return array(
    'WXAPPID'=>'your appid',    //  替换成appid
    'WXAPPSECRET'=>'your appsecret',      // 替换成appsecret
    'LOGINURL'=>"https://api.weixin.qq.com/sns/jscode2session?".
                "appid=%s&secret=%s&js_code=%s&grant_type=authorization_code"
);

最后在服务端校验用户数据，把session_key保存到文本文件中并把校验结果返回客户端，代码如下：

# 用户信息校验
include_once('./class/wxLoginClass.php');

// 从前端获取变量code、signature、rawData
$code = $_GET['code'];
$signature = $_GET['signature'];
$rawData = $_GET['rawData'];
// 将$filename变量指向'test.txt'文本
$filename = './test.txt';

// 通过调用WXLogin方法，将微信服务器返回的数据赋给变量$sessionRes，并存入'test.txt'文件中
$login = new WXLogin();
$sessionRes = $login->login($code);
file_put_contents($filename, $sessionRes);

$session_key = $sessionRes['session_key'];
// 调用checkUserInfo()函数校验用户信息是否被篡改
$valid = checkUserInfo($signature, $rawData, $session_key);
echo $valid;

function checkUserInfo($signatureOri, $rawData, $session_key){
    // signatureOrl变量是使用sha1(rawData+session_key)加密得到的字符串，用于校验用户信息
    $signatureShal = sha1($rawData.$session_key);
    if($signatureOri == $signatureShal){
        return "校验通过";
    }else{
        return "校验不通过";
    }
}

至此，微信登录功能模块得以实现。就这个知识点花了我整整一天的时间，才把这个坑填掉，但也因此吃透了这个知识点。在此期间应当着重强调的就是DEBUG调试代码，只有耐下心来，逐行debug调试，顺藤摸瓜，方能达到事半功倍的效果！！！

注：微信小程序微信登录能力调整，官方声明链接~~

微信登录功能模块的坑

学习微信小程序登录模块所踩过的坑

猜你喜欢