快捷導(dǎo)航

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

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

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

創(chuàng)建OAuth Apps

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

獲取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)路徑。如果提供，則你所填寫的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

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

your_redirect_uri?code=xxx

獲取access_token

我們需要client_id、client_secret和code來獲取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)情況下，你會獲取如下響應(yīng)：

access_token=xxxxx&token_type=bearer

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

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

獲取用戶信息

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

/*
/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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

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