時間倉促，暫時記錄一下，有問題請留言
背景：目前客戶項目有兩套系統。一套暫時定為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