1、先登錄微信公眾平臺(tái)易遣，進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”扔仓，進(jìn)入“基礎(chǔ)配置”，將服務(wù)端部署ip配置到IP白名單中仰挣。
2、引入JS文件 在需要調(diào)用JS接口的頁面引入如下JS文件缠沈，（支持 https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js
3膘壶、通過config接口注入權(quán)限驗(yàn)證配置错蝴，所需參數(shù)從服務(wù)端接口獲取颓芭；
服務(wù)端生成簽名時(shí)需要配置當(dāng)前網(wǎng)頁的URL（不包含#及其后面部分顷锰，需域名，本地ip試了不行）亡问，可由前端將調(diào)用掃一掃的頁面url傳給服務(wù)端生成簽名的接口官紫；
前端代碼
let signData = await request('api/demo/auth/sign', { method: 'POST', body: {
"url": window.location.origin + window.location.pathname, //當(dāng)前網(wǎng)頁的URL傳給后端
} })
console.log('signData',signData);
wx.config({
debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)州藕，可以在pc端打開束世，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印床玻。
appId: 'wx7048dabe52cXXXXX', // 必填毁涉，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: signData.timestamp, // 必填，生成簽名的時(shí)間戳
nonceStr: signData.nonceStr, // 必填锈死，生成簽名的隨機(jī)串
signature: signData.signature,// 必填贫堰，簽名
jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表
});
后端代碼
@PostMapping("/sign")
public SignResp sign(@RequestBody @Valid SignReq req) {
try {
String fkToken = redisTemplate.opsForValue().get(FK_TOKEN_KEY_PREFIX + APP_ID);
if (fkToken == null) {
synchronized (FK_TOKEN_KEY_PREFIX) {
fkToken = redisTemplate.opsForValue().get(FK_TOKEN_KEY_PREFIX + APP_ID);
if (fkToken == null) {
Request request = new Request.Builder()
.url(genUri("fkAccessToken"))
.get()
.build();
OkHttpClient okHttpClient = new OkHttpClient();
Response response = okHttpClient.newCall(request).execute();
String result = response.body().string();
log.info("fkAccessToken result: {}", result);
JSONObject jsonObject = JSONUtil.parseObj(result);
fkToken = jsonObject.getStr("access_token");
redisTemplate.opsForValue().set(FK_TOKEN_KEY_PREFIX + APP_ID, fkToken);
redisTemplate.expire(FK_TOKEN_KEY_PREFIX + APP_ID, 7000, TimeUnit.SECONDS);
}
}
}
String ticket = redisTemplate.opsForValue().get(TICKET_KEY_PREFIX + APP_ID);
if (ticket == null) {
Request request = new Request.Builder()
.url(genUri("ticket", fkToken))
.get()
.build();
OkHttpClient okHttpClient = new OkHttpClient();
Response response = okHttpClient.newCall(request).execute();
String result = response.body().string();
log.info("sign result: {}", result);
JSONObject jsonObject = JSONUtil.parseObj(result);
ticket = jsonObject.getStr("ticket");
redisTemplate.opsForValue().set(TICKET_KEY_PREFIX + APP_ID, ticket);
redisTemplate.expire(TICKET_KEY_PREFIX + APP_ID, 7000, TimeUnit.SECONDS);
}
// 簽名
String noncestr = IdUtil.simpleUUID();
String timestamp = String.valueOf(LocalDateTime.now().toInstant(ZoneOffset.of("+8")).toEpochMilli());
// String url = SIGN_PAGE_URI;
String content = "jsapi_ticket=" + ticket
+ "&noncestr=" + noncestr
+ "×tamp=" + timestamp
+ "&url=" + req.url;
SignResp signResp = new SignResp();
signResp.setNonceStr(noncestr);
signResp.setTimestamp(timestamp);
signResp.setSignature(SecureUtil.sha1(content));
log.info("signResp: {}", signResp);
return signResp;
} catch (Exception e) {
throw new RuntimeException(e);
}
}
private String genUri(String type, String... args) {
switch (type) {
case "grant": // 獲取授權(quán)碼
return "https://open.weixin.qq.com/connect/oauth2/authorize?"
+ "appid=" + APP_ID
+ "&redirect_uri=" + URLUtil.encode(REDIRECT_URI, StandardCharsets.UTF_8)
+ "&response_type=code"
+ "&scope=snsapi_base"
+ "&state=STATE"
+ "#wechat_redirect";
case "accessToken": // 獲取微信用戶accessToken
return "https://api.weixin.qq.com/sns/oauth2/access_token?"
+ "appid=" + APP_ID
+ "&secret=" + APP_SECRET
+ "&code=" + args[0]
+ "&grant_type=authorization_code";
case "refreshAccessToken": // 刷新微信用戶accessToken
return "https://api.weixin.qq.com/sns/oauth2/refresh_token?"
+ "appid=" + APP_ID
+ "&grant_type=refresh_token"
+ "&refresh_token=" + args[0];
case "ticket": // 獲取jsapi_ticket
return "https://api.weixin.qq.com/cgi-bin/ticket/getticket?"
+ "access_token=" + args[0]
+ "&type=jsapi";
case "fkAccessToken": // 獲取公眾號(hào)accessToken
return "https://api.weixin.qq.com/cgi-bin/token?"
+ "grant_type=client_credential"
+ "&appid=" + APP_ID
+ "&secret=" + APP_SECRET;
}
throw new RuntimeException();
}
4待牵、調(diào)用微信掃一掃其屏；
wx.scanQRCode({
needResult: 1, // 默認(rèn)為0，掃描結(jié)果由微信處理洲敢，1則直接返回掃描結(jié)果漫玄，
scanType: ["qrCode","barCode"], // 可以指定掃二維碼還是一維碼茄蚯，默認(rèn)二者都有
success: function (res) {
var result = res.resultStr; // 當(dāng)needResult 為 1 時(shí)压彭，掃碼返回的結(jié)果
console.log(result);
request('api/demo/user/query', {
method: 'POST', body: {
"number": result
}
}).then(res => {
console.log(res);
jumpPage('/search/result', JSON.parse(res.data))
})
}
})
5、如果要獲取微信用戶信息渗常，需網(wǎng)頁鑒權(quán)-Oauth2壮不，只有通過微信認(rèn)證的服務(wù)號(hào)有權(quán)限，訂閱號(hào)不行皱碘，進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里進(jìn)行網(wǎng)頁授權(quán)域名填寫询一；參考鏈接
6、成功demo（前端獲取到code后傳給服務(wù)端接口癌椿，接口返回openId健蕊，或者用戶信息）
前端代碼 （拿到授權(quán)碼后請(qǐng)求后端獲取AccessToken）
let openId = ''
let code = this.getUrlParam('code','?' + window.location.href.split('?')[1])
const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxx&redirect_uri=https://xxx.com/deme/&response_type=code&scope=snsapi_base&state=STATE`
if(!sessionStorage.getItem('openId')){
if(code){
request('api/demo/auth/receive', { method: 'POST', body: {
code: code,
} }).then(res=>{
openId = res.openId
sessionStorage.setItem('openId',openId)
this.getUserInfo() //通過openId獲取用戶信息
history.pushState('', '', 'https://xxx.com/deme/')
})
}else{
window.location.href = url
}
}else{
this.getUserInfo() //通過openId獲取用戶信息
}
// 回調(diào)回來的地址是：https://xxx.com/deme/?code=xxxxxx&state=xxx
// 如果你是使用hash路由的，一般的取url參數(shù)的方法會(huì)有點(diǎn)小問題踢俄，需要手動(dòng)調(diào)整下
getUrlParam = (name, location) => {
const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
const { hash, search } = window.location;
const result = ((location||(hash || search)).split('?')[1] || '').match(reg);
return result ? decodeURIComponent(result[2]) : null;
}
后端代碼 （獲取AccessToken）
@PostMapping("/receive")
public ReceiveResp receive(@RequestBody @Valid ReceiveReq req) {
log.info("receiveReq: {}", req);
Request request = new Request.Builder()
.url(genUri("accessToken", req.code))
.get()
.build();
try {
OkHttpClient okHttpClient = new OkHttpClient();
Response response = okHttpClient.newCall(request).execute();
String result = response.body().string();
log.info("receive result: {}", result);
JSONObject jsonObject = JSONUtil.parseObj(result);
String openId = jsonObject.getStr("openid");
if (StringUtils.isBlank(openId)) {
throw new RuntimeException("error");
}
redisTemplate.opsForValue().set(TOKEN_KEY_PREFIX + openId, jsonObject.getStr("access_token"));
redisTemplate.expire(TOKEN_KEY_PREFIX + openId, 7000, TimeUnit.SECONDS);
redisTemplate.opsForValue().set(REFRESH_TOKEN_KEY_PREFIX + openId, jsonObject.getStr("access_token"));
redisTemplate.expire(REFRESH_TOKEN_KEY_PREFIX + openId, 29, TimeUnit.DAYS);
ReceiveResp resp = new ReceiveResp();
resp.setOpenId(openId);
return resp;
} catch (Exception e) {
throw new RuntimeException("error", e);
}
}
后端代碼 （獲取緩存的AccessToken缩功，如已過期則刷新AccessToken）
private String getAccessToken(String openId) throws IOException {
String accessToken = redisTemplate.opsForValue().get(TOKEN_KEY_PREFIX + openId);
if (accessToken == null) {
String refreshAccessToken = redisTemplate.opsForValue().get(REFRESH_TOKEN_KEY_PREFIX + openId);
if (refreshAccessToken == null) {
throw new RuntimeException("會(huì)話已過期，請(qǐng)重新登錄");
}
Request request = new Request.Builder()
.url(genUri("refreshAccessToken", refreshAccessToken))
.get()
.build();
OkHttpClient okHttpClient = new OkHttpClient();
Response response = okHttpClient.newCall(request).execute();
String result = response.body().string();
JSONObject jsonObject = JSONUtil.parseObj(result);
redisTemplate.opsForValue().set(TOKEN_KEY_PREFIX + openId, jsonObject.getStr("access_token"));
redisTemplate.expire(TOKEN_KEY_PREFIX + openId, 7000, TimeUnit.SECONDS);
return jsonObject.getStr("access_token");
}
return accessToken;
}
7都办、官方鏈接： JSSDK使用步驟 JS-SDK使用權(quán)限簽名算法
8嫡锌、踩坑小記
在微信掃一掃和Oauth2認(rèn)證的官方文檔里虑稼，都有提到accessToken，但兩者并不是一個(gè)東西势木，獲取它們的接口也不相同蛛倦。掃一掃里的accessToken屬于公眾號(hào)，而Oauth2里的accessToken屬于微信用戶啦桌。掃一掃的簽名接口的入?yún)ccessToken指的是公眾號(hào)的accessToken溯壶。
