摘要：淺析微信支付微信公眾號(hào)網(wǎng)頁(yè)授權(quán)本文是淺析微信支付系列文章的第四篇，主要講解微信支付前如何獲取獲取網(wǎng)頁(yè)授權(quán)及用戶信息獲取。淺析微信支付系列已經(jīng)更新三篇了喲，沒有看過的朋友們可以看一下哦。

本文是【淺析微信支付】系列文章的第四篇，主要講解微信支付前如何獲取獲取網(wǎng)頁(yè)授權(quán)及用戶信息獲取。

淺析微信支付系列已經(jīng)更新三篇了喲～，沒有看過的朋友們可以看一下哦。

淺析微信支付：開發(fā)前的準(zhǔn)備

淺析微信支付：前篇大綱

淺析微信支付：微信支付簡(jiǎn)單介紹（小程序、公眾號(hào)、App、H5）

首先，如果沒有看過本系列 淺析微信支付：開發(fā)前的準(zhǔn)備 的朋友需要看一下這篇文章，鏈接在上方；本文需要用到開發(fā)前準(zhǔn)備中的幾個(gè)知識(shí)點(diǎn)：設(shè)置安全、設(shè)置白名單、得到公眾號(hào)一系列信息（appidapiKey等）；如果需要在本地開發(fā)測(cè)試，還需要下載 微信開發(fā)者工具和 微信公眾平臺(tái)接口測(cè)試帳號(hào) 。

下面我們開始進(jìn)入開發(fā)階段。

因?yàn)轫?xiàng)目在開發(fā)階段的時(shí)候，需要本地調(diào)試，所以需要使用測(cè)試號(hào)來驗(yàn)證代碼是否正確，所以下面會(huì)講如何設(shè)置測(cè)試號(hào)相關(guān)配置；

首先我們進(jìn)入 微信公眾平臺(tái)接口測(cè)試帳號(hào)申請(qǐng) 頁(yè)面，點(diǎn)擊登錄即可使用微信賬號(hào)登錄（一個(gè)微信號(hào)只有一個(gè)測(cè)試號(hào)）。

登錄后可以進(jìn)入測(cè)試號(hào)管理界面，如下：

按要求設(shè)置上方圖片中的配置，即可減少80%的問題，如果調(diào)用時(shí)還有其他問題，請(qǐng)到文末添加作為微信，可進(jìn)入討論群和大家一起交流。

使用以下代碼獲取微信網(wǎng)頁(yè)授權(quán)：

微信官方j(luò)s文件：

封裝的微信工具文件weixin_util.js：

調(diào)用微信config方法并獲取網(wǎng)頁(yè)授權(quán)：

如果訪問頁(yè)面路徑，得到以下顯示，就已經(jīng)成功獲取網(wǎng)頁(yè)授權(quán)，其他均為失?。?br>

如果出現(xiàn)其他錯(cuò)誤，需要檢查一下第一步時(shí)設(shè)置的路徑安全接口、域名是否正確，開啟weixinConfig中的debug模式，看是否為沒有正確設(shè)置功能模塊；如果還不能解決，請(qǐng)到文末看樓主上一篇文章或者添加作者進(jìn)群即可。

這里說一下上面獲取用戶授權(quán)的具體參數(shù)：

第一步，獲取config需要的基礎(chǔ)參數(shù)：

/**
 * 根據(jù)appid獲取wx.config需要的基礎(chǔ)參數(shù)
 * @param reqMap requestUrl 請(qǐng)求頁(yè)面地址、appid appid
 * @return json
 *
 * @author yclimb
 * @date 2018/9/25
 */
@ApiOperation(value = "微信公眾號(hào)|config需要的基礎(chǔ)參數(shù)", httpMethod = "POST", notes = "config需要的基礎(chǔ)參數(shù)")
@PostMapping("/getSignature")
public AppMessage getSignature(@RequestBody Map reqMap) {
    Map 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);
}

第二部分：獲取用戶授權(quán)的基礎(chǔ)信息：

// 這里的appid就是咋們測(cè)試號(hào)的appid
$appid="xxx";

// 這里的地址需要http://且必須encodeURI，此地址為獲取用戶信息后，微信自動(dòng)轉(zhuǎn)發(fā)的服務(wù)器端接口，用來接收微信的授權(quán)code，在后端處理而得到用戶基本信息
$redirect_uri=encodeURI("http://127.0.0.1:8888/weixin/auth/authorize.do");

// 微信官方的授權(quán)接口
$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可以用來區(qū)分特殊參數(shù)和配置

具體可見微信官方文檔，文檔如下：微信網(wǎng)頁(yè)授權(quán)接口

以上為js頁(yè)面處理，下面我們來具體講解 redirect_uri 這個(gè)接口中需要處理的邏輯；

WXAuthController：

/**
 * 微信網(wǎng)頁(yè)授權(quán)
 * https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842
 * 第一步：用戶同意授權(quán)，獲取code
 * 第二步：通過code換取網(wǎng)頁(yè)授權(quán)access_token
 * @return str
 *
 * @author yclimb
 * @date 2018/7/30
 */
@ApiOperation(value = "微信用戶|網(wǎng)頁(yè)授權(quán)", httpMethod = "GET", notes = "獲取前端微信用戶的網(wǎng)頁(yè)授權(quán)，得到用戶基礎(chǔ)信息")
@GetMapping("/authorize")
public AppMessage authorize(HttpServletRequest request) {

    // 跳轉(zhuǎn)頁(yè)面標(biāo)識(shí)
    String state = request.getParameter("state");
    // 通過code獲取access_token
    String code = request.getParameter("code");
    log.info("authorize:code:{}", code);

    String appid;
    String secret;
    
    // 根據(jù)不同的state得到不同的微信公眾號(hào)網(wǎng)頁(yè)授權(quán)
    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：

/**
 * 網(wǎng)頁(yè)授權(quán)獲取用戶信息時(shí)用于獲取access_token以及openid
 * 請(qǐng)求路徑：https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code(最后一個(gè)參數(shù)不變)
 *
 * @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;
}

使用以上方法就可以得到微信用戶的基礎(chǔ)咯～，上面是作者已經(jīng)封裝好的sdk方法，具體的源碼請(qǐng)見文末源碼地址。

如果用戶已經(jīng)授權(quán)，第二次進(jìn)入網(wǎng)頁(yè)，這時(shí)候不需要再次授權(quán)，作者也提供了另一種獲取用戶信息的方法，通過access_token和openid請(qǐng)求獲取用戶信息，代碼如下：

/**
 * 通過access_token和openid請(qǐng)求獲取用戶信息
 * @return str
 *
 * @author yclimb
 * @date 2018/9/17
 */
@ApiOperation(value = "微信用戶|通過access_token和openid請(qǐng)求獲取用戶信息", httpMethod = "POST", notes = "通過access_token和openid請(qǐng)求獲取用戶信息")
@PostMapping("/getXxxUser/{access_token}/{openid}")
public AppMessage getXxxUser(@PathVariable String access_token, @PathVariable String openid) {

    // 通過access_token和openid請(qǐng)求獲取用戶信息
    JSONObject jsonUserinfo = wxUtils.getJsapiUserinfo(access_token, openid);
    if (null == jsonUserinfo) {
        return AppMessage.error(-2);
    }

    // 判斷用戶是否在悅店系統(tǒng)中是一個(gè)用戶
    String unionid = jsonUserinfo.getString("unionid");
    if (StringUtils.isBlank(unionid)) {
        return AppMessage.error(61008);
    }

    // 存儲(chǔ)用戶信息到數(shù)據(jù)庫(kù)
    
    // 用戶名稱解碼
    user.setNickName(UserNickUtil.decodeNickName(user.getNickName()));
    
    return AppMessage.success(user);
}

根據(jù)以上步驟實(shí)現(xiàn)，就可以完成微信授權(quán)-用戶信息獲取等操作，如果有問題，歡迎小伙伴隨時(shí)交流～

預(yù)告：下一篇文章，作者將講 統(tǒng)一下單接口，敬請(qǐng)期待?。?！

?如果想要提前一覽源碼的小伙伴，可以先看看我的 github，地址如下： https://github.com/YClimb/wxpay-sdk/blob/master/README.md

加作者私人微信，作者微信號(hào)如下 yclimb，標(biāo)明 微信支付 可拉入微信支付討論群與小伙伴一起探討哦，一定要標(biāo)明 微信支付 哦～

到此本文就結(jié)束了，關(guān)注公眾號(hào)查看更多推送?。?！