vue实现GitHub的第三方授权方法示例

178 阅读 0 评论 118 点赞

我是靠谱客的博主强健薯片，这篇文章主要介绍vue实现GitHub的第三方授权方法示例，现在分享给大家，希望可以做个参考。

创建OAuth Apps

首先，你需要一个GitHub账户然后前往GitHub developers，根据要求填写完成之后，会自动生成Client_ID和Client Secret，在之后的步骤中会用到。

获取code

复制代码

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

复制代码

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

路由参数中redirect_uri是可选的。如果省略，则GitHub将重定向到你在OAuth apps配置的回调路径。如果提供，则你所填写的redirect_uri必须是你在OAuth apps中配置的回调路径的子路径。如下：

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

如果用户接受你的请求，将会跳转到redirect_uri，我们可以接受路由中的参数code，以进行下一步操作。

复制代码

1
your_redirect_uri?code=xxx

获取access_token

我们需要client_id、client_secret和code来获取access_token。

复制代码

1
2
3
4
5
6
7
8
9
10
11
/*
/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
  }
 })

默认情况下，你会获取如下响应：

复制代码

1
access_token=xxxxx&token_type=bearer

如果你想用更方便的格式接收响应，你可以在headers中自定义Accept：

复制代码

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

获取用户信息

获取access_token之后，我们就可以请求用户的部分信息了：

复制代码

1
2
3
4
5
6
7
8
9
10
11
/*
/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}` //必填
  }
})

然后你便可以获取到用户信息了。

到此这篇关于vue实现GitHub的第三方授权的文章就介绍到这了,更多相关vue实现GitHub的第三方授权内容请搜索靠谱客以前的文章或继续浏览下面的相关文章希望大家以后多多支持靠谱客！