淺析微信支付：微信公眾號網頁授權
摘要：
本文是【淺析微信支付】系列文章的第四篇，主要講解微信支付前如何獲取獲取網頁授權及使用者資訊獲取。
淺析微信支付系列已經更新三篇了喲～，沒有看過的朋友們可以看一下哦。
淺析微信支付：開發前的準備
淺析微信支付：前篇大綱
淺析微信支付：微信支付簡單介紹（小程式、公眾號、A...
本文是【淺析微信支付】系列文章的第四篇，主要講解微信支付前如何獲取獲取網頁授權及使用者資訊獲取。
淺析微信支付系列已經更新三篇了喲～，沒有看過的朋友們可以看一下哦。
ofollow,noindex" target="_blank">淺析微信支付：開發前的準備
淺析微信支付：微信支付簡單介紹（小程式、公眾號、App、H5）
1、開發前的準備
首先，如果沒有看過本系列 淺析微信支付：開發前的準備 的朋友需要看一下這篇文章，連結在上方；本文需要用到開發前準備中的幾個知識點：設定安全、設定白名單、得到公眾號一系列資訊（appid\apiKey等）；如果需要在本地開發測試，還需要下載 微信開發者工具 和 微信公眾平臺介面測試帳號 。
下面我們開始進入開發階段。
2、設定測試號相關資訊
因為專案在開發階段的時候，需要本地除錯，所以需要使用測試號來驗證程式碼是否正確，所以下面會講如何設定測試號相關配置；
首先我們進入 微信公眾平臺介面測試帳號申請 頁面，點選登入即可使用微信賬號登入（一個微訊號只有一個測試號）。
登入後可以進入測試號管理介面，如下：
按要求設定上方圖片中的配置，即可減少80%的問題，如果呼叫時還有其他問題，請到文末新增作為微信，可進入討論群和大家一起交流。
3、獲取微信網頁授權
使用以下程式碼獲取微信網頁授權：
微信官方js檔案：
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
封裝的微信工具檔案 weixin_util.js ：
<script type="text/javascript">
// 微信預設設定配置方法
function weixinConfig(appid, timestamp, noncestr, signature) {
wx.config({
debug : false, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
// debug : true,
appId :appid, // 必填，公眾號的唯一標識
timestamp : timestamp, // 必填，生成簽名的時間戳
nonceStr : noncestr, // 必填，生成簽名的隨機串
signature : signature,// 必填，簽名，見附錄1
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'hideMenuItems',
'showMenuItems',
'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem',
'chooseWXPay',
]
// 必填，需要使用的JS介面列表，所有JS介面列表見附錄2
});
}
// 獲取使用者的openid
function getBaseInfo(userId, state){
if (userId === '') {
//1.獲取到code
$appid="xxx";
$redirect_uri=encodeURI("http://127.0.0.1:8888/weixin/auth/authorize.do");//這裡的地址需要http://
$url="https://open.weixin.qq.com/connect/oauth2/authorize?appid="+$appid+"&redirect_uri="+$redirect_uri+"&response_type=code&scope=snsapi_userinfo&state=" + state + "#wechat_redirect";
window.location.href = $url;
}
}
</script>
呼叫微信config方法並獲取網頁授權：
<script type="text/javascript">
// 微信功能配置
weixinConfig('${appid}',${timestamp},'${noncestr}','${signature}');
// 使用者授權登陸
getBaseInfo('${(userId)}' ,'redirect_uri');
</script>
如果訪問頁面路徑，得到以下顯示，就已經成功獲取網頁授權，其他均為失敗：
如果出現其他錯誤，需要檢查一下第一步時設定的路徑安全介面、域名是否正確，開啟weixinConfig中的debug模式，看是否為沒有正確設定功能模組；如果還不能解決，請到文末看樓主上一篇文章或者新增作者進群即可。
4、獲取微信使用者資訊
這裡說一下上面獲取使用者授權的具體引數：
第一步，獲取config需要的基礎引數：
/** * 根據appid獲取wx.config需要的基礎引數 * @param reqMap requestUrl 請求頁面地址、appid appid * @return json * * @author yclimb * @date 2018/9/25 */ @ApiOperation(value = "微信公眾號|config需要的基礎引數", httpMethod = "POST", notes = "config需要的基礎引數") @PostMapping("/getSignature") public AppMessage getSignature(@RequestBody Map<String, String> reqMap) { Map<String, Object> map = Maps.newHashMap(); switch (reqMap.get("appid")) { case WXPayConstants.APP_ID: map = wxUtils.getSignature(reqMap.get("requestUrl"), reqMap.get("appid"), BaseConstants.WX_MINI_PROGRAM_YUEDIAN_CODE); break; case WXPayConstants.APP_ID_CHUNBO: map = wxUtils.getSignature(reqMap.get("requestUrl"), reqMap.get("appid"), BaseConstants.WX_CHUNBO_JSAPI_YUEDIAN_CODE); break; } return AppMessage.success(map); }
第二部分：獲取使用者授權的基礎資訊：
// 這裡的appid就是咋們測試號的appid
$appid="xxx";
// 這裡的地址需要http://且必須encodeURI，此地址為獲取使用者資訊後，微信自動轉發的伺服器端介面，用來接收微信的授權code，在後端處理而得到使用者基本資訊
$redirect_uri=encodeURI("http://127.0.0.1:8888/weixin/auth/authorize.do");
// 微信官方的授權介面
$url="https://open.weixin.qq.com/connect/oauth2/authorize?appid="+$appid+"&redirect_uri="+$redirect_uri+"&response_type=code&scope=snsapi_userinfo&state=" + state + "#wechat_redirect";
// state可以用來區分特殊引數和配置
具體可見微信官方文件，文件如下： 微信網頁授權介面
以上為js頁面處理，下面我們來具體講解 redirect_uri 這個介面中需要處理的邏輯；
WXAuthController ：
/**
* 微信網頁授權
* https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842
* 第一步：使用者同意授權，獲取code
* 第二步：通過code換取網頁授權access_token
* @return str
*
* @author yclimb
* @date 2018/7/30
*/
@ApiOperation(value = "微信使用者|網頁授權", httpMethod = "GET", notes = "獲取前端微信使用者的網頁授權，得到使用者基礎資訊")
@GetMapping("/authorize")
public AppMessage authorize(HttpServletRequest request) {
// 跳轉頁面標識
String state = request.getParameter("state");
// 通過code獲取access_token
String code = request.getParameter("code");
log.info("authorize:code:{}", code);
String appid;
String secret;
// 根據不同的state得到不同的微信公眾號網頁授權
switch (state) {
case STATE_ASYD:
appid = WXPayConstants.APP_ID_ASYD;
secret = WXPayConstants.SECRET_ASYD;
break;
default:
appid = WXPayConstants.APP_ID_CHUNBO;
secret = WXPayConstants.SECRET_CHUNBO;
break;
}
// 獲取access_token和openid
JSONObject jsonToken = wxUtils.getJsapiAccessTokenByCode(code, appid, secret);
if (null == jsonToken) {
return AppMessage.error(-2);
}
return AppMessage.success(jsonToken);
}
WXUtils ：
/**
* 網頁授權獲取使用者資訊時用於獲取access_token以及openid
* 請求路徑：https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code(最後一個引數不變)
*
* @param code c
* @return access_token json obj
* @author yclimb
* @date 2018/7/30
*/
public JSONObject getJsapiAccessTokenByCode(String code, String appid, String secret) {
if (StringUtils.isBlank(code)) {
return null;
}
try {
// 獲取access_token
String access_token_json = restTemplate.getForObject(WeChatURL.OAUTH_ACCESS_TOKEN_URL, String.class, appid, secret, code);
logger.info("getJsapiAccessTokenByCode:access_token_json:{}", access_token_json);
if (StringUtils.isBlank(access_token_json)) {
return null;
}
JSONObject jsonObject = JSON.parseObject(access_token_json);
if (StringUtils.isBlank(jsonObject.getString("access_token"))) {
return null;
}
return jsonObject;
} catch (Exception e) {
logger.error(e.getMessage(), e);
}
return null;
}
使用以上方法就可以得到微信使用者的基礎咯～，上面是作者已經封裝好的sdk方法，具體的原始碼請見文末原始碼地址。
如果使用者已經授權，第二次進入網頁，這時候不需要再次授權，作者也提供了另一種獲取使用者資訊的方法，通過access_token和openid請求獲取使用者資訊，程式碼如下：
/**
* 通過access_token和openid請求獲取使用者資訊
* @return str
*
* @author yclimb
* @date 2018/9/17
*/
@ApiOperation(value = "微信使用者|通過access_token和openid請求獲取使用者資訊", httpMethod = "POST", notes = "通過access_token和openid請求獲取使用者資訊")
@PostMapping("/getXxxUser/{access_token}/{openid}")
public AppMessage getXxxUser(@PathVariable String access_token, @PathVariable String openid) {
// 通過access_token和openid請求獲取使用者資訊
JSONObject jsonUserinfo = wxUtils.getJsapiUserinfo(access_token, openid);
if (null == jsonUserinfo) {
return AppMessage.error(-2);
}
// 判斷使用者是否在悅店系統中是一個使用者
String unionid = jsonUserinfo.getString("unionid");
if (StringUtils.isBlank(unionid)) {
return AppMessage.error(61008);
}
// 儲存使用者資訊到資料庫
// 使用者名稱稱解碼
user.setNickName(UserNickUtil.decodeNickName(user.getNickName()));
return AppMessage.success(user);
}
結語
根據以上步驟實現，就可以完成微信授權-使用者資訊獲取等操作，如果有問題，歡迎小夥伴隨時交流～
預告：下一篇文章，作者將講 統一下單介面 ，敬請期待！！！
如果想要提前一覽原始碼的小夥伴，可以先看看我的 github，地址如下： https://github.com/YClimb/wxpay-sdk/blob/master/README.md
加作者私人微信，作者微訊號如下 yclimb ，標明 微信支付 可拉入微信支付討論群與小夥伴一起探討哦，一定要標明 微信支付 哦～
到此本文就結束了，關注公眾號檢視更多推送！！！
