美文网首页
微信开发常用功能总结

微信开发常用功能总结

作者: 爱扎马尾的小狮子 | 来源:发表于2018-08-02 17:11 被阅读219次

    一、获取access_token

    参考文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183

    1.用途

    调用公众号的各个接口都需要用到access_token

    备注:占用大小至少512个字符空间、有效期目前为2个小时,需要定时刷新,重复刷新获取惠导致上一次获取的access_token失效

    2.获取方式
    https请求方式: GET
    https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
    

    备注:调用接口时,请登录“微信公众平台-开发-基本配置”提前将服务器IP地址添加到IP白名单中,点击查看设置方法,否则将无法调用成功。小程序无需配置IP白名单。

    注意获取到access_token后需要存在数据库中,并且设置一个时间(2小时过期),最好在过期之前重新获取一次,更新数据库中的值。

    二、接口配置信息(验证服务器有效性)

    配置服务器地址需要一个外网地址,开发过程中可以使用内网穿透工具,将一个外网地址指向你的本地服务,方便调试。

    常用的内网穿透工具:
    mac: ngrok
    windows: 花生壳、nat123

    image.png

    url:服务器接口地址
    token:信息需要与服务器定义的token一直

    点击提交按钮时,微信会向服务器发送一个get请求,请求地址就是配置的url,这个请求会携带signature(微信加密签名,signature结合了开发者填写的token参数和请求中的timestamp参数、nonce参数)、timestamp(时间戳)、nonce(随机数)、echostr(随机字符串)四个字符串过来

    服务器拿到这些字符串之后进行校验:
    1)将token、timestamp、nonce三个参数进行字典序排序
    2)将三个参数字符串拼接成一个字符串进行sha1加密
    3)开发者获得加密后的字符串可与signature对比,标识该请求来源于微信

    代码可参考:


    image.png

    三、被动回复用户消息

    1.接收post请求

    当用户向微信公众号发送消息的时候,微信会向我们认证(即之前配置的服务器地址)发送请求,配置服务器地址的时候向服务器发送的get请求,此时发送的post请求,请求地址相同。

    2.处理请求返回信息

    当服务器端接收到请求时,需要验证一下请求来源,即也需要配置服务器地址时的判断,判断成功,可以获取用户发送来的消息,并且返回给用户信息

    const token = opts.token
    const {
      signature,
      nonce,
      timestamp,
      echostr
    } = ctx.query
    
    const str = [token, timestamp, nonce].sort().join('')
    const sha = sha1(str)
    if (sha !== signature) {
      ctx.body = 'Failed'
      return false
    }
    
    const data = await getRawBody(ctx.req, {
      length: ctx.length,
      limit: '1mb',
      encoding: ctx.charset
    })
    
    const content = await util.parseXML(data)
    console.log(content) //用户向微信公众号发送的消息
    const replyBody = `哈哈哈,欢迎来的v家族.点击<a href="http://coding.imooc.com">viho viho</a>`//定义用户返回的信息
    
    //注意这一段模版<与!之间不能有空格,如果有空格,向微信公众号发送消息时会返回“该公众号提供的服务出现故障,请稍后再试”
    const xml = `<xml><ToUserName><![CDATA[${content.xml.FromUserName}]]></ToUserName><FromUserName><![CDATA[${content.xml.ToUserName}]]></FromUserName><CreateTime>12345678</CreateTime><MsgType><![CDATA[text]]></MsgType><Content><![CDATA[${replyBody}]]></Content></xml>`
    console.log('--replyBody', replyBody)
    ctx.status = 200
    ctx.type = 'application/xml'
    ctx.body = xml
    

    注意:
    接收消息的格式和回复的格式不一样,所以在判断的时候会有区别。可以通过判断接收到的消息格式或内容作出处理,返回对应的回复消息格式或内容。
    参考文档如下:
    接收消息
    回复消息

    四、JS-SDK

    1.基本步骤:

    步骤一:绑定域名
    登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”

    步骤二:引入JS文件
    在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js

    步骤三:通过config接口注入权限验证配置

    wx.config({
      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
      appId: '', // 必填,公众号的唯一标识
      timestamp: , // 必填,生成签名的时间戳
      nonceStr: '', // 必填,生成签名的随机串
      signature: '',// 必填,签名
      jsApiList: [] // 必填,需要使用的JS接口列表
    });
    

    步骤四:通过ready接口处理成功验证

    步骤五:通过error接口处理失败验证

    2.签名算法

    备注:此部分若想使用现成的代码测试,可以参考 微信开发总结

    步骤三中涉及的appId、timestamp、nonceStr、signature 这四个参数是需要发送请求到后端服务器获取的。
    后端服务器需要做一个签名才能生成signature。

    具体实现:

    步骤一:获取access_token
    参考获取access_token部分

    步骤二:获取jsapi_ticket
    access_token 采用http GET方式请求获得jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存jsapi_ticket):https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

    步骤三:签名算法
    参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。

    参考代码:

    /**
     * 创建随机数
     */
    function createNoncestr() {
      return Math.random().toString(35).substring(2, 15)
    }
    
    /**
     * 生成时间戳
     */
    function createTimestamp() {
      return parseInt((+new Date()) / 1000)
    }
    
    /**
     * 签名算法
     */
    function signIt(args) {
      const keys = Object.keys(args)
      keys.sort()
      let str = ''
    
      keys.forEach(key => {
        str += '&' + key.toLowerCase() + '=' + args[key]
      })
    
      str = str.substring(1)
      console.log('str--', str)
      const sha = sha1(str) //需要引入外部sha1依赖包
      return sha
    }
    
    /**
     * 签名函数
     * @param ticket
     * @param url
     * @returns {{noncestr: *, timestamp: *, signature: *}}
     */
    function sign(ticket, url) {
      const nonceStr = createNoncestr()
      const timestamp = createTimestamp()
      const signature = signIt({nonceStr, timestamp, jsapi_ticket: ticket, url})
    
      return {
        nonceStr,
        timestamp,
        signature
      }
    }
    

    五、网页授权、获取用户信息

    1.类别

    (1)以snsapi_base为scope发起的网页授权,用户无感知,静默授权,但只能获取到openid
    (2)以snsapi_userinfo为scope发起的网页授权,弹出授权确认页面,用户点击确认授权后才能获取到用户信息
    注意:对于已关注公众号的用户,如果用户从公众号的会话或者自定义菜单进入本公众号的网页授权页,即使是scope为snsapi_userinfo,也是静默授权,用户无感知。

    2.基本流程

    (1)在公众中先设置授权回调域名


    image.png

    (2)用户同意授权,获取code
    可以让用户直接访问下面的url地址,但是这个url过长,而且可以修改url中的参数,因此最好向服务器端发起一个get请求,由服务器端重定向到下面地址。
    https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

    用户访问上面这个地址,如果合法会跳转redirect_uri参数值的地址,并在这个地址上加上code和state参数。

    (3)通过code换取网页授权access_token
    注意:这里的access_token是专门用来获取授权用户信息使用的,与其他微信接口,需要通过基础支持中的“获取access_token”接口来获取到的普通access_token是两个不一样的参数,只是名字相同。
    每个code只能使用一次。

    https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

    (4)刷新access_token(如果需要)
    https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

    (5)拉取用户信息(需scope为 snsapi_userinfo)
    https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

    相关文章

      网友评论

          本文标题:微信开发常用功能总结

          本文链接:https://www.haomeiwen.com/subject/xhkfpftx.html