1. 程式人生 > >微信開發之微信網頁授權獲取openid

微信開發之微信網頁授權獲取openid

wechatOAuth_logo

不知覺間已經接觸了幾次微信支付開發,而要進行微信支付就需要使用者的唯一標識:openid。還記得第一次獲取使用者openid的時候就踩了很多坑。這兩天又接觸了一下,想著索性就把他記錄下來,也便於以後查閱

一、準備工具

不管開發什麼,官方的文件應該是第一個想到的這裡把官方文件貼出來:
除此之外,我們還需要一個內網穿透的工具在開發環境下讓微信能訪問到我們的域名。我使用的是natapp。此類工具網上有很多,大家可以自行尋找。
這裡我們使用微信提供的**測試賬號**來作為演示

二、開始開發

內網穿透就不在這裡演示了,下面我們直入主題:
1.填寫網頁授權域名
在這篇文件的一開始就埋了一個坑
wechatOAuth_1
這段話就是說,我們在開發前需要在圖片中框紅的位置填入我們所要開發的域名。這裡我們使用的是測試環境,所以需要在測試賬號管理頁面的這個位置填入我們自己的域名,這裡要注意填入域名的規則。
wechatOAuth_2


2.文件閱讀
接著閱讀文件我們可以發現網頁授權有兩種scope,
snsapi_base和snsapi_userinfo。兩種scope都可以獲取到opeid,不同的是snsapi_userinfo除了openid外還可以獲取到使用者的基本資訊,但是需要使用者手動進行確認。
再往下閱讀我們可以看到官方文件的授權步驟

  • 第一步:使用者同意授權,獲取code
  • 第二步:通過code換取網頁授權access_token以及openid
  • 第三步:重新整理access_token(如果需要)
  • 第四步:拉取使用者資訊(需scope為 snsapi_userinfo)

我們只需要openid,所以我們只開發到第二步就好了。下面我們就按著官方步驟來開發。

3.獲取code
檢視文件後我們發現我們需要拼接一個url並且訪問它。url的引數文件中寫的很清楚了。看他的例子也能看個清楚。這裡比較重要的是redirect_uri。這個引數所填的是一個連結。我們訪問url後會自動轉發到這個連結並且將我們需要的code以及拼接url中的state的值作為引數。這個redirect_uri的值要填入的是我們程式碼中的controller的位置。
所以這裡我們需要一段程式碼:

/**
 * <pre>
 * Description: wechat OAuth2.0
 * Author:		lllx
 * Version:		1.0
 * Created at:	2018/2/1
 * </pre>
 */
@RestController @RequestMapping("/weixin") @Slf4j public class WeixinController { @GetMapping("/auth") public void auth(@RequestParam("code") String code,@RequestParam("state") String state){ log.info("auth開始了。。。。"); log.info("code={}",code); log.info("state={}",state); } }

我拼接的url,這裡大家要注意根據自己的情況進行拼接。拼接成功後需要在微信app中進行訪問

https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxx&redirect_uri=http://xxx/sell/weixin/auth&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect

訪問後的結果
wechatOAuth_3
這樣我們就拿到了code
4.獲取openid
繼續檢視文件,發現我們只需要使用獲取到的code再訪問另一個url就可以獲取到我們想要的了。接著上面的程式碼

/**
 * <pre>
 * Description: wechat OAuth2.0
 * Author:		lllx
 * Version:		1.0
 * Created at:	2018/2/1
 * </pre>
 */
@RestController
@RequestMapping("/weixin")
@Slf4j
public class WeixinController {

    @GetMapping("/auth")
    public void auth(@RequestParam("code") String code,@RequestParam("state") String state){
        log.info("auth開始了。。。。");
        log.info("code={}",code);
        log.info("state={}",state);
        String url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=xxxx&secret=xxxx&code="+code+"&grant_type=authorization_code";
        RestTemplate restTemplate = new RestTemplate();
        String result = restTemplate.getForObject(url, String.class);
        log.info("result={}",result);
    }
}

這時我們再次訪問第三步拼接的url就可以看到如下結果。
wechatOAuth_4
將結果格式化一下我們可以就看到我們想要的openid
wechatOAuth_5

三、總結

流程看起來還是很簡單的。但以上只是一個最簡單、最直接的手工獲取openid的例子。真正在使用過程中需要結合自身的業務流程來進行開發,這時可能就有些麻煩了。此時我們也可以藉助一些網上第三方sdk來開發。例如:weixin-java-tools。