OAuth2.0实战
微信開發(fā)三大坑:
1、微信OAuth2.0授權(quán)
2、微信jssdk簽名
3、微信支付簽名
本篇先搞定微信OAuth2.0授權(quán)吧！
實(shí)際一旦了解微信的OAuth2.0,其他的也掌握了。
以簡書的登陸頁面為例，來了解一下oauth2.0驗(yàn)證授權(quán)的一些背景知識(shí):
簡書登陸.jpg
1) 傳統(tǒng)的注冊(cè)登陸方式:
如果你是一個(gè)新用戶，則點(diǎn)擊新用戶注冊(cè)按鈕，進(jìn)入由簡書提供的注冊(cè)頁面，進(jìn)行用戶名密碼驗(yàn)證和設(shè)置
簡書注冊(cè).jpg
然后再回到簡書提供的登陸頁面，輸入剛注冊(cè)的用戶名和密碼進(jìn)行登陸
缺點(diǎn)(站在用戶的角度):
-
除非我很想使用該app，否則根本不想花這么多時(shí)間進(jìn)行注冊(cè)，太麻煩了。
-
如果使用app很多，到處注冊(cè)，密碼要么一樣，要么多到你記不住
-
每次登陸還要手動(dòng)輸入用戶名以及密碼，也是很麻煩的事情
優(yōu)點(diǎn)(站在app提供者的角度):
- 對(duì)app提供者來說，新客戶注冊(cè)對(duì)其吸引投資，增加市值，加強(qiáng)影響力是有非常大的幫助。
那么有什么好的方法，能夠避免掉用戶注冊(cè)登陸的不便之處呢？
答案就是: 利用各個(gè)社交app(例如微信)現(xiàn)有的注冊(cè)賬號(hào)進(jìn)行第三方(例如簡書)應(yīng)用的驗(yàn)證授權(quán)登陸，這就是傳說中的oauth2.0授權(quán)登陸。
之所以使用社交軟件賬號(hào)是因?yàn)橛脩魧?shí)在是夠多啊！作為國人，大家基本上都有微信，qq等賬號(hào)。這樣就只要點(diǎn)擊一下簡書登陸頁面中的社交賬號(hào)直接登陸中某個(gè)圖標(biāo)就直接進(jìn)入由社交app提供的授權(quán)頁面
2) oauth2.0授權(quán)登陸:
簡書通過oauth2.0授權(quán)登陸.jpg
上圖顯示了簡書使用微信/qq/豆瓣/新浪微博進(jìn)行oauth2.0授權(quán)登陸的界面，該界面并不是由簡書提供的，而是由對(duì)應(yīng)的各個(gè)社交app提供的
上面四個(gè)界面中，微信登陸只要按確認(rèn)登陸就能登陸簡書app(不要注冊(cè)，不要填寫用戶名+密碼，只要點(diǎn)擊確認(rèn)登陸就能登陸簡書。甚至可以通過靜默授權(quán)，連這個(gè)頁面都不需要顯示就直接進(jìn)入簡書)。
其他的三個(gè)界面還是需要輸入對(duì)應(yīng)社交app的用戶名+密碼。這是因?yàn)槲抑淮蜷_了微信app,qq沒開，至于豆瓣以及新浪微博，我還沒有賬號(hào)。
3) 以簡書為例子，來簡單說明oauth2.0授權(quán)登陸流程:
什么是oatuh2.0協(xié)議:
-
OAuth2.0(開放授權(quán))是一個(gè)開放標(biāo)準(zhǔn)。
沒啥好解釋的，就是一個(gè)標(biāo)準(zhǔn) -
允許第三方網(wǎng)站在用戶授權(quán)的前提下訪問在用戶在服務(wù)商那里存儲(chǔ)的各種信息。
蘊(yùn)含很多信息哦！
這句話提到了三個(gè)角色:第三方網(wǎng)站/用戶/服務(wù)商
這句話是站在服務(wù)商的角度進(jìn)行描述的。
服務(wù)商：以微信為例子，那么服務(wù)商就是微信[服務(wù)器]或騰訊
用戶 : 就是你，你的相關(guān)信息(例如用戶名/密碼/性別/ 省份等等等等)都是存放在服務(wù)商的服務(wù)器中。注意：你不是第三方(例如簡書)的用戶，而是微信的用戶(因?yàn)槟闶亲?cè)在微信中，而不是簡書中)
第三方網(wǎng)站 : 這里指的就是簡書[服務(wù)器] -
而這種授權(quán)無需將用戶提供用戶名和密碼提供給該第三方網(wǎng)站。
這句話的意思很明顯，就是簡書服務(wù)器是沒法拿到你在微信服務(wù)器中的用戶名和密碼的，但是的確能夠讓你登陸簡書服務(wù)器 -
既然第三方(簡書)無法拿到你的用戶名和密碼，那肯定是由服務(wù)商(微信)來進(jìn)行驗(yàn)證，那么第三方肯定要和服務(wù)商有一種機(jī)制來進(jìn)行辨識(shí):
在認(rèn)證過程之前，第三方(簡書)需要先向服務(wù)商(微信)申請(qǐng)第三方(簡書)服務(wù)的唯一標(biāo)識(shí)
因此第三方(簡書)填寫本公司相關(guān)信息，提供本公司賬號(hào)，域名等信息，并且花三百塊錢給服務(wù)商(騰訊)進(jìn)行審核。服務(wù)商騰訊收到錢，并且審核通過后，會(huì)給第三方(簡書)兩個(gè)編號(hào):AppID和appSecret(及其重要，不能泄露)。通過這兩個(gè)編號(hào)，就能確認(rèn)唯一性了。當(dāng)然過程是很復(fù)雜的。
appID.png
- 第三方[服務(wù)器]和服務(wù)商[服務(wù)器]之間的通信：
既然第三方(簡書)用通過服務(wù)商(微信)來驗(yàn)證用戶(你)身份的合法性，那么肯定涉及到：一旦服務(wù)商(微信)確認(rèn)用戶(你)的合法身份后，如何將信息傳遞給第三方(簡書)
很簡單，通過第三方(簡書服務(wù)器)提供的回調(diào)URL，服務(wù)商(微信服務(wù)器)將相關(guān)數(shù)據(jù)以參數(shù)形式寫入到第三方(簡書服務(wù)器)提供的回調(diào)URL,第三方(簡書服務(wù)器)解析服務(wù)商(微信服務(wù)器)發(fā)過來的信息抽取出來就OK了！
那在微信公眾號(hào)的申請(qǐng)中，有要求第三方(簡書)提供回調(diào)地址
微信oauth2.0網(wǎng)頁授權(quán)回調(diào)地址設(shè)定.png
不是這個(gè)頁面中的回調(diào)地址.png
oauth2.0授權(quán)流程:
oauth2.0授權(quán)流程時(shí)序圖.png
其中:
2--7步驟是通過簡書調(diào)用:
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
這個(gè)API進(jìn)行的，具體參數(shù)請(qǐng)參見文檔說明
8-9步驟是通過簡書調(diào)用:
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
這個(gè)API進(jìn)行的，具體參數(shù)請(qǐng)參見文檔說明
步驟10以后，是通過accesstoken以及openid等從微信獲取相關(guān)信息了
由于微信的開發(fā)需要審批，獨(dú)立的域名(不能使用localhost），并且要求是80端口(http)或443端口(https)，這獨(dú)立域名以及這兩個(gè)端口需要工信部審批后才可使用，因此我這里目前沒有這種開發(fā)環(huán)境，但是我可以提供一段代碼，以前分享在群里面，用于進(jìn)行微信oauth2.0授權(quán)，我以前可以獲取正確的結(jié)果，目前應(yīng)該也可以。
只是例子而已，不要使用在生產(chǎn)環(huán)境:
由于使用nodejs的wechat-oauth庫進(jìn)行微信oauth2.0授權(quán)操作
因此可以先npm install wechat-oauth --save下載到你的開發(fā)包中去
順便說一下，wechat-oauth是由深入淺出nodejs作者樸靈撰寫的庫
通過微信授權(quán)獲取openid和accesstoken示例代碼:
//1、引入wechat-oauth包 var OAuth = require('wechat-oauth');//2、生成一個(gè)OAuth的實(shí)例，appId和appSecert作為構(gòu)造參數(shù) var oauthApi = new OAuth(你的appId, 你的appSecert); //3、構(gòu)造一個(gè)路由,用于獲取微信寫入到你的回調(diào)url中的code數(shù)據(jù) //這個(gè)路由就是你注冊(cè)在微信開發(fā)中的回調(diào)url！！！！ //此時(shí)的你充當(dāng)?shù)氖堑谌骄W(wǎng)站角色，相當(dāng)于簡書服務(wù)器 app.get('/callback', function (req, res) { console.log('----weixin callback -----')var code = req.query.code;console.log("code =" + code);//通過code獲取accesstokenoauthApi.getAccessToken(code, function (err, result){//如果函數(shù)調(diào)用成功，會(huì)在result中得到access_tokenvar accessToken = result.data.access_token;//以及openid;var openid = result.data.openid; console.log('openid='+ openid);//然后通過openid獲取用戶信息 oauthApi.getUser(openid, function (err, result1) {console.log('use weixin api get user: ' + err)console.log(result)var oauth_user = result1;//打印出用戶信息console.log("userinfo" + JSON.stringify(oauth_user, null, ' '));//授權(quán)成功獲取信息后，重定向到你要去的頁面//這里隨便，所以直接重定向到首頁了，你可以換成其他任何頁面 res.redirect('/');});console.log("blf write" + JSON.stringify(result.data, null, ' '));});});demo的域名.png //url就是3、中定義的路由一致，用來接收微信發(fā)過來的code //關(guān)鍵點(diǎn): callbackURL必須要和3、中定義的路由一致！！！ // 且callbackURL就是你在微信中提供的回調(diào)url！！！ //就是上圖顯示的url！！！var callbackURL = 'http://你的域名/callback';//oauth2是你定義的路由，當(dāng)你點(diǎn)擊微信登陸這個(gè)按鈕時(shí)，就調(diào)用oauth2這個(gè)路由，向騰訊請(qǐng)求oauth2授權(quán)驗(yàn)證//騰訊驗(yàn)證通過，會(huì)將code寫入到3、這個(gè)回調(diào)url中//然后通過3、路由，獲取code， 換取accesstoken以及openid//再通過openid獲取userInfo，漂亮，完成整個(gè)操作app.get('/oauth2', function(req, res) {var url = oauthApi.getAuthorizeURL(callbackURL,'','snsapi_base');console.log(url);//重定向的回調(diào)地址，獲取code，通過code換取openid和accesstoken ,通過openid獲取用戶信息//所有一起如此簡單 res.redirect(url); })
用到了wechat-oauth庫中的三個(gè)api:
oauthApi.getAuthorizeURL
相當(dāng)于2--7步驟是通過調(diào)用:https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
還是貼一下該函數(shù)的源碼吧，這樣就清晰了
oauthApi.getAccessToken
相當(dāng)于8-9步驟是通過調(diào)用:https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
OAuth.prototype.getAccessToken = function (code, callback) {var url = 'https://api.weixin.qq.com/sns/oauth2/access_token';var info = {appid: this.appid,secret: this.appsecret,code: code,grant_type: 'authorization_code'};var args = {data: info,dataType: 'json'};//請(qǐng)求url,通過code換取accesstoken,openid等等this.request(url, args, wrapper(processToken(this, callback))); };oauthApi.getUser
相當(dāng)于步驟10以后，是通過accesstoken以及openid等從微信獲取相關(guān)信息了
希望上面代碼對(duì)大家有幫助
4) 下一步計(jì)劃:
由于微信的授權(quán)我這里沒有環(huán)境(其實(shí)國內(nèi)的環(huán)境導(dǎo)致都需要獨(dú)立域名以及80/443端口問題)，因此想實(shí)現(xiàn)一個(gè)類似騰訊的oauth2.0授權(quán)服務(wù)器。目前完成70%，還有一些問題需要解決。
[開發(fā)周記2017/3/26-2017/4/2]
(http://www.jianshu.com/p/7417e20b74d6)
中有記錄，使用了node-oauth2-server庫開發(fā)oauth2.0服務(wù)器，但是登陸驗(yàn)證的話，要使用passport，需要自己寫一個(gè)passport-strategy插件，這個(gè)有點(diǎn)麻煩。目前我需要向前推進(jìn)，所以自己的oauth2.0授權(quán)和passport驗(yàn)證放在以后實(shí)現(xiàn)(我覺得大概也不需要多久).
其實(shí)我的需求如下:
1、使用IBM loopback庫實(shí)現(xiàn)服務(wù)器
2、可以使用localhost:非80端口 進(jìn)行oauth2.0授權(quán)回調(diào)，不需要獨(dú)立域名以及80/443端口
3、國內(nèi)可以進(jìn)行訪問，不需要那個(gè)啥(facebook/google可以使用localhost,并且非80/443端口，但是不那個(gè)啥就沒法訪問)
通過實(shí)驗(yàn)，突然發(fā)現(xiàn)一個(gè)滿足上述所有要求的網(wǎng)站：
偉大的github，可以使用github開發(fā)賬戶，以localhost方式接受github發(fā)送過來的code,換取accesstoken等，進(jìn)行oatuh2.0授權(quán)。
下一步我們就實(shí)戰(zhàn)，通過本地調(diào)用來實(shí)現(xiàn)github oauth2.0授權(quán)。
我們會(huì)使用loopback庫以及l(fā)oopback-component-passport插件來演示一個(gè)Demo,大家會(huì)看到根本需要寫一句代碼，就能完美的進(jìn)行oauth2.0授權(quán)！
IBM loopback非常好用，我會(huì)用loopback實(shí)現(xiàn)一個(gè)完整的服務(wù)器，與大家分享。
作為oauth2.0最后一部，我會(huì)使用node-oauth2-server以及passport實(shí)現(xiàn)自己的oauth2.0服務(wù)器，與大家分享實(shí)現(xiàn)的過程，以及node-oauth2-server(上個(gè)禮拜已經(jīng)注釋好了)和passport(曾經(jīng)讀過源碼，但是是去年，可能需要回憶一下，哈哈)的源碼分析
使用loopback-component-passport插件實(shí)現(xiàn)github和facebook登陸成功的圖片:
github_oauth2_授權(quán)成功后的返回?cái)?shù)據(jù).png
fb_oauth2授權(quán).jpg
通過fb賬號(hào)登陸local服務(wù)器.jpg
作者：隨風(fēng)而行之青衫磊落險(xiǎn)峰行
鏈接：http://www.jianshu.com/p/1c48ec65936b
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
總結(jié)
以上是生活随笔為你收集整理的OAuth2.0实战的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql python电影院购票系统毕
- 下一篇： wordpress主题下载，wp主题模板