微信开发-获取用户授权-node.js实现

摘要：本篇主要讲述，如何在微信中打开自家页面后，弹窗请求用户授权，以便拿到用户的微信信息。填写信息，绑定微信，注册完成，登录进去。

本篇主要讲述，如何在微信中打开自家页面后，弹窗请求用户授权，以便拿到用户的微信信息。

基础硬件服务：

需要一个公网可以访问的有效域名：

购买域名，并备案，我是在阿里云购买的，备案需要十几个工作日。

购买ip，然后设置上面的域名，解析到该ip，这个时间可以快到忽略。

拥有自己的服务器，来存放自己页面项目：

我还是在阿里云购买购买服务器，这个花费最大，几百元一年的使用权。  
而且这个服务器，本质就是一台电脑，是电脑就有配置，我目前只是自己学习使用，配置几乎是最低的，而且购买的套餐自带公网ip，这么一来我连上面购买ip的钱也省了。

综上所述，最终我只购买了域名和一个套餐自带公网ip的服务器，服务器用来放置前端项目和后台项目。

阿里云ECS：https://cn.aliyun.com/product/ecs

微信公众平台，开发者认证

打开微信公众平台 https://mp.weixin.qq.com/，使用邮箱注册，注意，一个邮箱只能注册一个微信公众平台账号，一个账号只能选择一种账号分类且不能更改，这里一定要慎重，这里选择订阅号。

可选个人类型、企业类型等等，其中，个人类型是不没有分享定制功能的，但企业类型我又不符合。。。最终我还是选择的个人类型，因为即使我的账号没有权限，但微信公众号里面，提供一个功能全开的测试账号，使用测试账号可以进行学习和测试，还是没问题的。

填写信息，绑定微信，注册完成，登录进去。

为了进行开发，需要在这里和你的后台项目和前端项目进行对应的配置，让微信确认后台项目和前台项目都是你的之后，才会提供服务。

有关服务器端和后台项目的配置：

首先需要说明，由于订阅号的功能比较少，如果只是进行学习，建议在 开发 => 开发者工具中选择使用公众平台测试帐号进行学习性开发，这样可以使用全功能的微信服务，配置也比较少。  
下面的配置步骤均是使用自己的账号需要进行的配置

开发 => 基本配置 => 公众号开发信息，在这里记下开发者ID(AppID)，接着开通服务，记下开发者密码(AppSecret)，开发中会需要输入。

设置IP白名单，这里写的是自己的服务器IP地址，因为功能上线后，需要使用这台服务器，通过开发者ID和密码来向微信服务区获取自己服务的access_token

进行下面的后台项目，目的是让微信确定这个后台项目是你的，检验方法是微信发起一个get请求，你返回正确的返回值，启用此配置时调用：

url：接口地址，比如http://wx.my.com/forWx

Token：完全自定义的一个字符串，相当于个暗号，你的返回值需要这个字符串参与拼装。

EncodingAESKey：随机生成即可

消息加解密方式：自选，这里我使用的是明文模式

有关前端项目的配置：

设置 => 公众号设置 => 功能设置 => JS接口安全域名在此处添加你的要使用微信sdk功能的网站的域名，比如wx.qq.com或者wx.qq.com/user，最多可写三个，且需要验证。

> 验证的方式，就是将一个微信提供的txt文件，放在此域名对应的放置于服务器中的web项目的访问根目录中，需要和主文件（大部分默认为```index.html```）放在同一级，当提交的时候，微信会进行访问，来获取文件，确认此域名是你的。

配置完成后，就可以进行开发了。

下面进入代码阶段。

首先，上面证明服务是自己的部分，我们需要实现一个接口，我用http://wx.my.com/forWx打的比方，那么为了启用配置，我需要实现/forWx给微信调用，下面是代码：

node的基础环境搭建省略，这里只写接口内部方法了，关键是参数加密拼装

const crypto = require("crypto")  // 引入加密模块
const config = require("./config") // 引入配置文件
// 提供给微信调用
server.get("/forWx", function (req, res) {
  res.header("Access-Control-Allow-Origin", "*")
  // 1.获取微信服务器Get请求的参数 signature、timestamp、nonce、echostr
  let signature = req.query.signature // 微信加密签名
  let timestamp = req.query.timestamp // 时间戳
  let nonce = req.query.nonce // 随机数
  let echostr = req.query.echost // 随机字符串

  // 2.将token、timestamp、nonce三个参数进行字典序排序，其中token就是设置在微信页面中的那个自定义字符串
  let array = [config.token, timestamp, nonce]
  array.sort()

  // 3.将三个参数字符串拼接成一个字符串进行sha1加密
  let tempStr = array.join("")
  const hashCode = crypto.createHash("sha1") //创建加密类型 
  let resultCode = hashCode.update(tempStr, "utf8").digest("hex")
  
  //4.开发者获得加密后的字符串可与signature对比，标识该请求来源于微信
  if (resultCode === signature) {
    res.send(echostr)
  } else {
    res.send("mismatch")
  }
})

完成，上面是证明服务器是我的，后面还需要证明前端项目是我的，这个就跳过了，因为太简单，直接下载那个文件，放到自己服务器中，前端项目的index.html同级即可

上面的操作，是只要想进行微信公页面开发，必须要有的步骤，一切的基础。

首先顺着功能使用流程，顺一下实现此功能的方法：

用户在微信打开页面后，立即或者通过方法触发ajax，把当前url和一些state（自定义的数据，因为弹窗请求用户授权，是需要跳转页面的，这个state就是会帮你带到下个页面链接中的数据）作为请求参数，请求自己的后台接口。

后台请求微信服务器，把以下作为参数，拼装到某个固定的微信指定的url后，返回给前端，参数为：

appId：自己的AppId

redirect_uri：前端给的url

scope：授权方式，是静默授权（只能获取用户openId）还是弹窗授权（能获取用户微信个人信息）

state：要带到新页面的参数

前端拿到后端拼好的这个url，直接window.location.href暴力跳转

如果静默授权，则直接用户无感，如果是弹窗授权，则新页面（微信方提供的页面）会弹窗询问用户，是否授权

用户同意授权后，微信再次跳转页面，即跳转到之前传的你的url地址中，还会把state参数给你带上，此外，还多了个code参数，即openId

新页面中，可以使用用户的openId，再加上自己的AppId和AppSecret，调用微信的接口，获取用户的access_token

最后再使用用户的openId和access_token，成功获取用户信息

下面是前端获取微信授权的...html页面

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  


  

    

      
获取微信授权(静默)
      
获取微信授权(弹框)
      

      
扫一扫
      

      
获取用户信息
    
    

  

下面是node后台代码

const config = require("./config") // 引入配置文件

// 通过 code 获取用户的 openId 和 access_token
const getOpenIdAndAccessToken = code => {
  let params = {
    appid: config.appId,
    secret: config.appSecret,
    code,
    grant_type: "authorization_code"
  }
  let url = `https://api.weixin.qq.com/sns/oauth2/access_token?${qs.stringify(params)}`
  return new Promise((resolve, reject) => {
    request(url, function (error, res, body) {
      if (res) {
        let bodyObj = JSON.parse(body)
        resolve(bodyObj);
      } else {
        reject(error);
      }
    })
  })
}

// 获取用户信息
const getUserInfo = ({ access_token, openid }) => {
  let params = {
    access_token,
    openid,
    lang: "zh_CN"
  };
  let url = `https://api.weixin.qq.com/sns/userinfo?${qs.stringify(params)}`
  return new Promise((resolve, reject) => {
    request(url, function (err, res, body) {
      if (res) {
        resolve(JSON.parse(body))
      } else {
        reject(err);
      }
    });
  })
}

// 获取微信授权 --- code
server.post("/getOauth2", (req, res) => {
  try {
    let params = req.body
    let redirect_uri = params.url
    let state = params.state
    let type = params.type
    // 第一步：用户同意授权，获取code
    // type:snsapi_base // 不弹出授权页面，直接跳转，只能获取用户openid
    // type:snsapi_userinfo // 弹出授权页面，可通过openid拿到昵称、性别、所在地
    var scope = type // 弹出授权页面，拿到code
    let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${config.appId}&redirect_uri=${redirect_uri}&response_type=code&scope=${scope}${state ? "&state=" + state : ""}#wechat_redirect`
    res.send({ url });
  } catch (error) {
    res.send(error)
  }
})


// 获取用户个人信息
server.post("/getUserInfo", (req, res) => {
  try {
    let params = req.body
    let code = params.code
    // 先用 code 换取 openId 和 access_token
    getOpenIdAndAccessToken(code).then(obj => {
      // 用 openId 和 access_token 获取个人信息
      getUserInfo(obj).then(data => {
        res.send(data)
      }).catch(error => res.send(error))
    }).catch(error => res(error))
  } catch (error) {
    res.send(error)
  }
})

整体功能实现的步骤和具体代码如上，请酌情参考。