vue实现GitHub的第三方授权方法示例
最近在完善我的博客系统，突然想到从原本临时填写 name + email 进行评论改成使用GitHub授权登陆以发表评论。
废话不多说，直接奔入主题
温馨提示：本文章只满足个人使用需求，如果需要学习更详细的使用方法，可访问 OAuth官方文档。
创建OAuth Apps
首先，你需要一个GitHub账户然后前往GitHub developers，根据要求填写完成之后，会自动生成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>
路由参数中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，以进行下一步操作。
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
}
})
默认情况下，你会获取如下响应：
access_token=xxxxx&token_type=bearer
如果你想用更方便的格式接收响应，你可以在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}` //必填
}
})
然后你便可以获取到用户信息了。
到此这篇关于vue实现GitHub的第三方授权的文章就介绍到这了,更多相关vue实现GitHub的第三方授权内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue 本身以及周边生态在设计语法糖上几乎没让我失望过,包括本次亮相的 Vue Vine,它的出现引起了我对 Vue3 组件编写方式的好奇,以及哪一种方式更接近「最佳实践」？下面让我来为大家一一道来2024-07-07
在使用 Vue 开发前端的时候遇到一个场景在首页进行一些数据搜索，点击搜索结果进入详情页面，浏览详情页后返回主页，所以需要在返回后恢复跳转前的页面参数状态，今天通过本文给大家分享Vue 路由页面状态返回的操作方法，一起看看吧2021-07-07
Vue3.0相比较于之前的版本更快、更小、更易于维护、更贴近原生、对开发者更友好，本文就Vue3.0进行详细介绍，需要了解的小伙伴可以参考一下这篇文章2021-09-09
表单校验是注册环节中必不可少的操作,表单校验可以提醒用户填写数据规则以确保用户提交数据的效性,也可以防止用户因误操作而占用服务器资源,这篇文章主要给大家介绍了关于Vue系列之Element UI表单自定义校验规则的相关资料,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了在vue中使用jsx语法的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要为大家详细介绍了vue视频时间进度条组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
本文主要介绍了vue使用GraphVis开发无限拓展的关系图谱，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要为大家详细介绍了用vue实现注册页，短信验证码登录，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
今天小编就为大家分享一篇vue设置动态请求地址的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要为大家详细介绍了Vue.js组件通信之自定义事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
最新评论