一、準(zhǔn)備工具

微信開發(fā)，官方的文檔應(yīng)該是第一個想到的這里把官方文檔貼出來：微信網(wǎng)頁授權(quán)文檔

二、開始開發(fā)

內(nèi)網(wǎng)穿透就不在這里演示了，下面我們直入主題：
1.填寫網(wǎng)頁授權(quán)域名
在這篇文檔的一開始就埋了一個坑

wechatOAuth_1

這段話就是說，我們在開發(fā)前需要在圖片中框紅的位置填入我們所要開發(fā)的域名。這里我們使用的是測試環(huán)境，所以需要在測試賬號管理頁面的這個位置填入我們自己的域名,這里要注意填入域名的規(guī)則。

wechatOAuth_2

2.文檔閱讀
接著閱讀文檔我們可以發(fā)現(xiàn)網(wǎng)頁授權(quán)有兩種scope,
snsapi_base和snsapi_userinfo。兩種scope都可以獲取到opeid，不同的是snsapi_userinfo除了openid外還可以獲取到用戶的基本信息，但是需要用戶手動進(jìn)行確認(rèn)。
再往下閱讀我們可以看到官方文檔的授權(quán)步驟

• 第一步：用戶同意授權(quán)，獲取code

• 第二步：通過code換取網(wǎng)頁授權(quán)access_token以及openid

• 第三步：刷新access_token（如果需要）

• 第四步：拉取用戶信息(需scope為 snsapi_userinfo)

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

3.獲取code
查看文檔后我們發(fā)現(xiàn)我們需要拼接一個url并且訪問它。url的參數(shù)文檔中寫的很清楚了?？此睦右材芸磦€清楚。這里比較重要的是redirect_uri。這個參數(shù)所填的是一個鏈接。我們訪問url后會自動轉(zhuǎn)發(fā)到這個鏈接并且將我們需要的code以及拼接url中的state的值作為參數(shù)。這個redirect_uri的值要填入的是我們代碼中的controller的位置。
所以這里我們需要一段代碼：

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

我拼接的url，這里大家要注意根據(jù)自己的情況進(jìn)行拼接。拼接成功后需要在微信app中進(jìn)行訪問

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

訪問后的結(jié)果

wechatOAuth_3

這樣我們就拿到了code
4.獲取openid
繼續(xù)查看文檔，發(fā)現(xiàn)我們只需要使用獲取到的code再訪問另一個url就可以獲取到我們想要的了。接著上面的代碼

/** * <pre> * Description: wechat OAuth2.0 * Author:      lllx * Version:     1.0 * Created at:  2018/2/1 * </pre> */@RestController@RequestMapping("/weixin")@Slf4jpublicclassWeixinController{@GetMapping("/auth")publicvoidauth(@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 =newRestTemplate();String result = restTemplate.getForObject(url,String.class);        log.info("result={}",result);}}

這時我們再次訪問第三步拼接的url就可以看到如下結(jié)果。

wechatOAuth_4

將結(jié)果格式化一下我們可以就看到我們想要的openid

wechatOAuth_5

三、總結(jié)

流程看起來還是很簡單的。但以上只是一個最簡單、最直接的手工獲取openid的例子。真正在使用過程中需要結(jié)合自身的業(yè)務(wù)流程來進(jìn)行開發(fā)，這時可能就有些麻煩了。此時我們也可以借助一些網(wǎng)上第三方sdk來開發(fā)。例如:weixin-java-tools。

關(guān)于我們：

Infocode藍(lán)暢信息技術(shù)有限公司成功為多家世界財富500強(qiáng)企業(yè)以及其他著名品牌提供優(yōu)質(zhì)服務(wù)，是您靠譜的互聯(lián)網(wǎng)開發(fā)供應(yīng)商。

服務(wù)客戶遍及北京、上海、杭州、深圳、廣州、天津、青島、南京、寧波、蘇州、無錫、廈門、重慶、西安等大中型城市及地區(qū)    為您提供：H5開發(fā)，小程序開發(fā)，H5外包，微信開發(fā)外包，H5商城開發(fā)，小程序商城開發(fā)，網(wǎng)站開發(fā)外包，H5游戲開發(fā)，小程序開發(fā)外包，小程序設(shè)計、APP開發(fā)外包，UI設(shè)計，SEO優(yōu)化，SEO外包，視頻后期制作等優(yōu)質(zhì)服務(wù)