快捷導航

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

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

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

創(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，以進行下一步操作。

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
  }
 })

默認情況下，你會獲取如下響應(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實現(xiàn)GitHub的第三方授權(quán)的文章就介紹到這了,更多相關(guān)vue實現(xiàn)GitHub的第三方授權(quán)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: