89

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

首先说一下,完成自定义分享信息的,从无到有的流程:

基础硬件服务:

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

    1. 购买域名,并备案,我是在阿里云购买的,备案需要十几个工作日。
    2. 购买ip,然后设置上面的域名,解析到该ip,这个时间可以快到忽略。
  • 拥有自己的服务器,来存放自己页面项目:

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

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

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

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

  • 打开微信公众平台 https://mp.weixin.qq.com/,使用邮箱注册,注意,一个邮箱只能注册一个微信公众平台账号,一个账号只能选择一种账号分类且不能更改,这里一定要慎重,这里选择订阅号。
  • 可选个人类型、企业类型等等,其中,个人类型是不没有分享定制功能的,但企业类型我又不符合。。。最终我还是选择的个人类型,因为即使我的账号没有权限,但微信公众号里面,提供一个功能全开的测试账号,使用测试账号可以进行学习和测试,还是没问题的。
  • 填写信息,绑定微信,注册完成,登录进去。
  • 为了进行开发,需要在这里和你的后台项目和前端项目进行对应的配置,让微信确认后台项目和前台项目都是你的之后,才会提供服务。

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

      首先需要说明,由于订阅号的功能比较少,如果只是进行学习,建议在 开发 => 开发者工具中选择使用公众平台测试帐号进行学习性开发,这样可以使用全功能的微信服务,配置也比较少。
      下面的配置步骤均是使用自己的账号需要进行的配置
      1. 开发 => 基本配置 => 公众号开发信息,在这里记下开发者ID(AppID),接着开通服务,记下开发者密码(AppSecret),开发中会需要输入。
      2. 设置IP白名单,这里写的是自己的服务器IP地址,因为功能上线后,需要使用这台服务器,通过开发者ID和密码来向微信服务区获取自己服务的access_token
      3. 进行下面的后台项目,目的是让微信确定这个后台项目是你的,检验方法是微信发起一个get请求,你返回正确的返回值,启用此配置时调用:

        • url:接口地址,比如http://wx.my.com/forWx
        • Token:完全自定义的一个字符串,相当于个暗号,你的返回值需要这个字符串参与拼装。
        • EncodingAESKey:随机生成即可
        • 消息加解密方式:自选,这里我使用的是明文模式
    • 有关前端项目的配置:

      1. 设置 => 公众号设置 => 功能设置 => 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,再加上自己的AppIdAppSecret,调用微信的接口,获取用户的access_token
  • 最后再使用用户的openIdaccess_token,成功获取用户信息

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 页面描述 -->
  <meta name="description" content=""/>
  <!-- 页面关键词 -->
  <meta name="keywords" content="" />
  <!-- 搜索引擎抓取 -->
  <meta name="robots" content="index,follow"/>
  <!-- 启用360浏览器的极速模式(webkit) -->
  <meta name="renderer" content="webkit">
  <!-- 避免IE使用兼容模式 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 不让百度转码 -->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
  <meta name="HandheldFriendly" content="true">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
  <!-- 优先使用 IE 最新版本和 Chrome -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="shortcut icon" type="image/x-icon" href="../static/favicon.ico">
  <title>微信</title>
  <style>
    html, body {
      background-color: skyblue;
      font-size: 16px;
      height: 50%;
      width: 100%;
    }
    #index {
      padding: 10px;
    }
    #index .box > div {
      cursor: pointer;
      background-color: #fff;
      display: inline-block;
      padding: 5px;
      margin: 10px;
    }
    #index .box .getUserInfo {
      display: none;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
  <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
</head>
<body>
  <div id="index">
    <div class="box">
      <div class="initOauth2" type="snsapi_base">获取微信授权(静默)</div>
      <div class="initOauth2" type="snsapi_userinfo">获取微信授权(弹框)</div>
      <br>
      <div class="wxSweep">扫一扫</div>
      <br>
      <div class="getUserInfo">获取用户信息</div>
    </div>
    <div class="userInfo"></div>
  </div>
</body>
<script>
  let BASE_URL = 'http://wxtestapi.junlli.com'

  // 获取 url 参数
  const getValue = () => {
    let flag = decodeURI(window.location.search.substr(1));
    if (!flag) return undefined
    let arr = flag.split('&')
    if (arr.length <= 0) return undefined
    let obj = {}
    for (let i = 0; i < arr.length; i++) {
      let tempArr = arr[i].split('=')
      obj[tempArr[0]] = tempArr[1]
    }
    return obj
  }

  let urlParams = getValue()
  let code
  // 判断是否有code
  if (urlParams && urlParams.code) {
    code = urlParams.code
    $('.getUserInfo').css('display', 'inline-block')
  }

  $('.getUserInfo').on('click', function() {
    if (!code) return alert('请重新获取授权')
    $.ajax({
      url: BASE_URL + '/getUserInfo',
      type: 'post',
      data: {
        code,
      },
      success: function(data) {
        console.log(data)
        $('.userInfo').html(JSON.stringify(data))
      },
      error: function(error) {
        console.log(error)
        alert('请重新获取授权')
      }
    })
  })

  // 获取微信授权
  $('.box .initOauth2').on('click', function() {
    wxInitOauth2($(this).attr('type'))
  })
  // 初始化 微信授权
  wxInitOauth2 = type => {
    let url = window.location.origin + window.location.pathname
    console.log('url', url)
    $.ajax({
      url: BASE_URL + '/getOauth2',
      type: 'post',
      data: {
        url,
        type,
        state: 'abcde'
      },
      success: function(data) {
        // 去跳转
        window.location.href = data.url
        // console.log(data)
      },
      error: function(error) {
        console.log(error)
      },
    })
  }
</script>
</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)
  }
})

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


千鸟语
609 声望24 粉丝

前端开发多年,正在努力向全栈方向拓展