时间仓促，暂时记录一下，有问题请留言
背景：目前客户项目有两套系统。一套暂时定为A系统，另一套为B系统，两套系统下有不同的公众号，小程序。
需求：B系统为用户端系统，需要发送公众号模板消息，所以需要用户openid，但A系统是80端口，B系统是3000端口，公众号网页授权域名不能带端口，所以只能在A系统的公众号获取到用户openid，推送到B系统数据库里。通过unionid 和小程序用户绑定起来
unionid：如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过 UnionID 来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的 UnionID 是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，UnionID是相同的。（借鉴文档说明）
unionid文档链接：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/union-id.html
公众号开发文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html#1
公众号模板消息：https://developers.weixin.qq.com/doc/offiaccount/Message_Management/Template_Message_Interface.html
一、准备工作
1. 在微信公众平平台，配置ip白名单，否则请求官方接口受限
2. 配置网页授权域名，下面用户授权接口中的redirect_uri，需要在此授权域名下才可以
二、开始编写代码
获取用户openid过程和推送
- 前端：添加授权页面，
- 前端：用户同意授权，获取到code，拼接成一个获取access_token的url，发送给后端
- 后端：通过code换取网页授权access_token
- 后端：用前端的url，进行请求，解析出来access_token和openid
- 后端：拉取用户信息
1. 前端：添加授权页面，用于用户授权，获取code，拼接成一个获取access_token的url，发送给后端
2. 后端：通过code换取网页授权access_token
获取到前端给的url，request请求之后，进行解析access_token和openid
3. 拉取用户信息，
1. 在A系统公众号下，添加一个授权页面，里面有一个简易的授权按钮就足够了，
<a href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=appid&redirect_uri=redirect_uri&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect"> 授权按钮 </a>
a标签url参数说明：
| url | https://open.weixin.qq.com/connect/oauth2/authorize |
| appid | 公众号appid （唯一标识） |
| redirect_uri | 授权后重定向的回调链接地址（需要网页授权域名下的链接地址） |
| response_type | code |
| scope |
snsapi_base（不弹出授权页面，直接跳转，只能获取用户openid） snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ） |
2. 获取code
当点击了此授权按钮之后，会重定向到redirect_uri，此时的url上是带着code的，需要截取下来
截取参数方法：
function getUrlParms(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; }
调用方法获取code, let code = getUrlParms('code') if (code != null && code != undefined) {
当获取的code不是undefined的，就去调用获取access_token函数 getAccessToken(code) }
3. 通过code 获取 access_token
在前台生成获取access_token的url，发送给后端，直接request就可以了
参数说明：
| appid | 公众号appid |
| secret | 公众号密钥 |
| code | 第二步获取到的code |
因为要从A系统去请求B系统的方法，存在跨域，这里使用ajax的jsonp，来解决。
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
/**
* 1. 获取code
* 2. code 换取 access_token
*/
function getAccessToken(code) {
let url = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appid}&secret=${secret}&code=${code}&grant_type=authorization_code`
console.log(url)
let url2 = `https://test.com/getAccessToken`
$.ajax({
type: 'post',
url: url2,
dataType: "jsonp",//数据类型为jsonp
data: { url: url },//传递的值
jsonpCallback: "callback",//服务端用于接收callback调用的function名的参数
success: (res) => {
console.log(res)
},
fail: (err) => {
console.log(err)
}
})
}
4. 获取用户信息
let getUserInfo = async (accessToken, openid, callback) => { let url = `https://api.weixin.qq.com/sns/userinfo?access_token=${accessToken}&openid=${openid}&lang=zh_CN)` let data = await getRequest(url) return data }
5. 获取小程序用户的信息，
小程序调用wx.login， 获取到code，然后调用获取openid的接口即可，回调数据里就有unionid。
获取openid异常错误：
{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: Vffd863Vf-Vlc6 ]"}
有可能造成这个错误的原因：
1. 拉取用户信息请用snsapi_userinfo，不能使用snsapi_base
2. 需要刷新access_token，https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html#2