點關注，不迷路，每天更新大量前端資料

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

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

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

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

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

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

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

比如我有銀行賬戶，想授權朋友查看賬戶金額，不告訴他密碼，應該怎么辦呢？

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

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

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

OAuth認證和授權的過程如下:

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

2、第三方網站向服務商請求一個臨時令牌。

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

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

5、用戶在服務商的授權頁面上輸入自己的用戶名和密碼，授權第三方網站訪問所相應的資源。

6、授權成功后，服務商將用戶導向第三方網站的返回地址。

7、第三方網站根據臨時令牌從服務商那里獲取訪問令牌。

8、服務商根據令牌和用戶的授權情況授予第三方網站訪問令牌。

9、第三方網站使用獲取到的訪問令牌訪問存放在服務商的對應的用戶資源。

主要步驟

第一步，A 網站提供一個鏈接，用戶點擊后就會跳轉到 B 網站，授權用戶數據給 A 網站使用。下面就是 A 網站跳轉 B 網站的一個示意鏈接。

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

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

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

上面 URL 中，code參數就是授權碼。

第三步，A 網站拿到授權碼以后，就可以在后端，向 B 網站請求令牌

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參數和client_secret參數用來讓 B 確認 A 的身份(client_secret參數是保密的，因此只能在后端發(fā)請求)，grant_type參數的值是AUTHORIZATION_CODE，表示采用的授權方式是授權碼，code參數是上一步拿到的授權碼，redirect_uri參數是令牌頒發(fā)后的回調網址。

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

{ "access_token":"ACCESS_TOKEN

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。