微信授權(quán)接口的使用設(shè)計(jì)與實(shí)現(xiàn)

今天給大家演示一下微信授權(quán)的接口的實(shí)現(xiàn)，首先這個(gè)接口的實(shí)現(xiàn)有好多種方法，所以咱們有必要根據(jù)需求設(shè)計(jì)一下，將接口設(shè)計(jì)的通用和靈活。

理解OAuth2.0 http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html

微信授權(quán)雖然是基于Auth2.0，但是比Auth2.0要簡單。一些PC網(wǎng)站是基于QQ或微博實(shí)現(xiàn)的，在實(shí)現(xiàn)驗(yàn)證時(shí)需要用戶登陸，即輸入賬號和密碼，但是在微信中則不需要，因?yàn)槲⑿臕PP已經(jīng)登陸了。

不知道大家有沒有這樣的體驗(yàn)，在微信中訪問某個(gè)網(wǎng)頁時(shí)，點(diǎn)擊某個(gè)按鈕或者點(diǎn)擊朋友圈中的某個(gè)鏈接，會(huì)跳出一個(gè)網(wǎng)頁，網(wǎng)頁中有一個(gè)按鈕需要大家點(diǎn)擊確認(rèn)授權(quán)，如下圖：

這里就說明這個(gè)網(wǎng)頁用到了微信用戶授權(quán)的接口。

接下來咱們看一下文檔：

從文檔中得知，在使用微信授權(quán)的時(shí)候，要先設(shè)置微信授權(quán)域名，如何設(shè)置呢？文檔中是這樣寫的：

在微信公眾號請求用戶網(wǎng)頁授權(quán)之前，開發(fā)者需要先到公眾平臺(tái)官網(wǎng)中的“開發(fā) - 接口權(quán)限 - 網(wǎng)頁服務(wù) - 網(wǎng)頁帳號 - 網(wǎng)頁授權(quán)獲取用戶基本信息”的配置選項(xiàng)中，修改授權(quán)回調(diào)域名。請注意，這里填寫的是域名（是一個(gè)字符串），而不是URL，因此請勿加 http:// 等協(xié)議頭。如圖：

因?yàn)槲疫@里的公眾號并未認(rèn)證，所以沒有相應(yīng)的接口權(quán)限，所以不能設(shè)置，但是咱們可以用測試號來設(shè)置，拿測試號來做開發(fā)。如圖：

點(diǎn)擊修改會(huì)彈出一個(gè)窗口：

注意：這里授權(quán)回調(diào)域名只能填寫域名，而不是url，域名只是一個(gè)字符串，url是帶協(xié)議的，這里大家要區(qū)分好。

接下來再來看文檔，看到這樣一段文字：

1、引導(dǎo)用戶進(jìn)入授權(quán)頁面同意授權(quán)，獲取code

2、通過code換取網(wǎng)頁授權(quán)access_token（與基礎(chǔ)支持中的access_token不同）

3、如果需要，開發(fā)者可以刷新網(wǎng)頁授權(quán)access_token，避免過期

4、通過網(wǎng)頁授權(quán)access_token和openid獲取用戶基本信息（支持UnionID機(jī)制

第一步引導(dǎo)用戶進(jìn)入授權(quán)頁面同意授權(quán)，獲取code。這里面有兩個(gè)問題：

1、引導(dǎo)用戶進(jìn)入授權(quán)頁，什么是授權(quán)頁，這個(gè)授權(quán)頁面的地址是什么？

2、什么是code？

帶著問題讀文檔，根據(jù)文檔的內(nèi)容，其實(shí)就是讓用戶點(diǎn)擊一個(gè)拼接好的url，這個(gè)url叫做授權(quán)url，授權(quán)url里面有如下5個(gè)參數(shù)：

appid、redirect_uri、response_type、scope、state。

第一個(gè)參數(shù)appid不用多說；

第二個(gè)參數(shù)redirect_uri，是回調(diào)地址（記住這個(gè)名稱），這個(gè)redirect_uri中的域名一定要與上面填寫的授權(quán)回調(diào)域名相同，只要域名相同即可，除了域名之外的其他部分可以隨便設(shè)置；

第三個(gè)參數(shù)是固定值response_type=code；

第四個(gè)參數(shù)分為兩種情況snsapi_base 與 snsapi_userinfo ，這里我們只考慮第二種情況；

第五個(gè)參數(shù)state是一個(gè)標(biāo)識(shí)位可以省略，可以帶一些自定義參數(shù)，比方說用戶從哪里進(jìn)入的你的頁面：state=“微信掃碼”。

拼接完成的url如下：

將這個(gè)url放在頁面的a標(biāo)簽中：

引導(dǎo)用戶點(diǎn)擊這個(gè)鏈接（將按鈕名稱改為開始游戲，點(diǎn)擊開始抽獎(jiǎng)），用戶點(diǎn)擊后，會(huì)彈出一個(gè)頁面，如下：

簡化流程圖：

用戶點(diǎn)擊 確認(rèn)登陸（是否授權(quán)） 頁面會(huì)跳轉(zhuǎn)到 redirect_url（回調(diào)地址），就是上面拼接url的時(shí)候傳遞的redirect_url參數(shù)，并且跳轉(zhuǎn)回來會(huì)帶上code參數(shù)和state參數(shù)。

有些同學(xué)會(huì)問，為什么會(huì)跳轉(zhuǎn)到redirect_url（回調(diào)地址），并且url上帶有參數(shù)呢？因?yàn)檫@是OAuth2.0驗(yàn)證機(jī)制，大家都遵循這個(gè)驗(yàn)證機(jī)制。返回的url如下：

redirect_url?code="skhdsaddkasj"&state="自定義參數(shù)"；

因?yàn)槲覀冊O(shè)計(jì)的接口是前后端分離的，所以需要前端人員將code和state（state可以省略）獲取到之后，再發(fā)送到后端接口換取用戶信息。

此時(shí)我們明確了一個(gè)接口的數(shù)據(jù)交互，前端工程師發(fā)送code，后端接口返回用戶信息。

現(xiàn)在問題產(chǎn)生了，后端工程師拿到code之后怎么做呢？繼續(xù)看文檔：

第三步 刷新token，這步也可以省略，因?yàn)樯厦娴腶ccess_token沒有使用緩存。直接下一步。

第四步拉取用戶信息，看文檔：

實(shí)現(xiàn)代碼如下：

這里我們使用了一個(gè)叫做superagent的npm包，這個(gè)包后端服務(wù)發(fā)送請求的，比nodejs原生的http模塊好用，大家有興趣可以去npm官網(wǎng)看一下官方文檔，比較簡單，這里不做贅述。

從上面的代碼中可以明顯看到我們使用了回調(diào)嵌套，因?yàn)榈诙€(gè)請求依賴第一個(gè)請求的返回值，并且在這個(gè)路由開頭首先接收前端向后端放的code。

第一個(gè)請求獲取access_token,第二個(gè)請求獲取用戶信息，并返回給前端人員，至此，我們完成了用code換取用戶信息的接口。

這樣開發(fā)的好處是，前端開發(fā)人員拼接授權(quán)地址，并且拼接過程中規(guī)定回調(diào)地址，回調(diào)地址顯示最終的活動(dòng)頁面，這個(gè)頁面要做兩個(gè)事情：

1、從url中截取code。

2、將code發(fā)送到后端接口換取用戶信息。

代碼如下：

程序的流程圖如下：

微信公眾號開發(fā)一共寫了三篇文章，相對來說有點(diǎn)難度，因?yàn)樯婕暗角昂蠖说慕Y(jié)合，既有前端用戶交互，又有后端數(shù)據(jù)交互，需要讀者掌握后端知識(shí)和前端知識(shí)，只有這樣才能設(shè)計(jì)并使用這些接口，微信公眾號開發(fā)基本就三種情況：

1、微信接口開發(fā)

3、微信授權(quán)接口設(shè)計(jì)使用與開發(fā)（本篇文章）

原文地址：https://cloud.tencent.com/developer/news/204448

關(guān)于我們：

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

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