沒錯,用三方 Github 做授權(quán)登錄就是這么簡單!(OAuth2.0實戰(zhàn))
點擊“?程序員內(nèi)點事?”關(guān)注，選擇“?設(shè)置星標(biāo)?”
堅持學(xué)習(xí)，好文每日送達(dá)！
上一篇《OAuth2.0 的四種授權(quán)方式》文末說過，后續(xù)要來一波OAuth2.0實戰(zhàn)，耽誤了幾天今兒終于補上了。
最近在做自己的開源項目（fire），Springboot + vue 的前后端分離框架才搭建完，剛開始做登錄功能，做著做著覺得普通賬戶密碼登錄太簡單了沒啥意思，思來想去為顯得逼格高一點，決定再加上 GitHub授權(quán) 和 人臉識別等多種登錄方式。
在這里插入圖片描述而GitHub授權(quán)登錄正好用到了OAuth2.0中最復(fù)雜的授權(quán)碼模式，正好拿我這個案例給大家分享一下OAuth2.0的授權(quán)過程，我把項目已經(jīng)部署到云服務(wù)，文末有預(yù)覽地址，小伙伴們可以體驗一下，后續(xù)項目功能會持續(xù)更新。
一、授權(quán)流程
在具體做GitHub授權(quán)登錄之前，咱們再簡單回顧一下OAuth2.0授權(quán)碼模式的授權(quán)流程，如果 fire 網(wǎng)站允許 用GitHub 賬號登錄，流程大致如下圖。
在這里插入圖片描述用戶想用GitHub 賬號去登錄 fire 網(wǎng)站：
fire網(wǎng)站先讓用戶跳轉(zhuǎn)到GitHub進行授權(quán)，會彈出一個授權(quán)框。- 用戶同意后，
GitHub會根據(jù)redirect_uri重定向回fire網(wǎng)站，同時返回一個授權(quán)碼code。 fire網(wǎng)站使用授權(quán)碼和客戶端密匙client_secret，向 GitHub 請求令牌token，檢驗通過返回令牌。- 最后
fire網(wǎng)站向GitHub請求數(shù)據(jù)，每次調(diào)用 GitHub 的API都要帶上令牌。
二、身份注冊
梳理完授權(quán)邏輯，接下來我們還有一些準(zhǔn)備工作。
要想得到一個網(wǎng)站的OAuth授權(quán)，必須要到它的網(wǎng)站進行身份注冊，拿到應(yīng)用的身份識別碼 ClientID 和 ClientSecret。
注冊 傳送門 https://github.com/settings/applications/1334665，有幾個必填項。
Application name：我們的應(yīng)用名；Homepage URL：應(yīng)用主頁鏈接；Authorization callback URL：這個是github回調(diào)我們項目的地址，用來獲取授權(quán)碼和令牌。
提交后會看到就可以看到客戶端ClientID 和客戶端密匙ClientSecret，到這我們的準(zhǔn)備工作就完事了。
在這里插入圖片描述三、授權(quán)開發(fā)
1、獲取授權(quán)碼
為了更好的看效果，獲取授權(quán)碼我處理的比較粗暴，直接在JS里拼裝好了授權(quán)鏈接，但實際工作開發(fā)中一定要考慮到安全問題。
https://github.com/login/oauth/authorize?
client_id=ad41c05c211421c659db&
redirect_uri=http://47.93.6.5:8080/authorize/redirect
前端 vue 的邏輯也非常簡單，只需要 window.location.href 重定向一下。
<kbd id="afajh"><form id="afajh"></form></kbd> <strong id="afajh"><dl id="afajh"></dl></strong>
<del id="afajh"><form id="afajh"></form></del>
<th id="afajh"><progress id="afajh"></progress></th>
<b id="afajh"><abbr id="afajh"></abbr></b>
<th id="afajh"><progress id="afajh"></progress></th>