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

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

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

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

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

接下來咱們看一下文檔：

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

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

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

點擊修改會彈出一個窗口：

注意：這里授權(quán)回調(diào)域名只能填寫域名，而不是url，域名只是一個字符串，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。這里面有兩個問題：

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

2、什么是code？

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

appid、redirect_uri、response_type、scope、state。

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

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

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

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

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

拼接完成的url如下：

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

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

簡化流程圖：

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

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

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

因為我們設(shè)計的接口是前后端分離的，所以需要前端人員將code和state（state可以省略）獲取到之后，再發(fā)送到后端接口換取用戶信息。

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

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

第三步 刷新token，這步也可以省略，因為上面的access_token沒有使用緩存。直接下一步。

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

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

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

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

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

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

1、從url中截取code。

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

代碼如下：

程序的流程圖如下：

微信公眾號開發(fā)一共寫了三篇文章，相對來說有點難度，因為涉及到前后端的結(jié)合，既有前端用戶交互，又有后端數(shù)據(jù)交互，需要讀者掌握后端知識和前端知識，只有這樣才能設(shè)計并使用這些接口，微信公眾號開發(fā)基本就三種情況：

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

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

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

關(guān)于我們：

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

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