'JavaScript實現第三方登錄網站原理在這呢'
點關注，不迷路，每天更新大量前端資料
前端實現第三方登錄之OAuth2.0協議
OAuth 2.0 規定了四種獲得令牌的流程。我們可以選擇最適合自己的那一種，向第三方應用頒發令牌。下面就是這四種授權方式。
- 授權碼模式（authorization-code）
- 簡化模式（implicit）
- 密碼式（password）：
- 客戶端憑證（client credentials）
不管哪一種授權方式，第三方應用申請令牌之前，都必須先到系統備案，說明自己的身份，然後會拿到兩個身份識別碼：客戶端 ID（client ID）和客戶端密鑰（client secret）。這是為了防止令牌被濫用，沒有備案過的第三方應用，是不會拿到令牌的。
授權碼（authorization code）方式，指的是第三方應用先申請一個授權碼，然後再用該碼獲取令牌。
比如我們經常用某些公眾號，用一些論壇，有用QQ，微信登錄什麼的，需要你在QQ，微信的界面上授權，這些號、論壇就可以拿到你的個人信息，頭像什麼的，但他們沒有你的用戶密碼。生活中，我去銀行辦理過代扣水電煤，銀行確認我的身份，然後籤一個代扣合同，給我回執，之後水電煤公司就直接從我的賬戶劃錢過去了。但公司不知道我的密碼，不能代做其它沒授權的操作，差不多上OAuth2.0就是解決上面的問題。
OAuth2.0的相同理念的生活場景舉例
比如我有銀行賬戶，想授權朋友查看賬戶金額，不告訴他密碼，應該怎麼辦呢？
我和朋友去銀行，銀行先後驗證我們倆的身份證。銀行讓我籤一個授權合同，上面寫著我授權朋友查我的賬戶，銀行給我和朋友各一份合同憑證。銀行後臺登記朋友拿這個憑證可以查我的賬戶這樣一條信息。之後朋友拿著憑證和他自己的身份證，果然查到了我的賬戶信息。上面的分析蠻簡單的，貌似也沒有什麼問題。朋友不可能轉賬，因為銀行會查授權合同，我的合同被其它人知道了，別人也不可能查我的賬戶，因為只授權給朋友。那麼把上面的過程轉化到應用之中去。我在某論壇上操作，希望用QQ登錄。（論壇認為我有QQ號的，論壇本身也在QQ註冊過自己的應用的。就如同去銀行，這個銀行必須可以鑑定我們雙方的身份。）
點了QQ登錄，那論壇就引導跳轉到QQ的授權頁面了。（這個過程中，論壇必須提供了自己的登錄信息，QQ那邊認證了，才出現授權頁面。）在這個頁面裡，我要登錄一下QQ了。前面已經認證過論壇了，現在登錄就是認證我了。登錄成功後，QQ顯示出授權的內容，讓我確認，我點了確認。（類似銀行讓我籤授權合同了）確認之後，按說是銀行將確認了的授權合同，一式三份，給我和論壇各一份。給我看合同並不重要，可以後臺存下來，我隨時可以登錄後，在已授權的地方查看給過的授權信息。關鍵是怎麼給論壇呢？事實上論壇當初轉到QQ授權頁面的時候，除了提供自己的身份，還有一個redirectUrl。當我點了授權後，QQ把合同給了這個Url，等於就是給了論壇了。論壇拿到了合同，再把自己的登錄信息給QQ再驗證一下，QQ就把我的資料給了論壇了。如果這裡不再驗證論壇的身份，論壇把合同賣給其它地方怎麼辦？那就不安全了！當然我也可能把合同轉給其它地方用，來陷害是這個論壇在用。
這種方式是最常用的流程，安全性也最高，它適用於那些有後端的 Web 應用。授權碼通過前端傳送，令牌則是儲存在後端，而且所有與資源服務器的通信都在後端完成。這樣的前後端分離，可以避免令牌洩漏。
OAuth認證和授權的過程如下:
1、用戶訪問第三方網站網站，想對用戶存放在服務商的某些資源進行操作。
2、第三方網站向服務商請求一個臨時令牌。
3、服務商驗證第三方網站的身份後，授予一個臨時令牌。
4、第三方網站獲得臨時令牌後，將用戶導向至服務商的授權頁面請求用戶授權，然後這個過程中將臨時令牌和第三方網站的返回地址發送給服務商。
5、用戶在服務商的授權頁面上輸入自己的用戶名和密碼，授權第三方網站訪問所相應的資源。
6、授權成功後，服務商將用戶導向第三方網站的返回地址。
7、第三方網站根據臨時令牌從服務商那裡獲取訪問令牌。
8、服務商根據令牌和用戶的授權情況授予第三方網站訪問令牌。
9、第三方網站使用獲取到的訪問令牌訪問存放在服務商的對應的用戶資源。
點關注，不迷路，每天更新大量前端資料
前端實現第三方登錄之OAuth2.0協議
OAuth 2.0 規定了四種獲得令牌的流程。我們可以選擇最適合自己的那一種，向第三方應用頒發令牌。下面就是這四種授權方式。
- 授權碼模式（authorization-code）
- 簡化模式（implicit）
- 密碼式（password）：
- 客戶端憑證（client credentials）
不管哪一種授權方式，第三方應用申請令牌之前，都必須先到系統備案，說明自己的身份，然後會拿到兩個身份識別碼：客戶端 ID（client ID）和客戶端密鑰（client secret）。這是為了防止令牌被濫用，沒有備案過的第三方應用，是不會拿到令牌的。
授權碼（authorization code）方式，指的是第三方應用先申請一個授權碼，然後再用該碼獲取令牌。
比如我們經常用某些公眾號，用一些論壇，有用QQ，微信登錄什麼的，需要你在QQ，微信的界面上授權，這些號、論壇就可以拿到你的個人信息，頭像什麼的，但他們沒有你的用戶密碼。生活中，我去銀行辦理過代扣水電煤，銀行確認我的身份，然後籤一個代扣合同，給我回執，之後水電煤公司就直接從我的賬戶劃錢過去了。但公司不知道我的密碼，不能代做其它沒授權的操作，差不多上OAuth2.0就是解決上面的問題。
OAuth2.0的相同理念的生活場景舉例
比如我有銀行賬戶，想授權朋友查看賬戶金額，不告訴他密碼，應該怎麼辦呢？
我和朋友去銀行，銀行先後驗證我們倆的身份證。銀行讓我籤一個授權合同，上面寫著我授權朋友查我的賬戶，銀行給我和朋友各一份合同憑證。銀行後臺登記朋友拿這個憑證可以查我的賬戶這樣一條信息。之後朋友拿著憑證和他自己的身份證，果然查到了我的賬戶信息。上面的分析蠻簡單的，貌似也沒有什麼問題。朋友不可能轉賬，因為銀行會查授權合同，我的合同被其它人知道了，別人也不可能查我的賬戶，因為只授權給朋友。那麼把上面的過程轉化到應用之中去。我在某論壇上操作，希望用QQ登錄。（論壇認為我有QQ號的，論壇本身也在QQ註冊過自己的應用的。就如同去銀行，這個銀行必須可以鑑定我們雙方的身份。）
點了QQ登錄，那論壇就引導跳轉到QQ的授權頁面了。（這個過程中，論壇必須提供了自己的登錄信息，QQ那邊認證了，才出現授權頁面。）在這個頁面裡，我要登錄一下QQ了。前面已經認證過論壇了，現在登錄就是認證我了。登錄成功後，QQ顯示出授權的內容，讓我確認，我點了確認。（類似銀行讓我籤授權合同了）確認之後，按說是銀行將確認了的授權合同，一式三份，給我和論壇各一份。給我看合同並不重要，可以後臺存下來，我隨時可以登錄後，在已授權的地方查看給過的授權信息。關鍵是怎麼給論壇呢？事實上論壇當初轉到QQ授權頁面的時候，除了提供自己的身份，還有一個redirectUrl。當我點了授權後，QQ把合同給了這個Url，等於就是給了論壇了。論壇拿到了合同，再把自己的登錄信息給QQ再驗證一下，QQ就把我的資料給了論壇了。如果這裡不再驗證論壇的身份，論壇把合同賣給其它地方怎麼辦？那就不安全了！當然我也可能把合同轉給其它地方用，來陷害是這個論壇在用。
這種方式是最常用的流程，安全性也最高，它適用於那些有後端的 Web 應用。授權碼通過前端傳送，令牌則是儲存在後端，而且所有與資源服務器的通信都在後端完成。這樣的前後端分離，可以避免令牌洩漏。
OAuth認證和授權的過程如下:
1、用戶訪問第三方網站網站，想對用戶存放在服務商的某些資源進行操作。
2、第三方網站向服務商請求一個臨時令牌。
3、服務商驗證第三方網站的身份後，授予一個臨時令牌。
4、第三方網站獲得臨時令牌後，將用戶導向至服務商的授權頁面請求用戶授權，然後這個過程中將臨時令牌和第三方網站的返回地址發送給服務商。
5、用戶在服務商的授權頁面上輸入自己的用戶名和密碼，授權第三方網站訪問所相應的資源。
6、授權成功後，服務商將用戶導向第三方網站的返回地址。
7、第三方網站根據臨時令牌從服務商那裡獲取訪問令牌。
8、服務商根據令牌和用戶的授權情況授予第三方網站訪問令牌。
9、第三方網站使用獲取到的訪問令牌訪問存放在服務商的對應的用戶資源。
點關注，不迷路，每天更新大量前端資料
前端實現第三方登錄之OAuth2.0協議
OAuth 2.0 規定了四種獲得令牌的流程。我們可以選擇最適合自己的那一種，向第三方應用頒發令牌。下面就是這四種授權方式。
- 授權碼模式（authorization-code）
- 簡化模式（implicit）
- 密碼式（password）：
- 客戶端憑證（client credentials）
不管哪一種授權方式，第三方應用申請令牌之前，都必須先到系統備案，說明自己的身份，然後會拿到兩個身份識別碼：客戶端 ID（client ID）和客戶端密鑰（client secret）。這是為了防止令牌被濫用，沒有備案過的第三方應用，是不會拿到令牌的。
授權碼（authorization code）方式，指的是第三方應用先申請一個授權碼，然後再用該碼獲取令牌。
比如我們經常用某些公眾號，用一些論壇，有用QQ，微信登錄什麼的，需要你在QQ，微信的界面上授權，這些號、論壇就可以拿到你的個人信息，頭像什麼的，但他們沒有你的用戶密碼。生活中，我去銀行辦理過代扣水電煤，銀行確認我的身份，然後籤一個代扣合同，給我回執，之後水電煤公司就直接從我的賬戶劃錢過去了。但公司不知道我的密碼，不能代做其它沒授權的操作，差不多上OAuth2.0就是解決上面的問題。
OAuth2.0的相同理念的生活場景舉例
比如我有銀行賬戶，想授權朋友查看賬戶金額，不告訴他密碼，應該怎麼辦呢？
我和朋友去銀行，銀行先後驗證我們倆的身份證。銀行讓我籤一個授權合同，上面寫著我授權朋友查我的賬戶，銀行給我和朋友各一份合同憑證。銀行後臺登記朋友拿這個憑證可以查我的賬戶這樣一條信息。之後朋友拿著憑證和他自己的身份證，果然查到了我的賬戶信息。上面的分析蠻簡單的，貌似也沒有什麼問題。朋友不可能轉賬，因為銀行會查授權合同，我的合同被其它人知道了，別人也不可能查我的賬戶，因為只授權給朋友。那麼把上面的過程轉化到應用之中去。我在某論壇上操作，希望用QQ登錄。（論壇認為我有QQ號的，論壇本身也在QQ註冊過自己的應用的。就如同去銀行，這個銀行必須可以鑑定我們雙方的身份。）
點了QQ登錄，那論壇就引導跳轉到QQ的授權頁面了。（這個過程中，論壇必須提供了自己的登錄信息，QQ那邊認證了，才出現授權頁面。）在這個頁面裡，我要登錄一下QQ了。前面已經認證過論壇了，現在登錄就是認證我了。登錄成功後，QQ顯示出授權的內容，讓我確認，我點了確認。（類似銀行讓我籤授權合同了）確認之後，按說是銀行將確認了的授權合同，一式三份，給我和論壇各一份。給我看合同並不重要，可以後臺存下來，我隨時可以登錄後，在已授權的地方查看給過的授權信息。關鍵是怎麼給論壇呢？事實上論壇當初轉到QQ授權頁面的時候，除了提供自己的身份，還有一個redirectUrl。當我點了授權後，QQ把合同給了這個Url，等於就是給了論壇了。論壇拿到了合同，再把自己的登錄信息給QQ再驗證一下，QQ就把我的資料給了論壇了。如果這裡不再驗證論壇的身份，論壇把合同賣給其它地方怎麼辦？那就不安全了！當然我也可能把合同轉給其它地方用，來陷害是這個論壇在用。
這種方式是最常用的流程，安全性也最高，它適用於那些有後端的 Web 應用。授權碼通過前端傳送，令牌則是儲存在後端，而且所有與資源服務器的通信都在後端完成。這樣的前後端分離，可以避免令牌洩漏。
OAuth認證和授權的過程如下:
1、用戶訪問第三方網站網站，想對用戶存放在服務商的某些資源進行操作。
2、第三方網站向服務商請求一個臨時令牌。
3、服務商驗證第三方網站的身份後，授予一個臨時令牌。
4、第三方網站獲得臨時令牌後，將用戶導向至服務商的授權頁面請求用戶授權，然後這個過程中將臨時令牌和第三方網站的返回地址發送給服務商。
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參數是保密的，因此只能在後端發請求），grant_type參數的值是AUTHORIZATION_CODE，表示採用的授權方式是授權碼，code參數是上一步拿到的授權碼，redirect_uri參數是令牌頒發後的回調網址。
第四步，B 網站收到請求以後，就會頒發令牌。具體做法是向redirect_uri指定的網址，發送一段 JSON 數據
{
"access_token":"ACCESS_TOKEN",
"token_type":"bearer",
"expires_in":2592000,
"refresh_token":"REFRESH_TOKEN",
"scope":"read",
"uid":100101,
"info":{...}
}
上面 JSON 數據中，access_token字段就是令牌，A 網站在後端拿到了。
有些 Web 應用是純前端應用，沒有後端。這時就不能用上面的方式了，必須將令牌儲存在前端。
具體實例
點關注，不迷路，每天更新大量前端資料
前端實現第三方登錄之OAuth2.0協議
OAuth 2.0 規定了四種獲得令牌的流程。我們可以選擇最適合自己的那一種，向第三方應用頒發令牌。下面就是這四種授權方式。
- 授權碼模式（authorization-code）
- 簡化模式（implicit）
- 密碼式（password）：
- 客戶端憑證（client credentials）
不管哪一種授權方式，第三方應用申請令牌之前，都必須先到系統備案，說明自己的身份，然後會拿到兩個身份識別碼：客戶端 ID（client ID）和客戶端密鑰（client secret）。這是為了防止令牌被濫用，沒有備案過的第三方應用，是不會拿到令牌的。
授權碼（authorization code）方式，指的是第三方應用先申請一個授權碼，然後再用該碼獲取令牌。
比如我們經常用某些公眾號，用一些論壇，有用QQ，微信登錄什麼的，需要你在QQ，微信的界面上授權，這些號、論壇就可以拿到你的個人信息，頭像什麼的，但他們沒有你的用戶密碼。生活中，我去銀行辦理過代扣水電煤，銀行確認我的身份，然後籤一個代扣合同，給我回執，之後水電煤公司就直接從我的賬戶劃錢過去了。但公司不知道我的密碼，不能代做其它沒授權的操作，差不多上OAuth2.0就是解決上面的問題。
OAuth2.0的相同理念的生活場景舉例
比如我有銀行賬戶，想授權朋友查看賬戶金額，不告訴他密碼，應該怎麼辦呢？
我和朋友去銀行，銀行先後驗證我們倆的身份證。銀行讓我籤一個授權合同，上面寫著我授權朋友查我的賬戶，銀行給我和朋友各一份合同憑證。銀行後臺登記朋友拿這個憑證可以查我的賬戶這樣一條信息。之後朋友拿著憑證和他自己的身份證，果然查到了我的賬戶信息。上面的分析蠻簡單的，貌似也沒有什麼問題。朋友不可能轉賬，因為銀行會查授權合同，我的合同被其它人知道了，別人也不可能查我的賬戶，因為只授權給朋友。那麼把上面的過程轉化到應用之中去。我在某論壇上操作，希望用QQ登錄。（論壇認為我有QQ號的，論壇本身也在QQ註冊過自己的應用的。就如同去銀行，這個銀行必須可以鑑定我們雙方的身份。）
點了QQ登錄，那論壇就引導跳轉到QQ的授權頁面了。（這個過程中，論壇必須提供了自己的登錄信息，QQ那邊認證了，才出現授權頁面。）在這個頁面裡，我要登錄一下QQ了。前面已經認證過論壇了，現在登錄就是認證我了。登錄成功後，QQ顯示出授權的內容，讓我確認，我點了確認。（類似銀行讓我籤授權合同了）確認之後，按說是銀行將確認了的授權合同，一式三份，給我和論壇各一份。給我看合同並不重要，可以後臺存下來，我隨時可以登錄後，在已授權的地方查看給過的授權信息。關鍵是怎麼給論壇呢？事實上論壇當初轉到QQ授權頁面的時候，除了提供自己的身份，還有一個redirectUrl。當我點了授權後，QQ把合同給了這個Url，等於就是給了論壇了。論壇拿到了合同，再把自己的登錄信息給QQ再驗證一下，QQ就把我的資料給了論壇了。如果這裡不再驗證論壇的身份，論壇把合同賣給其它地方怎麼辦？那就不安全了！當然我也可能把合同轉給其它地方用，來陷害是這個論壇在用。
這種方式是最常用的流程，安全性也最高，它適用於那些有後端的 Web 應用。授權碼通過前端傳送，令牌則是儲存在後端，而且所有與資源服務器的通信都在後端完成。這樣的前後端分離，可以避免令牌洩漏。
OAuth認證和授權的過程如下:
1、用戶訪問第三方網站網站，想對用戶存放在服務商的某些資源進行操作。
2、第三方網站向服務商請求一個臨時令牌。
3、服務商驗證第三方網站的身份後，授予一個臨時令牌。
4、第三方網站獲得臨時令牌後，將用戶導向至服務商的授權頁面請求用戶授權，然後這個過程中將臨時令牌和第三方網站的返回地址發送給服務商。
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參數是保密的，因此只能在後端發請求），grant_type參數的值是AUTHORIZATION_CODE，表示採用的授權方式是授權碼，code參數是上一步拿到的授權碼，redirect_uri參數是令牌頒發後的回調網址。
第四步，B 網站收到請求以後，就會頒發令牌。具體做法是向redirect_uri指定的網址，發送一段 JSON 數據
{
"access_token":"ACCESS_TOKEN",
"token_type":"bearer",
"expires_in":2592000,
"refresh_token":"REFRESH_TOKEN",
"scope":"read",
"uid":100101,
"info":{...}
}
上面 JSON 數據中，access_token字段就是令牌，A 網站在後端拿到了。
有些 Web 應用是純前端應用，沒有後端。這時就不能用上面的方式了，必須將令牌儲存在前端。
具體實例
點關注，不迷路，每天更新大量前端資料
前端實現第三方登錄之OAuth2.0協議
OAuth 2.0 規定了四種獲得令牌的流程。我們可以選擇最適合自己的那一種，向第三方應用頒發令牌。下面就是這四種授權方式。
- 授權碼模式（authorization-code）
- 簡化模式（implicit）
- 密碼式（password）：
- 客戶端憑證（client credentials）
不管哪一種授權方式，第三方應用申請令牌之前，都必須先到系統備案，說明自己的身份，然後會拿到兩個身份識別碼：客戶端 ID（client ID）和客戶端密鑰（client secret）。這是為了防止令牌被濫用，沒有備案過的第三方應用，是不會拿到令牌的。
授權碼（authorization code）方式，指的是第三方應用先申請一個授權碼，然後再用該碼獲取令牌。
比如我們經常用某些公眾號，用一些論壇，有用QQ，微信登錄什麼的，需要你在QQ，微信的界面上授權，這些號、論壇就可以拿到你的個人信息，頭像什麼的，但他們沒有你的用戶密碼。生活中，我去銀行辦理過代扣水電煤，銀行確認我的身份，然後籤一個代扣合同，給我回執，之後水電煤公司就直接從我的賬戶劃錢過去了。但公司不知道我的密碼，不能代做其它沒授權的操作，差不多上OAuth2.0就是解決上面的問題。
OAuth2.0的相同理念的生活場景舉例
比如我有銀行賬戶，想授權朋友查看賬戶金額，不告訴他密碼，應該怎麼辦呢？
我和朋友去銀行，銀行先後驗證我們倆的身份證。銀行讓我籤一個授權合同，上面寫著我授權朋友查我的賬戶，銀行給我和朋友各一份合同憑證。銀行後臺登記朋友拿這個憑證可以查我的賬戶這樣一條信息。之後朋友拿著憑證和他自己的身份證，果然查到了我的賬戶信息。上面的分析蠻簡單的，貌似也沒有什麼問題。朋友不可能轉賬，因為銀行會查授權合同，我的合同被其它人知道了，別人也不可能查我的賬戶，因為只授權給朋友。那麼把上面的過程轉化到應用之中去。我在某論壇上操作，希望用QQ登錄。（論壇認為我有QQ號的，論壇本身也在QQ註冊過自己的應用的。就如同去銀行，這個銀行必須可以鑑定我們雙方的身份。）
點了QQ登錄，那論壇就引導跳轉到QQ的授權頁面了。（這個過程中，論壇必須提供了自己的登錄信息，QQ那邊認證了，才出現授權頁面。）在這個頁面裡，我要登錄一下QQ了。前面已經認證過論壇了，現在登錄就是認證我了。登錄成功後，QQ顯示出授權的內容，讓我確認，我點了確認。（類似銀行讓我籤授權合同了）確認之後，按說是銀行將確認了的授權合同，一式三份，給我和論壇各一份。給我看合同並不重要，可以後臺存下來，我隨時可以登錄後，在已授權的地方查看給過的授權信息。關鍵是怎麼給論壇呢？事實上論壇當初轉到QQ授權頁面的時候，除了提供自己的身份，還有一個redirectUrl。當我點了授權後，QQ把合同給了這個Url，等於就是給了論壇了。論壇拿到了合同，再把自己的登錄信息給QQ再驗證一下，QQ就把我的資料給了論壇了。如果這裡不再驗證論壇的身份，論壇把合同賣給其它地方怎麼辦？那就不安全了！當然我也可能把合同轉給其它地方用，來陷害是這個論壇在用。
這種方式是最常用的流程，安全性也最高，它適用於那些有後端的 Web 應用。授權碼通過前端傳送，令牌則是儲存在後端，而且所有與資源服務器的通信都在後端完成。這樣的前後端分離，可以避免令牌洩漏。
OAuth認證和授權的過程如下:
1、用戶訪問第三方網站網站，想對用戶存放在服務商的某些資源進行操作。
2、第三方網站向服務商請求一個臨時令牌。
3、服務商驗證第三方網站的身份後，授予一個臨時令牌。
4、第三方網站獲得臨時令牌後，將用戶導向至服務商的授權頁面請求用戶授權，然後這個過程中將臨時令牌和第三方網站的返回地址發送給服務商。
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參數是保密的，因此只能在後端發請求），grant_type參數的值是AUTHORIZATION_CODE，表示採用的授權方式是授權碼，code參數是上一步拿到的授權碼，redirect_uri參數是令牌頒發後的回調網址。
第四步，B 網站收到請求以後，就會頒發令牌。具體做法是向redirect_uri指定的網址，發送一段 JSON 數據
{
"access_token":"ACCESS_TOKEN",
"token_type":"bearer",
"expires_in":2592000,
"refresh_token":"REFRESH_TOKEN",
"scope":"read",
"uid":100101,
"info":{...}
}
上面 JSON 數據中，access_token字段就是令牌，A 網站在後端拿到了。
有些 Web 應用是純前端應用，沒有後端。這時就不能用上面的方式了，必須將令牌儲存在前端。
具體實例
簡化模式
RFC 6749 就規定了第二種方式，允許直接向前端頒發令牌。這種方式沒有授權碼這個中間步驟，所以稱為（授權碼）"隱藏式"（implicit）。
點關注，不迷路，每天更新大量前端資料
前端實現第三方登錄之OAuth2.0協議
OAuth 2.0 規定了四種獲得令牌的流程。我們可以選擇最適合自己的那一種，向第三方應用頒發令牌。下面就是這四種授權方式。
- 授權碼模式（authorization-code）
- 簡化模式（implicit）
- 密碼式（password）：
- 客戶端憑證（client credentials）
不管哪一種授權方式，第三方應用申請令牌之前，都必須先到系統備案，說明自己的身份，然後會拿到兩個身份識別碼：客戶端 ID（client ID）和客戶端密鑰（client secret）。這是為了防止令牌被濫用，沒有備案過的第三方應用，是不會拿到令牌的。
授權碼（authorization code）方式，指的是第三方應用先申請一個授權碼，然後再用該碼獲取令牌。
比如我們經常用某些公眾號，用一些論壇，有用QQ，微信登錄什麼的，需要你在QQ，微信的界面上授權，這些號、論壇就可以拿到你的個人信息，頭像什麼的，但他們沒有你的用戶密碼。生活中，我去銀行辦理過代扣水電煤，銀行確認我的身份，然後籤一個代扣合同，給我回執，之後水電煤公司就直接從我的賬戶劃錢過去了。但公司不知道我的密碼，不能代做其它沒授權的操作，差不多上OAuth2.0就是解決上面的問題。
OAuth2.0的相同理念的生活場景舉例
比如我有銀行賬戶，想授權朋友查看賬戶金額，不告訴他密碼，應該怎麼辦呢？
我和朋友去銀行，銀行先後驗證我們倆的身份證。銀行讓我籤一個授權合同，上面寫著我授權朋友查我的賬戶，銀行給我和朋友各一份合同憑證。銀行後臺登記朋友拿這個憑證可以查我的賬戶這樣一條信息。之後朋友拿著憑證和他自己的身份證，果然查到了我的賬戶信息。上面的分析蠻簡單的，貌似也沒有什麼問題。朋友不可能轉賬，因為銀行會查授權合同，我的合同被其它人知道了，別人也不可能查我的賬戶，因為只授權給朋友。那麼把上面的過程轉化到應用之中去。我在某論壇上操作，希望用QQ登錄。（論壇認為我有QQ號的，論壇本身也在QQ註冊過自己的應用的。就如同去銀行，這個銀行必須可以鑑定我們雙方的身份。）
點了QQ登錄，那論壇就引導跳轉到QQ的授權頁面了。（這個過程中，論壇必須提供了自己的登錄信息，QQ那邊認證了，才出現授權頁面。）在這個頁面裡，我要登錄一下QQ了。前面已經認證過論壇了，現在登錄就是認證我了。登錄成功後，QQ顯示出授權的內容，讓我確認，我點了確認。（類似銀行讓我籤授權合同了）確認之後，按說是銀行將確認了的授權合同，一式三份，給我和論壇各一份。給我看合同並不重要，可以後臺存下來，我隨時可以登錄後，在已授權的地方查看給過的授權信息。關鍵是怎麼給論壇呢？事實上論壇當初轉到QQ授權頁面的時候，除了提供自己的身份，還有一個redirectUrl。當我點了授權後，QQ把合同給了這個Url，等於就是給了論壇了。論壇拿到了合同，再把自己的登錄信息給QQ再驗證一下，QQ就把我的資料給了論壇了。如果這裡不再驗證論壇的身份，論壇把合同賣給其它地方怎麼辦？那就不安全了！當然我也可能把合同轉給其它地方用，來陷害是這個論壇在用。
這種方式是最常用的流程，安全性也最高，它適用於那些有後端的 Web 應用。授權碼通過前端傳送，令牌則是儲存在後端，而且所有與資源服務器的通信都在後端完成。這樣的前後端分離，可以避免令牌洩漏。
OAuth認證和授權的過程如下:
1、用戶訪問第三方網站網站，想對用戶存放在服務商的某些資源進行操作。
2、第三方網站向服務商請求一個臨時令牌。
3、服務商驗證第三方網站的身份後，授予一個臨時令牌。
4、第三方網站獲得臨時令牌後，將用戶導向至服務商的授權頁面請求用戶授權，然後這個過程中將臨時令牌和第三方網站的返回地址發送給服務商。
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參數是保密的，因此只能在後端發請求），grant_type參數的值是AUTHORIZATION_CODE，表示採用的授權方式是授權碼，code參數是上一步拿到的授權碼，redirect_uri參數是令牌頒發後的回調網址。
第四步，B 網站收到請求以後，就會頒發令牌。具體做法是向redirect_uri指定的網址，發送一段 JSON 數據
{
"access_token":"ACCESS_TOKEN",
"token_type":"bearer",
"expires_in":2592000,
"refresh_token":"REFRESH_TOKEN",
"scope":"read",
"uid":100101,
"info":{...}
}
上面 JSON 數據中，access_token字段就是令牌，A 網站在後端拿到了。
有些 Web 應用是純前端應用，沒有後端。這時就不能用上面的方式了，必須將令牌儲存在前端。
具體實例
簡化模式
RFC 6749 就規定了第二種方式，允許直接向前端頒發令牌。這種方式沒有授權碼這個中間步驟，所以稱為（授權碼）"隱藏式"（implicit）。
第一步，A 網站提供一個鏈接，要求用戶跳轉到 B 網站，授權用戶數據給 A 網站使用。
https://b.com/oauth/authorize?
response_type=token&
client_id=CLIENT_ID&
redirect_uri=CALLBACK_URL&
scope=read
上面 URL 中，response_type參數為token，表示要求直接返回令牌。
第二步，用戶跳轉到 B 網站，登錄後同意給予 A 網站授權。這時，B 網站就會跳回redirect_uri參數指定的跳轉網址，並且把令牌作為 URL 參數，傳給 A 網站
https://a.com/callback#token=ACCESS_TOKEN
上面 URL 中，token參數就是令牌，A 網站因此直接在前端拿到令牌。
令牌的位置是 URL 錨點（fragment），而不是查詢字符串（querystring），這是因為 OAuth 2.0 允許跳轉網址是 HTTP 協議，因此存在"中間人攻擊"的風險，而瀏覽器跳轉時，錨點不會發到服務器，就減少了洩漏令牌的風險。這種方式把令牌直接傳給前端，是很不安全的。因此，只能用於一些安全要求不高的場景，並且令牌的有效期必須非常短，通常就是會話期間（session）有效，瀏覽器關掉，令牌就失效了。
具體實例大概手機登錄遊戲，網頁中的百度雲資源保存等，有時會跳到客戶端去同意授權。