藍色字體，選擇“標星公眾號”
優質文章，第一時間送達
"藍色字體，選擇“標星公眾號”
優質文章，第一時間送達
1. 前言
個人網站最近增加了評論功能，為了方便用戶不用註冊就可以評論，對接了 QQ 和微博這 2 大常用軟件的一鍵登錄，總的來說其實都挺簡單的，可能會有一點小坑，但不算多，完整記錄下來方便後來人快速對接。
2. 後臺設計在真正開始對接之前，我們先來聊一聊後臺的方案設計。既然是對接第三方登錄，那就免不了如何將用戶信息保存。首先需要明確一點的是，用戶在第三方登錄成功之後，我們能拿到的僅僅是一個代表用戶唯一身份的ID以及用來識別身份的accessToken，當然還有暱稱、頭像、性別等有限資料，對接第三方登錄的關鍵就是如何確定用戶是合法登錄，如果確定這次登錄的和上次登錄的是同一個人並且不是假冒的。其實這個並不用我們特別操心，就以微博登錄為例，用戶登錄成功之後會回調一個code 給我們，然後我們再拿code去微博那換取accessToken，如果這個code是用戶亂填的，那這一關肯定過不了，所以，前面的擔心有點多餘。另外一個問題就是如何和現有用戶系統打通，有的網站在用戶已經登錄成功之後還要用戶輸入手機號和驗證碼，或者要用戶重新註冊賬號和密碼來綁定第三方賬戶，感覺這種實現用戶體驗非常差，碰到這種網站我一般都是直接關掉，都已經登錄了還讓用戶註冊，什麼鬼！由於我做的是評論功能，我並不希望評論用戶和現有用戶表打通，所以就不存在這件事了，如果想打通的話，我覺得無非就是登錄成功之後默認往老用戶表插入一條數據，然後和OpenUser表關聯起來，判斷用戶是否登錄時把OpenUser的鑑權也加進去就OK了。
本文的後臺以Java為例。
2.1. 數據庫設計
再來說說數據庫設計，為了系統的擴展性，我有一個專門的OpenUser表用來存放第三方登錄用戶，主要字段如下："藍色字體，選擇“標星公眾號”
優質文章，第一時間送達
1. 前言
個人網站最近增加了評論功能，為了方便用戶不用註冊就可以評論，對接了 QQ 和微博這 2 大常用軟件的一鍵登錄，總的來說其實都挺簡單的，可能會有一點小坑，但不算多，完整記錄下來方便後來人快速對接。
2. 後臺設計在真正開始對接之前，我們先來聊一聊後臺的方案設計。既然是對接第三方登錄，那就免不了如何將用戶信息保存。首先需要明確一點的是，用戶在第三方登錄成功之後，我們能拿到的僅僅是一個代表用戶唯一身份的ID以及用來識別身份的accessToken，當然還有暱稱、頭像、性別等有限資料，對接第三方登錄的關鍵就是如何確定用戶是合法登錄，如果確定這次登錄的和上次登錄的是同一個人並且不是假冒的。其實這個並不用我們特別操心，就以微博登錄為例，用戶登錄成功之後會回調一個code 給我們，然後我們再拿code去微博那換取accessToken，如果這個code是用戶亂填的，那這一關肯定過不了，所以，前面的擔心有點多餘。另外一個問題就是如何和現有用戶系統打通，有的網站在用戶已經登錄成功之後還要用戶輸入手機號和驗證碼，或者要用戶重新註冊賬號和密碼來綁定第三方賬戶，感覺這種實現用戶體驗非常差，碰到這種網站我一般都是直接關掉，都已經登錄了還讓用戶註冊，什麼鬼！由於我做的是評論功能，我並不希望評論用戶和現有用戶表打通，所以就不存在這件事了，如果想打通的話，我覺得無非就是登錄成功之後默認往老用戶表插入一條數據，然後和OpenUser表關聯起來，判斷用戶是否登錄時把OpenUser的鑑權也加進去就OK了。
本文的後臺以Java為例。
2.1. 數據庫設計
再來說說數據庫設計，為了系統的擴展性，我有一個專門的OpenUser表用來存放第三方登錄用戶，主要字段如下：這樣設計理論上就可以無限擴展了。
2.2. 鑑權流程
這裡我只是說說我的方案，把accessToken寫入cookie肯定是不安全的，因為accessToken相當於是第三方網站的臨時密碼，被別人竊取了就可以隨意拿來幹壞事了。可以在用戶登錄成功之後我們自己生成一個token，這樣的token即使洩露了頂多就是被人拿來隨意評論，損失不大，但是如果accessToken被洩露了，以微博為例，人家可以利用這個accessToken隨意發微博、刪微博、加關注等等，很危險。當然，如果不想token洩露的話也可以通過綁定IP等方式來限制。鑑權的話就是首先判斷cookie中是否有我們自己的token，然後判斷是否合法，合法再判斷第三方授權是否已過期等等。
QQ登陸
3.1. 實名認證
QQ登錄我們對接的是QQ互聯，地址：https://connect.qq.com ,首先需要註冊成為開發者並實名認證，需要手持身份證照片，具體就不講了。
3.2. 創建應用
進入應用管理頁面(https://connect.qq.com/manage.html#/)創建應用，根據實際需要是創建網站應用還是移動應用，我這裡是網站應用：
"藍色字體，選擇“標星公眾號”
優質文章，第一時間送達
1. 前言
個人網站最近增加了評論功能，為了方便用戶不用註冊就可以評論，對接了 QQ 和微博這 2 大常用軟件的一鍵登錄，總的來說其實都挺簡單的，可能會有一點小坑，但不算多，完整記錄下來方便後來人快速對接。
2. 後臺設計在真正開始對接之前，我們先來聊一聊後臺的方案設計。既然是對接第三方登錄，那就免不了如何將用戶信息保存。首先需要明確一點的是，用戶在第三方登錄成功之後，我們能拿到的僅僅是一個代表用戶唯一身份的ID以及用來識別身份的accessToken，當然還有暱稱、頭像、性別等有限資料，對接第三方登錄的關鍵就是如何確定用戶是合法登錄，如果確定這次登錄的和上次登錄的是同一個人並且不是假冒的。其實這個並不用我們特別操心，就以微博登錄為例，用戶登錄成功之後會回調一個code 給我們，然後我們再拿code去微博那換取accessToken，如果這個code是用戶亂填的，那這一關肯定過不了，所以，前面的擔心有點多餘。另外一個問題就是如何和現有用戶系統打通，有的網站在用戶已經登錄成功之後還要用戶輸入手機號和驗證碼，或者要用戶重新註冊賬號和密碼來綁定第三方賬戶，感覺這種實現用戶體驗非常差，碰到這種網站我一般都是直接關掉，都已經登錄了還讓用戶註冊，什麼鬼！由於我做的是評論功能，我並不希望評論用戶和現有用戶表打通，所以就不存在這件事了，如果想打通的話，我覺得無非就是登錄成功之後默認往老用戶表插入一條數據，然後和OpenUser表關聯起來，判斷用戶是否登錄時把OpenUser的鑑權也加進去就OK了。
本文的後臺以Java為例。
2.1. 數據庫設計
再來說說數據庫設計，為了系統的擴展性，我有一個專門的OpenUser表用來存放第三方登錄用戶，主要字段如下：這樣設計理論上就可以無限擴展了。
2.2. 鑑權流程
這裡我只是說說我的方案，把accessToken寫入cookie肯定是不安全的，因為accessToken相當於是第三方網站的臨時密碼，被別人竊取了就可以隨意拿來幹壞事了。可以在用戶登錄成功之後我們自己生成一個token，這樣的token即使洩露了頂多就是被人拿來隨意評論，損失不大，但是如果accessToken被洩露了，以微博為例，人家可以利用這個accessToken隨意發微博、刪微博、加關注等等，很危險。當然，如果不想token洩露的話也可以通過綁定IP等方式來限制。鑑權的話就是首先判斷cookie中是否有我們自己的token，然後判斷是否合法，合法再判斷第三方授權是否已過期等等。
QQ登陸
3.1. 實名認證
QQ登錄我們對接的是QQ互聯，地址：https://connect.qq.com ,首先需要註冊成為開發者並實名認證，需要手持身份證照片，具體就不講了。
3.2. 創建應用
進入應用管理頁面(https://connect.qq.com/manage.html#/)創建應用，根據實際需要是創建網站應用還是移動應用，我這裡是網站應用：
第一步：
"藍色字體，選擇“標星公眾號”
優質文章，第一時間送達
1. 前言
個人網站最近增加了評論功能，為了方便用戶不用註冊就可以評論，對接了 QQ 和微博這 2 大常用軟件的一鍵登錄，總的來說其實都挺簡單的，可能會有一點小坑，但不算多，完整記錄下來方便後來人快速對接。
2. 後臺設計在真正開始對接之前，我們先來聊一聊後臺的方案設計。既然是對接第三方登錄，那就免不了如何將用戶信息保存。首先需要明確一點的是，用戶在第三方登錄成功之後，我們能拿到的僅僅是一個代表用戶唯一身份的ID以及用來識別身份的accessToken，當然還有暱稱、頭像、性別等有限資料，對接第三方登錄的關鍵就是如何確定用戶是合法登錄，如果確定這次登錄的和上次登錄的是同一個人並且不是假冒的。其實這個並不用我們特別操心，就以微博登錄為例，用戶登錄成功之後會回調一個code 給我們，然後我們再拿code去微博那換取accessToken，如果這個code是用戶亂填的，那這一關肯定過不了，所以，前面的擔心有點多餘。另外一個問題就是如何和現有用戶系統打通，有的網站在用戶已經登錄成功之後還要用戶輸入手機號和驗證碼，或者要用戶重新註冊賬號和密碼來綁定第三方賬戶，感覺這種實現用戶體驗非常差，碰到這種網站我一般都是直接關掉，都已經登錄了還讓用戶註冊，什麼鬼！由於我做的是評論功能，我並不希望評論用戶和現有用戶表打通，所以就不存在這件事了，如果想打通的話，我覺得無非就是登錄成功之後默認往老用戶表插入一條數據，然後和OpenUser表關聯起來，判斷用戶是否登錄時把OpenUser的鑑權也加進去就OK了。
本文的後臺以Java為例。
2.1. 數據庫設計
再來說說數據庫設計，為了系統的擴展性，我有一個專門的OpenUser表用來存放第三方登錄用戶，主要字段如下：這樣設計理論上就可以無限擴展了。
2.2. 鑑權流程
這裡我只是說說我的方案，把accessToken寫入cookie肯定是不安全的，因為accessToken相當於是第三方網站的臨時密碼，被別人竊取了就可以隨意拿來幹壞事了。可以在用戶登錄成功之後我們自己生成一個token，這樣的token即使洩露了頂多就是被人拿來隨意評論，損失不大，但是如果accessToken被洩露了，以微博為例，人家可以利用這個accessToken隨意發微博、刪微博、加關注等等，很危險。當然，如果不想token洩露的話也可以通過綁定IP等方式來限制。鑑權的話就是首先判斷cookie中是否有我們自己的token，然後判斷是否合法，合法再判斷第三方授權是否已過期等等。
QQ登陸
3.1. 實名認證
QQ登錄我們對接的是QQ互聯，地址：https://connect.qq.com ,首先需要註冊成為開發者並實名認證，需要手持身份證照片，具體就不講了。
3.2. 創建應用
進入應用管理頁面(https://connect.qq.com/manage.html#/)創建應用，根據實際需要是創建網站應用還是移動應用，我這裡是網站應用：
第一步：
第二步：
"藍色字體，選擇“標星公眾號”
優質文章，第一時間送達
1. 前言
個人網站最近增加了評論功能，為了方便用戶不用註冊就可以評論，對接了 QQ 和微博這 2 大常用軟件的一鍵登錄，總的來說其實都挺簡單的，可能會有一點小坑，但不算多，完整記錄下來方便後來人快速對接。
2. 後臺設計在真正開始對接之前，我們先來聊一聊後臺的方案設計。既然是對接第三方登錄，那就免不了如何將用戶信息保存。首先需要明確一點的是，用戶在第三方登錄成功之後，我們能拿到的僅僅是一個代表用戶唯一身份的ID以及用來識別身份的accessToken，當然還有暱稱、頭像、性別等有限資料，對接第三方登錄的關鍵就是如何確定用戶是合法登錄，如果確定這次登錄的和上次登錄的是同一個人並且不是假冒的。其實這個並不用我們特別操心，就以微博登錄為例，用戶登錄成功之後會回調一個code 給我們，然後我們再拿code去微博那換取accessToken，如果這個code是用戶亂填的，那這一關肯定過不了，所以，前面的擔心有點多餘。另外一個問題就是如何和現有用戶系統打通，有的網站在用戶已經登錄成功之後還要用戶輸入手機號和驗證碼，或者要用戶重新註冊賬號和密碼來綁定第三方賬戶，感覺這種實現用戶體驗非常差，碰到這種網站我一般都是直接關掉，都已經登錄了還讓用戶註冊，什麼鬼！由於我做的是評論功能，我並不希望評論用戶和現有用戶表打通，所以就不存在這件事了，如果想打通的話，我覺得無非就是登錄成功之後默認往老用戶表插入一條數據，然後和OpenUser表關聯起來，判斷用戶是否登錄時把OpenUser的鑑權也加進去就OK了。
本文的後臺以Java為例。
2.1. 數據庫設計
再來說說數據庫設計，為了系統的擴展性，我有一個專門的OpenUser表用來存放第三方登錄用戶，主要字段如下：這樣設計理論上就可以無限擴展了。
2.2. 鑑權流程
這裡我只是說說我的方案，把accessToken寫入cookie肯定是不安全的，因為accessToken相當於是第三方網站的臨時密碼，被別人竊取了就可以隨意拿來幹壞事了。可以在用戶登錄成功之後我們自己生成一個token，這樣的token即使洩露了頂多就是被人拿來隨意評論，損失不大，但是如果accessToken被洩露了，以微博為例，人家可以利用這個accessToken隨意發微博、刪微博、加關注等等，很危險。當然，如果不想token洩露的話也可以通過綁定IP等方式來限制。鑑權的話就是首先判斷cookie中是否有我們自己的token，然後判斷是否合法，合法再判斷第三方授權是否已過期等等。
QQ登陸
3.1. 實名認證
QQ登錄我們對接的是QQ互聯，地址：https://connect.qq.com ,首先需要註冊成為開發者並實名認證，需要手持身份證照片，具體就不講了。
3.2. 創建應用
進入應用管理頁面(https://connect.qq.com/manage.html#/)創建應用，根據實際需要是創建網站應用還是移動應用，我這裡是網站應用：
第一步：
第二步：
提交完之後會自動提交審核，基本上就是審核你的資料和備案的資料是否一致，所有資料必須和備案資料一模一樣，否則審核不會通過：
"藍色字體，選擇“標星公眾號”
優質文章，第一時間送達
1. 前言
個人網站最近增加了評論功能，為了方便用戶不用註冊就可以評論，對接了 QQ 和微博這 2 大常用軟件的一鍵登錄，總的來說其實都挺簡單的，可能會有一點小坑，但不算多，完整記錄下來方便後來人快速對接。
2. 後臺設計在真正開始對接之前，我們先來聊一聊後臺的方案設計。既然是對接第三方登錄，那就免不了如何將用戶信息保存。首先需要明確一點的是，用戶在第三方登錄成功之後，我們能拿到的僅僅是一個代表用戶唯一身份的ID以及用來識別身份的accessToken，當然還有暱稱、頭像、性別等有限資料，對接第三方登錄的關鍵就是如何確定用戶是合法登錄，如果確定這次登錄的和上次登錄的是同一個人並且不是假冒的。其實這個並不用我們特別操心，就以微博登錄為例，用戶登錄成功之後會回調一個code 給我們，然後我們再拿code去微博那換取accessToken，如果這個code是用戶亂填的，那這一關肯定過不了，所以，前面的擔心有點多餘。另外一個問題就是如何和現有用戶系統打通，有的網站在用戶已經登錄成功之後還要用戶輸入手機號和驗證碼，或者要用戶重新註冊賬號和密碼來綁定第三方賬戶，感覺這種實現用戶體驗非常差，碰到這種網站我一般都是直接關掉，都已經登錄了還讓用戶註冊，什麼鬼！由於我做的是評論功能，我並不希望評論用戶和現有用戶表打通，所以就不存在這件事了，如果想打通的話，我覺得無非就是登錄成功之後默認往老用戶表插入一條數據，然後和OpenUser表關聯起來，判斷用戶是否登錄時把OpenUser的鑑權也加進去就OK了。
本文的後臺以Java為例。
2.1. 數據庫設計
再來說說數據庫設計，為了系統的擴展性，我有一個專門的OpenUser表用來存放第三方登錄用戶，主要字段如下：這樣設計理論上就可以無限擴展了。
2.2. 鑑權流程
這裡我只是說說我的方案，把accessToken寫入cookie肯定是不安全的，因為accessToken相當於是第三方網站的臨時密碼，被別人竊取了就可以隨意拿來幹壞事了。可以在用戶登錄成功之後我們自己生成一個token，這樣的token即使洩露了頂多就是被人拿來隨意評論，損失不大，但是如果accessToken被洩露了，以微博為例，人家可以利用這個accessToken隨意發微博、刪微博、加關注等等，很危險。當然，如果不想token洩露的話也可以通過綁定IP等方式來限制。鑑權的話就是首先判斷cookie中是否有我們自己的token，然後判斷是否合法，合法再判斷第三方授權是否已過期等等。
QQ登陸
3.1. 實名認證
QQ登錄我們對接的是QQ互聯，地址：https://connect.qq.com ,首先需要註冊成為開發者並實名認證，需要手持身份證照片，具體就不講了。
3.2. 創建應用
進入應用管理頁面(https://connect.qq.com/manage.html#/)創建應用，根據實際需要是創建網站應用還是移動應用，我這裡是網站應用：
第一步：
第二步：
提交完之後會自動提交審核，基本上就是審核你的資料和備案的資料是否一致，所有資料必須和備案資料一模一樣，否則審核不會通過：
當然，這些資料後面還是可以修改的。申請成功之後你會得到appId和appKey。
3.3. 引導用戶登錄
這裡可以下載一些視覺素材，在頁面合適位置放一個QQ登錄按鈕，點擊時引導用戶進入授權頁面：
"藍色字體，選擇“標星公眾號”
優質文章，第一時間送達
1. 前言
個人網站最近增加了評論功能，為了方便用戶不用註冊就可以評論，對接了 QQ 和微博這 2 大常用軟件的一鍵登錄，總的來說其實都挺簡單的，可能會有一點小坑，但不算多，完整記錄下來方便後來人快速對接。
2. 後臺設計在真正開始對接之前，我們先來聊一聊後臺的方案設計。既然是對接第三方登錄，那就免不了如何將用戶信息保存。首先需要明確一點的是，用戶在第三方登錄成功之後，我們能拿到的僅僅是一個代表用戶唯一身份的ID以及用來識別身份的accessToken，當然還有暱稱、頭像、性別等有限資料，對接第三方登錄的關鍵就是如何確定用戶是合法登錄，如果確定這次登錄的和上次登錄的是同一個人並且不是假冒的。其實這個並不用我們特別操心，就以微博登錄為例，用戶登錄成功之後會回調一個code 給我們，然後我們再拿code去微博那換取accessToken，如果這個code是用戶亂填的，那這一關肯定過不了，所以，前面的擔心有點多餘。另外一個問題就是如何和現有用戶系統打通，有的網站在用戶已經登錄成功之後還要用戶輸入手機號和驗證碼，或者要用戶重新註冊賬號和密碼來綁定第三方賬戶，感覺這種實現用戶體驗非常差，碰到這種網站我一般都是直接關掉，都已經登錄了還讓用戶註冊，什麼鬼！由於我做的是評論功能，我並不希望評論用戶和現有用戶表打通，所以就不存在這件事了，如果想打通的話，我覺得無非就是登錄成功之後默認往老用戶表插入一條數據，然後和OpenUser表關聯起來，判斷用戶是否登錄時把OpenUser的鑑權也加進去就OK了。
本文的後臺以Java為例。
2.1. 數據庫設計
再來說說數據庫設計，為了系統的擴展性，我有一個專門的OpenUser表用來存放第三方登錄用戶，主要字段如下：這樣設計理論上就可以無限擴展了。
2.2. 鑑權流程
這裡我只是說說我的方案，把accessToken寫入cookie肯定是不安全的，因為accessToken相當於是第三方網站的臨時密碼，被別人竊取了就可以隨意拿來幹壞事了。可以在用戶登錄成功之後我們自己生成一個token，這樣的token即使洩露了頂多就是被人拿來隨意評論，損失不大，但是如果accessToken被洩露了，以微博為例，人家可以利用這個accessToken隨意發微博、刪微博、加關注等等，很危險。當然，如果不想token洩露的話也可以通過綁定IP等方式來限制。鑑權的話就是首先判斷cookie中是否有我們自己的token，然後判斷是否合法，合法再判斷第三方授權是否已過期等等。
QQ登陸
3.1. 實名認證
QQ登錄我們對接的是QQ互聯，地址：https://connect.qq.com ,首先需要註冊成為開發者並實名認證，需要手持身份證照片，具體就不講了。
3.2. 創建應用
進入應用管理頁面(https://connect.qq.com/manage.html#/)創建應用，根據實際需要是創建網站應用還是移動應用，我這裡是網站應用：
第一步：
第二步：
提交完之後會自動提交審核，基本上就是審核你的資料和備案的資料是否一致，所有資料必須和備案資料一模一樣，否則審核不會通過：
當然，這些資料後面還是可以修改的。申請成功之後你會得到appId和appKey。
3.3. 引導用戶登錄
這裡可以下載一些視覺素材，在頁面合適位置放一個QQ登錄按鈕，點擊時引導用戶進入授權頁面：
代碼：
function openWindow(url, width, height){width = width || 600;height = height || 400;var left = (window.screen.width - width) / 2;var top = (window.screen.height - height) / 2;window.open(url, "_blank", "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, left="+left+", top="+top+", width="+width+", height="+height);}function qqLogin{var qqAppId = '424323422'; // 上面申請得到的appidvar qqAuthPath = 'http://www.test.com/auth'; // 前面設置的回調地址var state = 'fjdslfjsdlkfd'; // 防止CSRF攻擊的隨機參數，必傳，登錄成功之後會回傳，最好後臺自己生成然後校驗合法性openWindow(`https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=${qqAppId}&redirect_uri=${encodeURIComponent(qqAuthPath)}&state=${state}`);}
然後會打開一個授權頁面，這個頁面大家應該都熟悉：
"藍色字體，選擇“標星公眾號”
優質文章，第一時間送達
1. 前言
個人網站最近增加了評論功能，為了方便用戶不用註冊就可以評論，對接了 QQ 和微博這 2 大常用軟件的一鍵登錄，總的來說其實都挺簡單的，可能會有一點小坑，但不算多，完整記錄下來方便後來人快速對接。
2. 後臺設計在真正開始對接之前，我們先來聊一聊後臺的方案設計。既然是對接第三方登錄，那就免不了如何將用戶信息保存。首先需要明確一點的是，用戶在第三方登錄成功之後，我們能拿到的僅僅是一個代表用戶唯一身份的ID以及用來識別身份的accessToken，當然還有暱稱、頭像、性別等有限資料，對接第三方登錄的關鍵就是如何確定用戶是合法登錄，如果確定這次登錄的和上次登錄的是同一個人並且不是假冒的。其實這個並不用我們特別操心，就以微博登錄為例，用戶登錄成功之後會回調一個code 給我們，然後我們再拿code去微博那換取accessToken，如果這個code是用戶亂填的，那這一關肯定過不了，所以，前面的擔心有點多餘。另外一個問題就是如何和現有用戶系統打通，有的網站在用戶已經登錄成功之後還要用戶輸入手機號和驗證碼，或者要用戶重新註冊賬號和密碼來綁定第三方賬戶，感覺這種實現用戶體驗非常差，碰到這種網站我一般都是直接關掉，都已經登錄了還讓用戶註冊，什麼鬼！由於我做的是評論功能，我並不希望評論用戶和現有用戶表打通，所以就不存在這件事了，如果想打通的話，我覺得無非就是登錄成功之後默認往老用戶表插入一條數據，然後和OpenUser表關聯起來，判斷用戶是否登錄時把OpenUser的鑑權也加進去就OK了。
本文的後臺以Java為例。
2.1. 數據庫設計
再來說說數據庫設計，為了系統的擴展性，我有一個專門的OpenUser表用來存放第三方登錄用戶，主要字段如下：這樣設計理論上就可以無限擴展了。
2.2. 鑑權流程
這裡我只是說說我的方案，把accessToken寫入cookie肯定是不安全的，因為accessToken相當於是第三方網站的臨時密碼，被別人竊取了就可以隨意拿來幹壞事了。可以在用戶登錄成功之後我們自己生成一個token，這樣的token即使洩露了頂多就是被人拿來隨意評論，損失不大，但是如果accessToken被洩露了，以微博為例，人家可以利用這個accessToken隨意發微博、刪微博、加關注等等，很危險。當然，如果不想token洩露的話也可以通過綁定IP等方式來限制。鑑權的話就是首先判斷cookie中是否有我們自己的token，然後判斷是否合法，合法再判斷第三方授權是否已過期等等。
QQ登陸
3.1. 實名認證
QQ登錄我們對接的是QQ互聯，地址：https://connect.qq.com ,首先需要註冊成為開發者並實名認證，需要手持身份證照片，具體就不講了。
3.2. 創建應用
進入應用管理頁面(https://connect.qq.com/manage.html#/)創建應用，根據實際需要是創建網站應用還是移動應用，我這裡是網站應用：
第一步：
第二步：
提交完之後會自動提交審核，基本上就是審核你的資料和備案的資料是否一致，所有資料必須和備案資料一模一樣，否則審核不會通過：
當然，這些資料後面還是可以修改的。申請成功之後你會得到appId和appKey。
3.3. 引導用戶登錄
這裡可以下載一些視覺素材，在頁面合適位置放一個QQ登錄按鈕，點擊時引導用戶進入授權頁面：
代碼：
function openWindow(url, width, height){width = width || 600;height = height || 400;var left = (window.screen.width - width) / 2;var top = (window.screen.height - height) / 2;window.open(url, "_blank", "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, left="+left+", top="+top+", width="+width+", height="+height);}function qqLogin{var qqAppId = '424323422'; // 上面申請得到的appidvar qqAuthPath = 'http://www.test.com/auth'; // 前面設置的回調地址var state = 'fjdslfjsdlkfd'; // 防止CSRF攻擊的隨機參數，必傳，登錄成功之後會回傳，最好後臺自己生成然後校驗合法性openWindow(`https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=${qqAppId}&redirect_uri=${encodeURIComponent(qqAuthPath)}&state=${state}`);}
然後會打開一個授權頁面，這個頁面大家應該都熟悉：
然後到了這裡我就碰到一個問題了，官方文檔(https://wiki.connect.qq.com)寫的是登錄成功之後首先會回傳一個code，然後再拿code調接口換取accessToken，然後我試了很多次也換過2個賬號發現每次都是直接返回了accessToken，幫我省了一步了，不知道是什麼情況，鬱悶。微信搜索 Web項目聚集地 獲取更多實戰教程。
3.4. 拿到accessToken
現在假設我們都是直接拿到accessToken（因為我暫時還沒搞明白QQ為啥會直接返回，跟文檔說的不一樣），但是授權回調時accessToken會被放在# 後面，URL地址中的hash值好像不會被傳到後臺（貌似是這樣，如有不正確歡迎評論指正），所以只能寫一個下面這樣的臨時頁面：@RequestMapping("/authqq")public void authQQ(HttpServletRequest request, HttpServletResponse response) throws Exception{// QQ登錄有點特殊，參數放在#後面，後臺無法獲取#後面的參數，只能用JS做中間轉換String html = "<!DOCTYPE html>" +"<html lang=\\"zh-cn\\">" +"<head>" +" <title>QQ登錄重定向頁</title>" +" <meta charset=\\"utf-8\\"/>" +"</head>" +"<body>" +" <script type=\\"text/javascript\\">" +" location.href = location.href.replace('#', '&').replace('auth_qq', 'auth_qq_redirect');" +"</script>" +"</body>" +"</html>";response.getWriter.print(html);}
3.5. 獲取openId
根據accessToken調接口獲取用戶的openId，特別注意這個openId是相對於QQ號+appId唯一的，換句話說同一個QQ號登錄2個不同appId時獲取到的openId是不同的。順便說一句，QQ登錄的相關接口做的還真夠“隨便”的，全部都是最簡單的get請求，所以對接起來非常順利。微信搜索 Web項目聚集地 獲取更多實戰教程。
直接看代碼：
// 根據accessToken換取openId// 錯誤示例：callback( {"error":100016,"error_description":"access token check failed"} );// 正確示例：callback( {"client_id":"10XXXXX49","openid":"CF2XXXXXXXX9F4C"} );String result = HttpsUtil.get("https://graph.qq.com/oauth2.0/me?access_token=" + accessToken);Map<String, Object> resp = parseQQAuthResponse(result); // 這個方法就是把結果轉Map// 歡迎關注 Web項目聚集地 獲取更多實戰教程Integer errorCode = (Integer)resp.get("error");String errorMsg = (String)resp.get("error_description");String openId = (String)resp.get("openid");if(errorCode != ) return new ErrorResult(errorCode, "獲取QQ用戶openId失敗："+errorMsg);
3.6. 獲取用戶頭像暱稱等信息
// 獲取用戶暱稱、頭像等信息，{ret: 0, msg: '', nickname: '', ...} ret不為0表示失敗result = HttpsUtil.get("https://graph.qq.com/user/get_user_info?access_token="+accessToken+"&oauth_consumer_key="+appId+"&openid="+openId);resp = JsonUtil.parseJsonToMap(result);// 歡迎關注 Web項目聚集地 獲取更多實戰教程Integer ret = (Integer)resp.get("ret");String msg = (String)resp.get("msg");if(ret != 0) return new ErrorResult("獲取用戶QQ信息失敗："+msg);// 用戶暱稱可能存在4個字節的utf-8字符，MySQL默認不支持，直接插入會報錯，所以過濾掉String nickname = StringUtil.filterUtf8Mb4((String)resp.get("nickname")).trim; // 這個方法可以自行百度// figureurl_qq_2=QQ的100*100頭像，figureurl_2=QQ 100&100空間頭像，QQ頭像不一定有，空間頭像一定有String avatar = (String)resp.get("figureurl_qq_2");if(StringUtil.isBlank(avatar)) avatar = (String)resp.get("figureurl_2");String gender = (String)resp.get("gender");
3.7. 注意事項
到了這一步基本上涉及第三方的就結束了，是不是很簡單？後面無非就是如何插入數據庫、如何保存token、寫入session等。
有幾點注意事項：
需要注意數據庫中是否已經有改用戶，沒有的添加，有的修改，不要重複添加了；
- QQ暱稱暱稱有各種奇奇怪怪的字符，包括emoji，MySQL默認沒有開啟
utf8mb4，直接插入會報錯，所以需要過濾掉； 需要做好對各種錯誤的兼容；
接口會同時返回QQ頭像和空間頭像，QQ頭像不一定有，空間頭像一定有；
回調地址必須和申請的域名一致，否則會報錯。
QQ互聯有個特大的bug，有時候顯示已登錄但是點擊授權管理一直報錯，此時只需要退出重新登錄即可；
授權之後用戶可能會在過期之前提前取消授權；
- 微信搜索 Web項目聚集地 獲取更多實戰教程。
相關文檔官網已經寫得比較細了，但是比較亂：http://wiki.connect.qq.com/
對接微博登陸
4.1. 實名認證
這個我就不具體講了，登錄 http://open.weibo.com/ 很容易找到相關入口，註冊成為開發者，實名認證，一模一樣的。
4.2. 創建應用
點擊鏈接 http://open.weibo.com/apps/new?sort=web 創建web應用：
"藍色字體，選擇“標星公眾號”
優質文章，第一時間送達
1. 前言
個人網站最近增加了評論功能，為了方便用戶不用註冊就可以評論，對接了 QQ 和微博這 2 大常用軟件的一鍵登錄，總的來說其實都挺簡單的，可能會有一點小坑，但不算多，完整記錄下來方便後來人快速對接。
2. 後臺設計在真正開始對接之前，我們先來聊一聊後臺的方案設計。既然是對接第三方登錄，那就免不了如何將用戶信息保存。首先需要明確一點的是，用戶在第三方登錄成功之後，我們能拿到的僅僅是一個代表用戶唯一身份的ID以及用來識別身份的accessToken，當然還有暱稱、頭像、性別等有限資料，對接第三方登錄的關鍵就是如何確定用戶是合法登錄，如果確定這次登錄的和上次登錄的是同一個人並且不是假冒的。其實這個並不用我們特別操心，就以微博登錄為例，用戶登錄成功之後會回調一個code 給我們，然後我們再拿code去微博那換取accessToken，如果這個code是用戶亂填的，那這一關肯定過不了，所以，前面的擔心有點多餘。另外一個問題就是如何和現有用戶系統打通，有的網站在用戶已經登錄成功之後還要用戶輸入手機號和驗證碼，或者要用戶重新註冊賬號和密碼來綁定第三方賬戶，感覺這種實現用戶體驗非常差，碰到這種網站我一般都是直接關掉，都已經登錄了還讓用戶註冊，什麼鬼！由於我做的是評論功能，我並不希望評論用戶和現有用戶表打通，所以就不存在這件事了，如果想打通的話，我覺得無非就是登錄成功之後默認往老用戶表插入一條數據，然後和OpenUser表關聯起來，判斷用戶是否登錄時把OpenUser的鑑權也加進去就OK了。
本文的後臺以Java為例。
2.1. 數據庫設計
再來說說數據庫設計，為了系統的擴展性，我有一個專門的OpenUser表用來存放第三方登錄用戶，主要字段如下：這樣設計理論上就可以無限擴展了。
2.2. 鑑權流程
這裡我只是說說我的方案，把accessToken寫入cookie肯定是不安全的，因為accessToken相當於是第三方網站的臨時密碼，被別人竊取了就可以隨意拿來幹壞事了。可以在用戶登錄成功之後我們自己生成一個token，這樣的token即使洩露了頂多就是被人拿來隨意評論，損失不大，但是如果accessToken被洩露了，以微博為例，人家可以利用這個accessToken隨意發微博、刪微博、加關注等等，很危險。當然，如果不想token洩露的話也可以通過綁定IP等方式來限制。鑑權的話就是首先判斷cookie中是否有我們自己的token，然後判斷是否合法，合法再判斷第三方授權是否已過期等等。
QQ登陸
3.1. 實名認證
QQ登錄我們對接的是QQ互聯，地址：https://connect.qq.com ,首先需要註冊成為開發者並實名認證，需要手持身份證照片，具體就不講了。
3.2. 創建應用
進入應用管理頁面(https://connect.qq.com/manage.html#/)創建應用，根據實際需要是創建網站應用還是移動應用，我這裡是網站應用：
第一步：
第二步：
提交完之後會自動提交審核，基本上就是審核你的資料和備案的資料是否一致，所有資料必須和備案資料一模一樣，否則審核不會通過：
當然，這些資料後面還是可以修改的。申請成功之後你會得到appId和appKey。
3.3. 引導用戶登錄
這裡可以下載一些視覺素材，在頁面合適位置放一個QQ登錄按鈕，點擊時引導用戶進入授權頁面：
代碼：
function openWindow(url, width, height){width = width || 600;height = height || 400;var left = (window.screen.width - width) / 2;var top = (window.screen.height - height) / 2;window.open(url, "_blank", "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, left="+left+", top="+top+", width="+width+", height="+height);}function qqLogin{var qqAppId = '424323422'; // 上面申請得到的appidvar qqAuthPath = 'http://www.test.com/auth'; // 前面設置的回調地址var state = 'fjdslfjsdlkfd'; // 防止CSRF攻擊的隨機參數，必傳，登錄成功之後會回傳，最好後臺自己生成然後校驗合法性openWindow(`https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=${qqAppId}&redirect_uri=${encodeURIComponent(qqAuthPath)}&state=${state}`);}
然後會打開一個授權頁面，這個頁面大家應該都熟悉：
然後到了這裡我就碰到一個問題了，官方文檔(https://wiki.connect.qq.com)寫的是登錄成功之後首先會回傳一個code，然後再拿code調接口換取accessToken，然後我試了很多次也換過2個賬號發現每次都是直接返回了accessToken，幫我省了一步了，不知道是什麼情況，鬱悶。微信搜索 Web項目聚集地 獲取更多實戰教程。
3.4. 拿到accessToken
現在假設我們都是直接拿到accessToken（因為我暫時還沒搞明白QQ為啥會直接返回，跟文檔說的不一樣），但是授權回調時accessToken會被放在# 後面，URL地址中的hash值好像不會被傳到後臺（貌似是這樣，如有不正確歡迎評論指正），所以只能寫一個下面這樣的臨時頁面：@RequestMapping("/authqq")public void authQQ(HttpServletRequest request, HttpServletResponse response) throws Exception{// QQ登錄有點特殊，參數放在#後面，後臺無法獲取#後面的參數，只能用JS做中間轉換String html = "<!DOCTYPE html>" +"<html lang=\\"zh-cn\\">" +"<head>" +" <title>QQ登錄重定向頁</title>" +" <meta charset=\\"utf-8\\"/>" +"</head>" +"<body>" +" <script type=\\"text/javascript\\">" +" location.href = location.href.replace('#', '&').replace('auth_qq', 'auth_qq_redirect');" +"</script>" +"</body>" +"</html>";response.getWriter.print(html);}
3.5. 獲取openId
根據accessToken調接口獲取用戶的openId，特別注意這個openId是相對於QQ號+appId唯一的，換句話說同一個QQ號登錄2個不同appId時獲取到的openId是不同的。順便說一句，QQ登錄的相關接口做的還真夠“隨便”的，全部都是最簡單的get請求，所以對接起來非常順利。微信搜索 Web項目聚集地 獲取更多實戰教程。
直接看代碼：
// 根據accessToken換取openId// 錯誤示例：callback( {"error":100016,"error_description":"access token check failed"} );// 正確示例：callback( {"client_id":"10XXXXX49","openid":"CF2XXXXXXXX9F4C"} );String result = HttpsUtil.get("https://graph.qq.com/oauth2.0/me?access_token=" + accessToken);Map<String, Object> resp = parseQQAuthResponse(result); // 這個方法就是把結果轉Map// 歡迎關注 Web項目聚集地 獲取更多實戰教程Integer errorCode = (Integer)resp.get("error");String errorMsg = (String)resp.get("error_description");String openId = (String)resp.get("openid");if(errorCode != ) return new ErrorResult(errorCode, "獲取QQ用戶openId失敗："+errorMsg);
3.6. 獲取用戶頭像暱稱等信息
// 獲取用戶暱稱、頭像等信息，{ret: 0, msg: '', nickname: '', ...} ret不為0表示失敗result = HttpsUtil.get("https://graph.qq.com/user/get_user_info?access_token="+accessToken+"&oauth_consumer_key="+appId+"&openid="+openId);resp = JsonUtil.parseJsonToMap(result);// 歡迎關注 Web項目聚集地 獲取更多實戰教程Integer ret = (Integer)resp.get("ret");String msg = (String)resp.get("msg");if(ret != 0) return new ErrorResult("獲取用戶QQ信息失敗："+msg);// 用戶暱稱可能存在4個字節的utf-8字符，MySQL默認不支持，直接插入會報錯，所以過濾掉String nickname = StringUtil.filterUtf8Mb4((String)resp.get("nickname")).trim; // 這個方法可以自行百度// figureurl_qq_2=QQ的100*100頭像，figureurl_2=QQ 100&100空間頭像，QQ頭像不一定有，空間頭像一定有String avatar = (String)resp.get("figureurl_qq_2");if(StringUtil.isBlank(avatar)) avatar = (String)resp.get("figureurl_2");String gender = (String)resp.get("gender");
3.7. 注意事項
到了這一步基本上涉及第三方的就結束了，是不是很簡單？後面無非就是如何插入數據庫、如何保存token、寫入session等。
有幾點注意事項：
需要注意數據庫中是否已經有改用戶，沒有的添加，有的修改，不要重複添加了；
- QQ暱稱暱稱有各種奇奇怪怪的字符，包括emoji，MySQL默認沒有開啟
utf8mb4，直接插入會報錯，所以需要過濾掉； 需要做好對各種錯誤的兼容；
接口會同時返回QQ頭像和空間頭像，QQ頭像不一定有，空間頭像一定有；
回調地址必須和申請的域名一致，否則會報錯。
QQ互聯有個特大的bug，有時候顯示已登錄但是點擊授權管理一直報錯，此時只需要退出重新登錄即可；
授權之後用戶可能會在過期之前提前取消授權；
- 微信搜索 Web項目聚集地 獲取更多實戰教程。
相關文檔官網已經寫得比較細了，但是比較亂：http://wiki.connect.qq.com/
對接微博登陸
4.1. 實名認證
這個我就不具體講了，登錄 http://open.weibo.com/ 很容易找到相關入口，註冊成為開發者，實名認證，一模一樣的。
4.2. 創建應用
點擊鏈接 http://open.weibo.com/apps/new?sort=web 創建web應用：
創建成果後完善相關信息，主要是下面這些：
"藍色字體，選擇“標星公眾號”
優質文章，第一時間送達
1. 前言
個人網站最近增加了評論功能，為了方便用戶不用註冊就可以評論，對接了 QQ 和微博這 2 大常用軟件的一鍵登錄，總的來說其實都挺簡單的，可能會有一點小坑，但不算多，完整記錄下來方便後來人快速對接。
2. 後臺設計在真正開始對接之前，我們先來聊一聊後臺的方案設計。既然是對接第三方登錄，那就免不了如何將用戶信息保存。首先需要明確一點的是，用戶在第三方登錄成功之後，我們能拿到的僅僅是一個代表用戶唯一身份的ID以及用來識別身份的accessToken，當然還有暱稱、頭像、性別等有限資料，對接第三方登錄的關鍵就是如何確定用戶是合法登錄，如果確定這次登錄的和上次登錄的是同一個人並且不是假冒的。其實這個並不用我們特別操心，就以微博登錄為例，用戶登錄成功之後會回調一個code 給我們，然後我們再拿code去微博那換取accessToken，如果這個code是用戶亂填的，那這一關肯定過不了，所以，前面的擔心有點多餘。另外一個問題就是如何和現有用戶系統打通，有的網站在用戶已經登錄成功之後還要用戶輸入手機號和驗證碼，或者要用戶重新註冊賬號和密碼來綁定第三方賬戶，感覺這種實現用戶體驗非常差，碰到這種網站我一般都是直接關掉，都已經登錄了還讓用戶註冊，什麼鬼！由於我做的是評論功能，我並不希望評論用戶和現有用戶表打通，所以就不存在這件事了，如果想打通的話，我覺得無非就是登錄成功之後默認往老用戶表插入一條數據，然後和OpenUser表關聯起來，判斷用戶是否登錄時把OpenUser的鑑權也加進去就OK了。
本文的後臺以Java為例。
2.1. 數據庫設計
再來說說數據庫設計，為了系統的擴展性，我有一個專門的OpenUser表用來存放第三方登錄用戶，主要字段如下：這樣設計理論上就可以無限擴展了。
2.2. 鑑權流程
這裡我只是說說我的方案，把accessToken寫入cookie肯定是不安全的，因為accessToken相當於是第三方網站的臨時密碼，被別人竊取了就可以隨意拿來幹壞事了。可以在用戶登錄成功之後我們自己生成一個token，這樣的token即使洩露了頂多就是被人拿來隨意評論，損失不大，但是如果accessToken被洩露了，以微博為例，人家可以利用這個accessToken隨意發微博、刪微博、加關注等等，很危險。當然，如果不想token洩露的話也可以通過綁定IP等方式來限制。鑑權的話就是首先判斷cookie中是否有我們自己的token，然後判斷是否合法，合法再判斷第三方授權是否已過期等等。
QQ登陸
3.1. 實名認證
QQ登錄我們對接的是QQ互聯，地址：https://connect.qq.com ,首先需要註冊成為開發者並實名認證，需要手持身份證照片，具體就不講了。
3.2. 創建應用
進入應用管理頁面(https://connect.qq.com/manage.html#/)創建應用，根據實際需要是創建網站應用還是移動應用，我這裡是網站應用：
第一步：
第二步：
提交完之後會自動提交審核，基本上就是審核你的資料和備案的資料是否一致，所有資料必須和備案資料一模一樣，否則審核不會通過：
當然，這些資料後面還是可以修改的。申請成功之後你會得到appId和appKey。
3.3. 引導用戶登錄
這裡可以下載一些視覺素材，在頁面合適位置放一個QQ登錄按鈕，點擊時引導用戶進入授權頁面：
代碼：
function openWindow(url, width, height){width = width || 600;height = height || 400;var left = (window.screen.width - width) / 2;var top = (window.screen.height - height) / 2;window.open(url, "_blank", "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, left="+left+", top="+top+", width="+width+", height="+height);}function qqLogin{var qqAppId = '424323422'; // 上面申請得到的appidvar qqAuthPath = 'http://www.test.com/auth'; // 前面設置的回調地址var state = 'fjdslfjsdlkfd'; // 防止CSRF攻擊的隨機參數，必傳，登錄成功之後會回傳，最好後臺自己生成然後校驗合法性openWindow(`https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=${qqAppId}&redirect_uri=${encodeURIComponent(qqAuthPath)}&state=${state}`);}
然後會打開一個授權頁面，這個頁面大家應該都熟悉：
然後到了這裡我就碰到一個問題了，官方文檔(https://wiki.connect.qq.com)寫的是登錄成功之後首先會回傳一個code，然後再拿code調接口換取accessToken，然後我試了很多次也換過2個賬號發現每次都是直接返回了accessToken，幫我省了一步了，不知道是什麼情況，鬱悶。微信搜索 Web項目聚集地 獲取更多實戰教程。
3.4. 拿到accessToken
現在假設我們都是直接拿到accessToken（因為我暫時還沒搞明白QQ為啥會直接返回，跟文檔說的不一樣），但是授權回調時accessToken會被放在# 後面，URL地址中的hash值好像不會被傳到後臺（貌似是這樣，如有不正確歡迎評論指正），所以只能寫一個下面這樣的臨時頁面：@RequestMapping("/authqq")public void authQQ(HttpServletRequest request, HttpServletResponse response) throws Exception{// QQ登錄有點特殊，參數放在#後面，後臺無法獲取#後面的參數，只能用JS做中間轉換String html = "<!DOCTYPE html>" +"<html lang=\\"zh-cn\\">" +"<head>" +" <title>QQ登錄重定向頁</title>" +" <meta charset=\\"utf-8\\"/>" +"</head>" +"<body>" +" <script type=\\"text/javascript\\">" +" location.href = location.href.replace('#', '&').replace('auth_qq', 'auth_qq_redirect');" +"</script>" +"</body>" +"</html>";response.getWriter.print(html);}
3.5. 獲取openId
根據accessToken調接口獲取用戶的openId，特別注意這個openId是相對於QQ號+appId唯一的，換句話說同一個QQ號登錄2個不同appId時獲取到的openId是不同的。順便說一句，QQ登錄的相關接口做的還真夠“隨便”的，全部都是最簡單的get請求，所以對接起來非常順利。微信搜索 Web項目聚集地 獲取更多實戰教程。
直接看代碼：
// 根據accessToken換取openId// 錯誤示例：callback( {"error":100016,"error_description":"access token check failed"} );// 正確示例：callback( {"client_id":"10XXXXX49","openid":"CF2XXXXXXXX9F4C"} );String result = HttpsUtil.get("https://graph.qq.com/oauth2.0/me?access_token=" + accessToken);Map<String, Object> resp = parseQQAuthResponse(result); // 這個方法就是把結果轉Map// 歡迎關注 Web項目聚集地 獲取更多實戰教程Integer errorCode = (Integer)resp.get("error");String errorMsg = (String)resp.get("error_description");String openId = (String)resp.get("openid");if(errorCode != ) return new ErrorResult(errorCode, "獲取QQ用戶openId失敗："+errorMsg);
3.6. 獲取用戶頭像暱稱等信息
// 獲取用戶暱稱、頭像等信息，{ret: 0, msg: '', nickname: '', ...} ret不為0表示失敗result = HttpsUtil.get("https://graph.qq.com/user/get_user_info?access_token="+accessToken+"&oauth_consumer_key="+appId+"&openid="+openId);resp = JsonUtil.parseJsonToMap(result);// 歡迎關注 Web項目聚集地 獲取更多實戰教程Integer ret = (Integer)resp.get("ret");String msg = (String)resp.get("msg");if(ret != 0) return new ErrorResult("獲取用戶QQ信息失敗："+msg);// 用戶暱稱可能存在4個字節的utf-8字符，MySQL默認不支持，直接插入會報錯，所以過濾掉String nickname = StringUtil.filterUtf8Mb4((String)resp.get("nickname")).trim; // 這個方法可以自行百度// figureurl_qq_2=QQ的100*100頭像，figureurl_2=QQ 100&100空間頭像，QQ頭像不一定有，空間頭像一定有String avatar = (String)resp.get("figureurl_qq_2");if(StringUtil.isBlank(avatar)) avatar = (String)resp.get("figureurl_2");String gender = (String)resp.get("gender");
3.7. 注意事項
到了這一步基本上涉及第三方的就結束了，是不是很簡單？後面無非就是如何插入數據庫、如何保存token、寫入session等。
有幾點注意事項：
需要注意數據庫中是否已經有改用戶，沒有的添加，有的修改，不要重複添加了；
- QQ暱稱暱稱有各種奇奇怪怪的字符，包括emoji，MySQL默認沒有開啟
utf8mb4，直接插入會報錯，所以需要過濾掉； 需要做好對各種錯誤的兼容；
接口會同時返回QQ頭像和空間頭像，QQ頭像不一定有，空間頭像一定有；
回調地址必須和申請的域名一致，否則會報錯。
QQ互聯有個特大的bug，有時候顯示已登錄但是點擊授權管理一直報錯，此時只需要退出重新登錄即可；
授權之後用戶可能會在過期之前提前取消授權；
- 微信搜索 Web項目聚集地 獲取更多實戰教程。
相關文檔官網已經寫得比較細了，但是比較亂：http://wiki.connect.qq.com/
對接微博登陸
4.1. 實名認證
這個我就不具體講了，登錄 http://open.weibo.com/ 很容易找到相關入口，註冊成為開發者，實名認證，一模一樣的。
4.2. 創建應用
點擊鏈接 http://open.weibo.com/apps/new?sort=web 創建web應用：
創建成果後完善相關信息，主要是下面這些：
我就不一一介紹了，都看得懂。
微博登錄不需要網站一定要備案，但對網站本身有一定要求，不能弄一個空殼網站讓人家去審核，肯定審核不通過的。
有關微博的對接可以參考我好幾年前寫的一篇文章：
http://www.cnblogs.com/liuxianan/archive/2012/11/11/2765123.html
4.3. 引導用戶登錄
微博視覺素材（https://open.weibo.com/wiki/微博標識下載）下載在這裡，頁面合適位置放一個登錄按鈕：
function weiboLogin{let weiboAppId = '432432';let weiboAuthPath = 'http://www.test.com/authweibo';openWindow(`https://api.weibo.com/oauth2/authorize?client_id=${weiboAppId}&response_type=code&redirect_uri=${encodeURIComponent(weiboAuthPath)}`);}
微博登錄有一個好處，第一次登錄需要授權，後面第二次登錄時只會一閃而過自動就登錄成功了，都不需要點一下，用戶體驗非常好，看下圖：
"藍色字體，選擇“標星公眾號”
優質文章，第一時間送達
1. 前言
個人網站最近增加了評論功能，為了方便用戶不用註冊就可以評論，對接了 QQ 和微博這 2 大常用軟件的一鍵登錄，總的來說其實都挺簡單的，可能會有一點小坑，但不算多，完整記錄下來方便後來人快速對接。
2. 後臺設計在真正開始對接之前，我們先來聊一聊後臺的方案設計。既然是對接第三方登錄，那就免不了如何將用戶信息保存。首先需要明確一點的是，用戶在第三方登錄成功之後，我們能拿到的僅僅是一個代表用戶唯一身份的ID以及用來識別身份的accessToken，當然還有暱稱、頭像、性別等有限資料，對接第三方登錄的關鍵就是如何確定用戶是合法登錄，如果確定這次登錄的和上次登錄的是同一個人並且不是假冒的。其實這個並不用我們特別操心，就以微博登錄為例，用戶登錄成功之後會回調一個code 給我們，然後我們再拿code去微博那換取accessToken，如果這個code是用戶亂填的，那這一關肯定過不了，所以，前面的擔心有點多餘。另外一個問題就是如何和現有用戶系統打通，有的網站在用戶已經登錄成功之後還要用戶輸入手機號和驗證碼，或者要用戶重新註冊賬號和密碼來綁定第三方賬戶，感覺這種實現用戶體驗非常差，碰到這種網站我一般都是直接關掉，都已經登錄了還讓用戶註冊，什麼鬼！由於我做的是評論功能，我並不希望評論用戶和現有用戶表打通，所以就不存在這件事了，如果想打通的話，我覺得無非就是登錄成功之後默認往老用戶表插入一條數據，然後和OpenUser表關聯起來，判斷用戶是否登錄時把OpenUser的鑑權也加進去就OK了。
本文的後臺以Java為例。
2.1. 數據庫設計
再來說說數據庫設計，為了系統的擴展性，我有一個專門的OpenUser表用來存放第三方登錄用戶，主要字段如下：這樣設計理論上就可以無限擴展了。
2.2. 鑑權流程
這裡我只是說說我的方案，把accessToken寫入cookie肯定是不安全的，因為accessToken相當於是第三方網站的臨時密碼，被別人竊取了就可以隨意拿來幹壞事了。可以在用戶登錄成功之後我們自己生成一個token，這樣的token即使洩露了頂多就是被人拿來隨意評論，損失不大，但是如果accessToken被洩露了，以微博為例，人家可以利用這個accessToken隨意發微博、刪微博、加關注等等，很危險。當然，如果不想token洩露的話也可以通過綁定IP等方式來限制。鑑權的話就是首先判斷cookie中是否有我們自己的token，然後判斷是否合法，合法再判斷第三方授權是否已過期等等。
QQ登陸
3.1. 實名認證
QQ登錄我們對接的是QQ互聯，地址：https://connect.qq.com ,首先需要註冊成為開發者並實名認證，需要手持身份證照片，具體就不講了。
3.2. 創建應用
進入應用管理頁面(https://connect.qq.com/manage.html#/)創建應用，根據實際需要是創建網站應用還是移動應用，我這裡是網站應用：
第一步：
第二步：
提交完之後會自動提交審核，基本上就是審核你的資料和備案的資料是否一致，所有資料必須和備案資料一模一樣，否則審核不會通過：
當然，這些資料後面還是可以修改的。申請成功之後你會得到appId和appKey。
3.3. 引導用戶登錄
這裡可以下載一些視覺素材，在頁面合適位置放一個QQ登錄按鈕，點擊時引導用戶進入授權頁面：
代碼：
function openWindow(url, width, height){width = width || 600;height = height || 400;var left = (window.screen.width - width) / 2;var top = (window.screen.height - height) / 2;window.open(url, "_blank", "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, left="+left+", top="+top+", width="+width+", height="+height);}function qqLogin{var qqAppId = '424323422'; // 上面申請得到的appidvar qqAuthPath = 'http://www.test.com/auth'; // 前面設置的回調地址var state = 'fjdslfjsdlkfd'; // 防止CSRF攻擊的隨機參數，必傳，登錄成功之後會回傳，最好後臺自己生成然後校驗合法性openWindow(`https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=${qqAppId}&redirect_uri=${encodeURIComponent(qqAuthPath)}&state=${state}`);}
然後會打開一個授權頁面，這個頁面大家應該都熟悉：
然後到了這裡我就碰到一個問題了，官方文檔(https://wiki.connect.qq.com)寫的是登錄成功之後首先會回傳一個code，然後再拿code調接口換取accessToken，然後我試了很多次也換過2個賬號發現每次都是直接返回了accessToken，幫我省了一步了，不知道是什麼情況，鬱悶。微信搜索 Web項目聚集地 獲取更多實戰教程。
3.4. 拿到accessToken
現在假設我們都是直接拿到accessToken（因為我暫時還沒搞明白QQ為啥會直接返回，跟文檔說的不一樣），但是授權回調時accessToken會被放在# 後面，URL地址中的hash值好像不會被傳到後臺（貌似是這樣，如有不正確歡迎評論指正），所以只能寫一個下面這樣的臨時頁面：@RequestMapping("/authqq")public void authQQ(HttpServletRequest request, HttpServletResponse response) throws Exception{// QQ登錄有點特殊，參數放在#後面，後臺無法獲取#後面的參數，只能用JS做中間轉換String html = "<!DOCTYPE html>" +"<html lang=\\"zh-cn\\">" +"<head>" +" <title>QQ登錄重定向頁</title>" +" <meta charset=\\"utf-8\\"/>" +"</head>" +"<body>" +" <script type=\\"text/javascript\\">" +" location.href = location.href.replace('#', '&').replace('auth_qq', 'auth_qq_redirect');" +"</script>" +"</body>" +"</html>";response.getWriter.print(html);}
3.5. 獲取openId
根據accessToken調接口獲取用戶的openId，特別注意這個openId是相對於QQ號+appId唯一的，換句話說同一個QQ號登錄2個不同appId時獲取到的openId是不同的。順便說一句，QQ登錄的相關接口做的還真夠“隨便”的，全部都是最簡單的get請求，所以對接起來非常順利。微信搜索 Web項目聚集地 獲取更多實戰教程。
直接看代碼：
// 根據accessToken換取openId// 錯誤示例：callback( {"error":100016,"error_description":"access token check failed"} );// 正確示例：callback( {"client_id":"10XXXXX49","openid":"CF2XXXXXXXX9F4C"} );String result = HttpsUtil.get("https://graph.qq.com/oauth2.0/me?access_token=" + accessToken);Map<String, Object> resp = parseQQAuthResponse(result); // 這個方法就是把結果轉Map// 歡迎關注 Web項目聚集地 獲取更多實戰教程Integer errorCode = (Integer)resp.get("error");String errorMsg = (String)resp.get("error_description");String openId = (String)resp.get("openid");if(errorCode != ) return new ErrorResult(errorCode, "獲取QQ用戶openId失敗："+errorMsg);
3.6. 獲取用戶頭像暱稱等信息
// 獲取用戶暱稱、頭像等信息，{ret: 0, msg: '', nickname: '', ...} ret不為0表示失敗result = HttpsUtil.get("https://graph.qq.com/user/get_user_info?access_token="+accessToken+"&oauth_consumer_key="+appId+"&openid="+openId);resp = JsonUtil.parseJsonToMap(result);// 歡迎關注 Web項目聚集地 獲取更多實戰教程Integer ret = (Integer)resp.get("ret");String msg = (String)resp.get("msg");if(ret != 0) return new ErrorResult("獲取用戶QQ信息失敗："+msg);// 用戶暱稱可能存在4個字節的utf-8字符，MySQL默認不支持，直接插入會報錯，所以過濾掉String nickname = StringUtil.filterUtf8Mb4((String)resp.get("nickname")).trim; // 這個方法可以自行百度// figureurl_qq_2=QQ的100*100頭像，figureurl_2=QQ 100&100空間頭像，QQ頭像不一定有，空間頭像一定有String avatar = (String)resp.get("figureurl_qq_2");if(StringUtil.isBlank(avatar)) avatar = (String)resp.get("figureurl_2");String gender = (String)resp.get("gender");
3.7. 注意事項
到了這一步基本上涉及第三方的就結束了，是不是很簡單？後面無非就是如何插入數據庫、如何保存token、寫入session等。
有幾點注意事項：
需要注意數據庫中是否已經有改用戶，沒有的添加，有的修改，不要重複添加了；
- QQ暱稱暱稱有各種奇奇怪怪的字符，包括emoji，MySQL默認沒有開啟
utf8mb4，直接插入會報錯，所以需要過濾掉； 需要做好對各種錯誤的兼容；
接口會同時返回QQ頭像和空間頭像，QQ頭像不一定有，空間頭像一定有；
回調地址必須和申請的域名一致，否則會報錯。
QQ互聯有個特大的bug，有時候顯示已登錄但是點擊授權管理一直報錯，此時只需要退出重新登錄即可；
授權之後用戶可能會在過期之前提前取消授權；
- 微信搜索 Web項目聚集地 獲取更多實戰教程。
相關文檔官網已經寫得比較細了，但是比較亂：http://wiki.connect.qq.com/
對接微博登陸
4.1. 實名認證
這個我就不具體講了，登錄 http://open.weibo.com/ 很容易找到相關入口，註冊成為開發者，實名認證，一模一樣的。
4.2. 創建應用
點擊鏈接 http://open.weibo.com/apps/new?sort=web 創建web應用：
創建成果後完善相關信息，主要是下面這些：
我就不一一介紹了，都看得懂。
微博登錄不需要網站一定要備案，但對網站本身有一定要求，不能弄一個空殼網站讓人家去審核，肯定審核不通過的。
有關微博的對接可以參考我好幾年前寫的一篇文章：
http://www.cnblogs.com/liuxianan/archive/2012/11/11/2765123.html
4.3. 引導用戶登錄
微博視覺素材（https://open.weibo.com/wiki/微博標識下載）下載在這裡，頁面合適位置放一個登錄按鈕：
function weiboLogin{let weiboAppId = '432432';let weiboAuthPath = 'http://www.test.com/authweibo';openWindow(`https://api.weibo.com/oauth2/authorize?client_id=${weiboAppId}&response_type=code&redirect_uri=${encodeURIComponent(weiboAuthPath)}`);}
微博登錄有一個好處，第一次登錄需要授權，後面第二次登錄時只會一閃而過自動就登錄成功了，都不需要點一下，用戶體驗非常好，看下圖：
4.4. 獲取accessToken
登錄成功會返回一個code，根據code換取accessToken：
String params = "client_id=" + appId+ "&client_secret=" + appSecret+ "&grant_type=authorization_code"+ "&redirect_uri=" + URLUtil.encode(authPath)+ "&code=" + code;// 用code換取accessTokenString result = HttpsUtil.post("https://api.weibo.com/oauth2/access_token", params);Map<String, Object> resp = JsonUtil.toObject(result, new TypeReference<Map<String, Object>>{});Integer errorCode = (Integer)resp.get("error_code");String error = (String)resp.get("error");String errorMsg = (String)resp.get("error_description");if(errorCode != && errorCode != 0) return new ErrorResult(errorCode, error + (errorMsg==?"":errorMsg));String accessToken = (String)resp.get("access_token");String uid = (String)resp.get("uid"); // 這個uid就是微博用戶的唯一用戶ID，可以通過這個id直接訪問到用戶微博主頁int expires = (Integer)resp.get("expires_in"); // 有效期，單位秒
4.5. 獲取用戶頭像等信息
// 用uid和accessToken換取用戶信息String result = HttpsUtil.get("https://api.weibo.com/2/users/show.json?access_token="+accessToken+"&uid="+uid);Map<String, Object> resp = JsonUtil.toObject(result, new TypeReference<Map<String, Object>>{});errorCode = (Integer)resp.get("error_code");error = (String)resp.get("error");errorMsg = (String)resp.get("error_description");if(errorCode != && errorCode != 0) return new ErrorResult(errorCode, error + (errorMsg==?"":errorMsg));String nickname = (String)resp.get("screen_name");// 微博180*180高清頭像String avatar = (String)resp.get("avatar_large");String gender = (String)resp.get("gender");gender = "m".equals(gender) ? "男" : ("f".equals(gender) ? "女" : "");
至此涉及第三方的東西都完了，剩下的就是用戶自己保存到數據庫、寫入token
保存 session 以及鑑權接口開發了。
4.6. 注意事項
微博接口都有頻率限制，不過一般不會超過；
需做好錯誤兼容；
微博直接返回的uid，可以根據這個uid直達用戶微博主頁 https://weibo.com/u/xxxxx ，所以可以把用戶頭像鏈接到這裡；
其實也有現成的js-sdk，可以根據自己實際需要選擇是否使用；
微博的接口是https，並且是post，需要注意；
微博開放平臺：open.weibo.com/
微博登錄授權機制：open.weibo.com/wiki/授權機制
QQ互聯：connect.qq.com/
QQ授權管理頁面：connect.qq.com/manage.html#/appauth/user
作者：我是小茗同學
排版：Web項目聚集地（web_resource）
鏈接：www.cnblogs.com/liuxianan.html
如果喜歡本篇文章，歡迎。關注訂閱號「Web項目聚集地」，回覆「進群」即可進入無廣告技術交流。
"