第三方H5對(duì)接微信Oauth2及掃一掃功能回顧

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
                    + "&timestamp=" + 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。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1、先登錄微信公眾平臺(tái)，進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”，進(jìn)入“基礎(chǔ)配置”，將服務(wù)端部署...
    朕小六閱讀 4,841評(píng)論 0贊 2
  • oauth2實(shí)現(xiàn)單點(diǎn)登錄 電子書資源見https://www.yuque.com/docs/share/37bd8...
    洋洋灑灑_6a20閱讀 4,832評(píng)論 0贊 0
  • 接到需求 先調(diào)查 1.鏈接打開小程序 百度有1種方法思路是：前端寫個(gè)h5頁面，拿到鏈接里的參數(shù) 用該參數(shù)傳給服務(wù)端...
    懿小諾閱讀 2,701評(píng)論 0贊 2
  • 主要就是移動(dòng)端的h5項(xiàng)目調(diào)用微信掃一掃功能，這個(gè)官方文檔時(shí)在“微信開發(fā)文檔---公眾號(hào)”中，文檔中寫的很清晰，但是...
    漂漂_閱讀 1,803評(píng)論 1贊 1
  • 目錄 企業(yè)微信如何收費(fèi)？ 如何申請(qǐng)企業(yè)微信，創(chuàng)建企業(yè)內(nèi)部應(yīng)用？ 企業(yè)微信OAuth2接入流程 關(guān)于網(wǎng)頁授權(quán)的可信域...
    小小少年小阿清閱讀 9,566評(píng)論 2贊 3

友情鏈接更多精彩內(nèi)容