點關(guān)注，不迷路，每天更新大量前端資料

前端實現(xiàn)第三方登錄之OAuth2.0協(xié)議

OAuth 2.0 規(guī)定了四種獲得令牌的流程。我們可以選擇最適合自己的那一種，向第三方應(yīng)用頒發(fā)令牌。下面就是這四種授權(quán)方式。

• 授權(quán)碼模式(authorization-code)
• 簡化模式(implicit)
• 密碼式(password)：
• 客戶端憑證(client credentials)

不管哪一種授權(quán)方式，第三方應(yīng)用申請令牌之前，都必須先到系統(tǒng)備案，說明自己的身份，然后會拿到兩個身份識別碼：客戶端 ID(client ID)和客戶端密鑰(client secret)。這是為了防止令牌被濫用，沒有備案過的第三方應(yīng)用，是不會拿到令牌的。

授權(quán)碼(authorization code)方式，指的是第三方應(yīng)用先申請一個授權(quán)碼，然后再用該碼獲取令牌。

比如我們經(jīng)常用某些公眾號，用一些論壇，有用QQ，微信登錄什么的，需要你在QQ，微信的界面上授權(quán)，這些號、論壇就可以拿到你的個人信息，頭像什么的，但他們沒有你的用戶密碼。生活中，我去銀行辦理過代扣水電煤，銀行確認我的身份，然后簽一個代扣合同，給我回執(zhí)，之后水電煤公司就直接從我的賬戶劃錢過去了。但公司不知道我的密碼，不能代做其它沒授權(quán)的操作，差不多上OAuth2.0就是解決上面的問題。

OAuth2.0的相同理念的生活場景舉例

比如我有銀行賬戶，想授權(quán)朋友查看賬戶金額，不告訴他密碼，應(yīng)該怎么辦呢？

我和朋友去銀行，銀行先后驗證我們倆的身份證。銀行讓我簽一個授權(quán)合同，上面寫著我授權(quán)朋友查我的賬戶，銀行給我和朋友各一份合同憑證。銀行后臺登記朋友拿這個憑證可以查我的賬戶這樣一條信息。之后朋友拿著憑證和他自己的身份證，果然查到了我的賬戶信息。上面的分析蠻簡單的，貌似也沒有什么問題。朋友不可能轉(zhuǎn)賬，因為銀行會查授權(quán)合同，我的合同被其它人知道了，別人也不可能查我的賬戶，因為只授權(quán)給朋友。那么把上面的過程轉(zhuǎn)化到應(yīng)用之中去。我在某論壇上操作，希望用QQ登錄。(論壇認為我有QQ號的，論壇本身也在QQ注冊過自己的應(yīng)用的。就如同去銀行，這個銀行必須可以鑒定我們雙方的身份。)

點了QQ登錄，那論壇就引導(dǎo)跳轉(zhuǎn)到QQ的授權(quán)頁面了。(這個過程中，論壇必須提供了自己的登錄信息，QQ那邊認證了，才出現(xiàn)授權(quán)頁面。)在這個頁面里，我要登錄一下QQ了。前面已經(jīng)認證過論壇了，現(xiàn)在登錄就是認證我了。登錄成功后，QQ顯示出授權(quán)的內(nèi)容，讓我確認，我點了確認。(類似銀行讓我簽授權(quán)合同了)確認之后，按說是銀行將確認了的授權(quán)合同，一式三份，給我和論壇各一份。給我看合同并不重要，可以后臺存下來，我隨時可以登錄后，在已授權(quán)的地方查看給過的授權(quán)信息。關(guān)鍵是怎么給論壇呢？事實上論壇當初轉(zhuǎn)到QQ授權(quán)頁面的時候，除了提供自己的身份，還有一個redirectUrl。當我點了授權(quán)后，QQ把合同給了這個Url，等于就是給了論壇了。論壇拿到了合同，再把自己的登錄信息給QQ再驗證一下，QQ就把我的資料給了論壇了。如果這里不再驗證論壇的身份，論壇把合同賣給其它地方怎么辦？那就不安全了！當然我也可能把合同轉(zhuǎn)給其它地方用，來陷害是這個論壇在用。

這種方式是最常用的流程，安全性也最高，它適用于那些有后端的 Web 應(yīng)用。授權(quán)碼通過前端傳送，令牌則是儲存在后端，而且所有與資源服務(wù)器的通信都在后端完成。這樣的前后端分離，可以避免令牌泄漏。

OAuth認證和授權(quán)的過程如下:

1、用戶訪問第三方網(wǎng)站網(wǎng)站，想對用戶存放在服務(wù)商的某些資源進行操作。

2、第三方網(wǎng)站向服務(wù)商請求一個臨時令牌。

3、服務(wù)商驗證第三方網(wǎng)站的身份后，授予一個臨時令牌。

4、第三方網(wǎng)站獲得臨時令牌后，將用戶導(dǎo)向至服務(wù)商的授權(quán)頁面請求用戶授權(quán)，然后這個過程中將臨時令牌和第三方網(wǎng)站的返回地址發(fā)送給服務(wù)商。

5、用戶在服務(wù)商的授權(quán)頁面上輸入自己的用戶名和密碼，授權(quán)第三方網(wǎng)站訪問所相應(yīng)的資源。

6、授權(quán)成功后，服務(wù)商將用戶導(dǎo)向第三方網(wǎng)站的返回地址。

7、第三方網(wǎng)站根據(jù)臨時令牌從服務(wù)商那里獲取訪問令牌。

8、服務(wù)商根據(jù)令牌和用戶的授權(quán)情況授予第三方網(wǎng)站訪問令牌。

9、第三方網(wǎng)站使用獲取到的訪問令牌訪問存放在服務(wù)商的對應(yīng)的用戶資源。

主要步驟

第一步，A 網(wǎng)站提供一個鏈接，用戶點擊后就會跳轉(zhuǎn)到 B 網(wǎng)站，授權(quán)用戶數(shù)據(jù)給 A 網(wǎng)站使用。下面就是 A 網(wǎng)站跳轉(zhuǎn) B 網(wǎng)站的一個示意鏈接。

https://b.com/oauth/authorize? response_type=code& client_id=CLIENT_ID& redirect_uri=CALLBACK_URL& scope=read

上面 URL 中，response_type參數(shù)表示要求返回授權(quán)碼(code)，client_id參數(shù)讓 B 知道是誰在請求，redirect_uri參數(shù)是 B 接受或拒絕請求后的跳轉(zhuǎn)網(wǎng)址，scope參數(shù)表示要求的授權(quán)范圍(這里是只讀)。

第二步，用戶跳轉(zhuǎn)后，B 網(wǎng)站會要求用戶登錄，然后詢問是否同意給予 A 網(wǎng)站授權(quán)。用戶表示同意，這時 B 網(wǎng)站就會跳回redirect_uri參數(shù)指定的網(wǎng)址。跳轉(zhuǎn)時，會傳回一個授權(quán)碼，就像下面這樣。https://a.com/callback?code=AUTHORIZATION_CODE

上面 URL 中，code參數(shù)就是授權(quán)碼。

第三步，A 網(wǎng)站拿到授權(quán)碼以后，就可以在后端，向 B 網(wǎng)站請求令牌

https://b.com/oauth/token? client_id=CLIENT_ID& client_secret=CLIENT_SECRET& grant_type=authorization_code& code=AUTHORIZATION_CODE& redirect_uri=CALLBACK_URL

上面 URL 中，client_id參數(shù)和client_secret參數(shù)用來讓 B 確認 A 的身份(client_secret參數(shù)是保密的，因此只能在后端發(fā)請求)，grant_type參數(shù)的值是AUTHORIZATION_CODE，表示采用的授權(quán)方式是授權(quán)碼，code參數(shù)是上一步拿到的授權(quán)碼，redirect_uri參數(shù)是令牌頒發(fā)后的回調(diào)網(wǎng)址。

第四步，B 網(wǎng)站收到請求以后，就會頒發(fā)令牌。具體做法是向redirect_uri指定的網(wǎng)址，發(fā)送一段 JSON 數(shù)據(jù)

{ "access_token":"ACCESS_TOKEN

總結(jié)

以上是生活随笔為你收集整理的php实现第三方邮箱登录_JavaScript实现第三方登录网站原理在这呢的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。