微信小程序读取用户openid【前端+后端代码】

微信小程序读取用户openid

场景

小程序中需要加入一个“收藏”功能。用户可以点击“我的收藏”看到自己收藏的文章。
在这个需求中，我们需要得到一个关联用户的唯一标示，那就是openid,在小程序中怎么获取用户的openid呢？

登录凭证（code）

首先我们调用wx.login(object)接口获取登录凭证（code）进而换取用户登录态信息，包括用户的唯一标识（openid） 及本次登录的 会话密钥（session_key）。用户数据的加解密通讯需要依赖会话密钥完成。

onReady: function (options) {
    const that = this;
    wx.login({
      // 获取code
      success: function (res) {
        var code = res.code; // 返回code
      }
    })
  },
复制代码

获取openid和session_key

微信提供接口：
https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
将APPID和SECRET换成自己小程序的。再将上面login接口返回的code传入JSCODE来调用接口；

这是一个 HTTPS 接口，开发者服务器使用登录凭证 code 获取 session_key 和 openid。其中 session_key 是对用户数据进行加密签名的密钥。为了自身应用安全，session_key 不应该在网络上传输。

onReady: function (options) {
    const that = this;
    wx.login({
      // 获取code
      success: function (res) {
        var code = res.code; // 返回code
        var APPID = ''; // 换成自己的APPID
        var SECRET = '' // 换成自己的SECRET
        var url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + APPID + '&secret=' + SECRET + '&js_code=' + code + '&grant_type=authorization_code';

        wx.request({
            url,
            data: {},
            headers: {
                "content-type": "application/json",
            },
            success: function(res){
                that.setData({
                    openid: res.openid
                });
            }
        })
      }
    })
  },
复制代码

在这段代码就完成了读取用户openid的操作，但是你会发现这段代码只能在微信开发者工具中调用成功【当然是在你勾选了不校验HTTPS合法域名】的情况下，勾选这个的好处就是我们在开发的时候可以使用本地服务，而不用HTTPS域名。

因为小程序的前端接口调用必须使用HTTPS,而且那么这段代码使用手机体验会出现什么问题呢？
接口报错：

request:fail url not in domain list
复制代码

报错提示说请求的url不在域名列表里，应该是还没有配置服务器域名；
没有配置那我们就进入小程序进行配置嘛。
登陆小程序 - 开发 - 开发中心 - 服务器域名【添加https://api.weixin.qq.com】这个域名

但是你会发现提示错误信息。

了解详情，可以看到这一大段说明；

这个说明为了安全性着想。我们读取用户的openid是不能放入前端来写的。我们必须把appid和Secret放在后端进行，然后通过接口的形式返回给前端。

后端读取openid

笔者用的是node写后端哈。使用request模块来发起url请求

// 获取openid
router.get('/getopenid', function(req,res, next){
    var appId = ''; // 换成自己的APPID
    var secret = ''; // 换成自己的secret
    var params = URL.parse(req.url, true).query;
    var url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appId + '&secret=' + secret + '&js_code=' + params.code + '&grant_type=authorization_code';
    request(url, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            console.log(body) 
        }
        res.send(body);
    })
})
复制代码

前端读取getopenid接口

修改前面读取openid的方法

onReady: function (options) {
    const that = this;
    wx.login({
      //获取code
      success: function (res) {
        var code = res.code; //返回code
        wx.request({
          url: `${BASE_URL}/apis/getopenid`,
          method: 'get',
          data: {
            code: code,
          },
          success: function (res) {
            that.setData({
              openid: res.data.openid
            })
          }
        })
      }
    })
  },
复制代码

这样就完美的实现了读取用户的openid。
记住不要把自己的appid和secret放在前端代码中。

如果有什么好的建议或者意见请关注公众号

转载于:https://juejin.im/post/5c162ed3f265da613074c4ed