公众号开发鉴权及sdk注入

发表时间：2020-10-10

发布人：葵宇科技

浏览次数：67

一、服务器配置

进入微信公众号平台。
找到：开发 => 基本配置
然后在右侧就有一些公众号的开发信息，其中appid和AppSecret会十分有用，还有服务器配置，这就是我们要配置的第一项。
在这里插入图片描述
服务器地址就是要验证请求是不是来自微信服务器，token可以自己填写，后期是用来进行一些加密算法的。
在点击提交的时候会显示配置失败，那是需要后台的一些验证。
这里会涉及到前后的一些交互，所以我使用的就是express框架搭建前后端的项目运行。
使用express应用程序生成器快速创建

npm install -g express-generator

express --no-view myapp

这样就快速创建了一个项目

├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.pug
    ├── index.pug
    └── layout.pug

具体的目录信息参照官网
https://www.expressjs.com.cn/starter/generator.html
项目创建成功后就可以部署到新浪云中。新浪云有文档。
在这里插入图片描述
把你的远程仓库克隆下来，里面是个空仓库，然后把你创建的项目复制进来（node_modules这个文件夹不用），然后提交代码，最后推送到远程仓库，这个时候会自动给你下包，同时进行部署，会耗时一段时间。部署完成就可以使用新浪云提供的二级域名进行访问。

服务器配置填写完成后点击提交，这时会向你的服务器发送请求，同时会携带四个参数：

timestamp：时间戳
nonce：随机字符串
signature：签名
echostr：返回的字符串

后台接收这四个参数在配合token进行签名算法加密，然后和请求中的签名进行比对，如果一致就返回echostr，那么这个时候服务器就可以配置成功了。

签名算法：timestamp，nonce，token进行字典排序，把排序后的数据拼接成字符串然后使用sha1进行加密，就会得到签名。

router.get('/auth', (req, res) => {
  const { timestamp, nonce, signature, echostr } = req.query;
  const token = "xxxxx";
  const sha1Str = sha1([timestamp, nonce, token].sort().join(''));
  if (sha1Str === signature) {
    res.set('Content-Type', 'text/plain')
    res.send(echostr)
  } else {
    res.send('err')
  }
})

这个时候点击提交，就会显示配置成功。

二、js接口安全域名
设置 => 公众号设置 => 功能设置
在这里插入图片描述
填入服务器域名，同时还需要把它指定的文件下载下来放到项目的根目录下。

在这里插入图片描述
这个是使用express搭建的项目，其中public就是静态资源存放的目录，打开网址就会显示这个目录下的文件，所以把下载好的文件放到这个文件的根目录即可。没有这一步的话，添加不成功。仓库修改了，需要重新提交代码，重新部署。

三、js-sdk的注入

要想使用微信的接口那么就需要引入微信提供的js文件，在项目开发中也提供了js-sdk。注入js-sdk则需要一些配置项，其中就需要后台返回的签名包。

为了能够成功使用微信的功能，所以就写一个接口来返回签名包。

1、获取access_token
2、根据access_token请求拿到ticket
3、创建数据对象包含jsapi_ticket，url，noncestr，timestamp
4、字段字典排序
5、拼接数据
6、sha1加密

功能封装config.js

module.exports = {
    appid: "wx9543e309a2c227d8",
    secret: "59fb4912887403d299fe3b3936c6d4d6"
}

const { appid, secret } = require('../config');
const axios = require('axios');
const sha1 = require('sha1');
let getTicket = async () => {
    //获取token
    let tokenUrl = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`
    let token_data = await axios.get(tokenUrl);
    let token = token_data.data.access_token;
    //获取ticket
    let ticketUrl = `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${token}&type=jsapi`
    let ticket_data = await axios.get(ticketUrl);
    return ticket_data.data.ticket
}
let sign = async (url) => {
    let jsapi_ticket = await getTicket();
    //创建数据
    let obj = {
        jsapi_ticket,
        url,
        noncestr: Math.random().toString(36).substring(2, 15),
        timestamp: parseInt(new Date().getTime() / 1000) + ''
    }
    //开始生成签名
    //1、字段字典排序
    let keys = Object.keys(obj).sort();
    //2、数据进行字段排序后的对象
    let newObj = {};
    keys.forEach(key => {
        newObj[key] = obj[key];
    })
    //3、拼接数据
    let str = '';
    for (const k in newObj) {
        str += "&" + k + "=" + newObj[k]
    }
    //4、sha1加密
    str = sha1(str.substr(1))
    //5、后台数据返回
    obj.signature = str
    return obj
}
module.exports = sign

接口处理


router.get('/jsapi', async (req, res) => {
  let url = decodeURIComponent(req.query.url)
  let config = await sign(url)
  res.send(config)
})

前端可以传入url参数
这样就会返回签名包供前端使用。

四、前端接口调用
在public中的index.html中进行测试

引入文件

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.min.js"></script>

请求数据，配置sdk

<script>
  let url = encodeURIComponent(location.href.split('#')[0]);
  axios.get(`http://zhancjian.applinzi.com/jsapi?url=${url}`).then(res => {
    console.log(res);
    wx.config({
      debug: true,
      appId: 'wx9543e309a2c227d8',
      timestamp: res.timestamp,
      nonceStr: res.noncestr,
      signature: res.signature,
      jsApiList: ['getLocation', 'scanQRCode']
    });
  })
</script>

现在已经配置成功，然后就可以调用微信接口了，这里试验了两个接口获取地理位置和调起微信扫一扫。

<button onclick="getl()">获取地理位置</button>
<button onclick="sao()">扫一扫</button>

<script>
  function getl() {
    wx.getLocation({
      type: 'wgs84',
      success: res => {
        console.log(res);
      }
    });
  }
  function sao() {
    wx.scanQRCode({
      needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
      scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
      success: function (res) {
        var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
        console.log(result);
      }
    });
  }
</script>