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的第三方授权内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
ESLint是一个静态代码分析工具,用于检查JavaScript代码的语法结构和查找程序错误,Prettier是一个代码格式化工具,这篇文章主要给大家介绍了关于Vue2老项目配置ESLint和Prettier的完整步骤,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了vue关于点击详情页面keep-alive的缓存问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要为大家详细介绍了vue实现实时上传文件进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家介绍了使用vNode实现给列表字段打标签示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
在现代前端开发中,CSS 预处理器如 Sass、Less 和 Stylus 等工具,为样式编写提供了更强大的功能和更好的开发体验,本文将探讨 Vite 是如何处理 CSS 预处理器的,以及如何在实际项目中配置和使用它们,需要的朋友可以参考下2025-02-02
这篇文章主要介绍了浅谈Vue使用Cascader级联选择器数据回显中的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要给大家介绍了关于vue3前端导出excel表格的两种实现方法,文中通过代码以及图文介绍的非常详细,对大家学习或者使用vue3具有一定的参考借鉴价值,需要的朋友可以参考下2024-11-11
学习过vue2的宝子们肯定知道,组件传值是vue项目开发过程中必不可少的功能场景,下面这篇文章主要给大家介绍了关于vue3中组件传值的多种方法,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了Vue中实现过渡动画效果示例代码,Vue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果，需要的朋友可以参考下2022-08-08
这篇文章主要为大家详细介绍了如何在Vue3中使用富文本编辑器,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以参考一下2024-01-01
最新评论