vue實(shí)現(xiàn)GitHub的第三方授權(quán)方法示例

更新時(shí)間：2021年11月03日 08:48:13 作者：xuerzong

本文主要介紹了vue實(shí)現(xiàn)GitHub的第三方授權(quán)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

創(chuàng)建OAuth Apps

首先，你需要一個(gè)GitHub賬戶然后前往GitHub developers，根據(jù)要求填寫(xiě)完成之后，會(huì)自動(dòng)生成Client_ID和Client Secret，在之后的步驟中會(huì)用到。

獲取code

//method
async githubLogin() {
 windows.location.href = 
    "https://github.com/login/oauth/authorize?client_id = your_client_id&redirect_uri=your_redirect_uri"
}

<a href="https://github.com/login/oauth/authorize?client_id = your_client_id&redirect_uri=your_redirect_uri">GitHub登陸</a>

路由參數(shù)中redirect_uri是可選的。如果省略，則GitHub將重定向到你在OAuth apps配置的回調(diào)路徑。如果提供，則你所填寫(xiě)的redirect_uri必須是你在OAuth apps中配置的回調(diào)路徑的子路徑。如下：

CALLBACK: http://xx.com/github
GOOD: http://xx.com/github
GOOD: http://xx.com/github/path/path
BAD: http://xx.com/git
BAD: http://xxxxx.com/path

如果用戶接受你的請(qǐng)求，將會(huì)跳轉(zhuǎn)到redirect_uri，我們可以接受路由中的參數(shù)code，以進(jìn)行下一步操作。

your_redirect_uri?code=xxx

獲取access_token

我們需要client_id、client_secret和code來(lái)獲取access_token。

/*
/githubAccessToken:https://github.com/login/oauth/access_token
*/
this.$axios
 .get('/githubAccessToken',{
 params: {
  client_id: your_client_id,
  client_secret: your_client_secret,
  code: your_code
  }
 })

默認(rèn)情況下，你會(huì)獲取如下響應(yīng)：

access_token=xxxxx&token_type=bearer

如果你想用更方便的格式接收響應(yīng)，你可以在headers中自定義Accept：

Accept: "application/json"
=> {"access_token":xxxxx,"token_type":bearer}

獲取用戶信息

獲取access_token之后，我們就可以請(qǐng)求用戶的部分信息了：

/*
/githubUserInfo:https://api.github.com/user
*/
this.$axios
 .get('/githubUserInfo', {
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
    Accept: "application/json",
    Authorization: `token ${access_token}` //必填
  }
})

然后你便可以獲取到用戶信息了。

到此這篇關(guān)于vue實(shí)現(xiàn)GitHub的第三方授權(quán)的文章就介紹到這了,更多相關(guān)vue實(shí)現(xiàn)GitHub的第三方授權(quán)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue2老項(xiàng)目配置ESLint和Prettier完整步驟
ESLint是一個(gè)靜態(tài)代碼分析工具,用于檢查JavaScript代碼的語(yǔ)法結(jié)構(gòu)和查找程序錯(cuò)誤,Prettier是一個(gè)代碼格式化工具,這篇文章主要給大家介紹了關(guān)于Vue2老項(xiàng)目配置ESLint和Prettier的完整步驟,需要的朋友可以參考下
2024-08-08
vue關(guān)于點(diǎn)擊詳情頁(yè)面keep-alive的緩存問(wèn)題
這篇文章主要介紹了vue關(guān)于點(diǎn)擊詳情頁(yè)面keep-alive的緩存問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue實(shí)現(xiàn)實(shí)時(shí)上傳文件進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)實(shí)時(shí)上傳文件進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
使用vNode實(shí)現(xiàn)給列表字段打標(biāo)簽
這篇文章主要為大家介紹了使用vNode實(shí)現(xiàn)給列表字段打標(biāo)簽示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
詳解Vite如何處理CSS預(yù)處理器
在現(xiàn)代前端開(kāi)發(fā)中,CSS 預(yù)處理器如 Sass、Less 和 Stylus 等工具,為樣式編寫(xiě)提供了更強(qiáng)大的功能和更好的開(kāi)發(fā)體驗(yàn),本文將探討 Vite 是如何處理 CSS 預(yù)處理器的,以及如何在實(shí)際項(xiàng)目中配置和使用它們,需要的朋友可以參考下
2025-02-02
淺談Vue使用Cascader級(jí)聯(lián)選擇器數(shù)據(jù)回顯中的坑
這篇文章主要介紹了淺談Vue使用Cascader級(jí)聯(lián)選擇器數(shù)據(jù)回顯中的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-10-10
vue3前端導(dǎo)出excel表格的兩種實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue3前端導(dǎo)出excel表格的兩種實(shí)現(xiàn)方法,文中通過(guò)代碼以及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2024-11-11
vue3中組件傳值的多種方法總結(jié)
學(xué)習(xí)過(guò)vue2的寶子們肯定知道,組件傳值是vue項(xiàng)目開(kāi)發(fā)過(guò)程中必不可少的功能場(chǎng)景,下面這篇文章主要給大家介紹了關(guān)于vue3中組件傳值的多種方法,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-01-01
Vue中實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)效果示例代碼
這篇文章主要介紹了Vue中實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)效果示例代碼,Vue中為我們提供一些內(nèi)置組件和對(duì)應(yīng)的API來(lái)完成動(dòng)畫(huà)，利用它們我們可以方便的實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)效果，需要的朋友可以參考下
2022-08-08
Vue3中使用富文本編輯器的方法詳解
這篇文章主要為大家詳細(xì)介紹了如何在Vue3中使用富文本編輯器,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以參考一下
2024-01-01