个人博客接入 github 登陆功能详细过程

最新推荐文章于 2024-02-20 20:59:38 发布

weixin_33897722

最新推荐文章于 2024-02-20 20:59:38 发布

阅读量1k

点赞数

文章标签：前端后端数据库 ViewUI

原文链接：https://juejin.im/post/5cbc3c436fb9a0689a17650c

版权

辞职后花了几天时间总算把博客的登陆以及评论功能完成了，先看看效果

整个流程下来真的比想象中简单多了，所以想做一件事件还是不要干想，做就完了！

其他都看着填就好，重要的是最后一条Authorization callback URL

Authorization callback URL是在获取到用户的授权信息后 github 会将页面重新定向至这个 url，所以需要前端路由做好接收

这里是官网文档地址，可以直接看文档，当然，不想看文档可以接着往下看。

用户点击登陆按钮后会经历下面四个步骤才能获取到用户信息，涉及的 API 在括号里

1、用户被重定向以请求他们的 GitHub 身份授权（github.com/login/oauth…'）

此处的 client_id 是第一步获取到的 OAuth Apps 里提供的；
scope 内容表示需要附加获取的用户信息，这里表示需要额外获取邮箱；
2、用户被GitHub重定向回你的网站（blog.yuanaaa.top/github_logi…

注意：此处的链接为第一步设置的 Authorization callback URL 这里展示的是我自己设置，需要配套修改；
后面的 code=49e65fea9348faeb9ec0 是 github 附带返回的访问令牌，访问令牌每一次都不一样且只能使用一次；
3、使用用户的访问令牌获取 access_token （github.com/login/oauth…

这个接口是固定的，后面带有三个参数；
client_id、client_secret 见申请到的 OAuth Apps；
code 见上一步；
返回 access_token 文本，大概如下 ‘access_token=53909e2de4b8c1d4eede05f235c903e067c37ccd&scope=user%3Aemail&token_type=bearer’
4、使用 access_token 访问 API 获取用户信息（api.github.com/user?access…

为了演示方便我改了接口，直接在浏览器进行访问，结果如下图

至此我们就成功拿到了用户信息啦，可以将信息保存到本地数据库建立用户信息或者直接返回到页面。

2.1 中的第 3 、4 步建议在后端进行操作，前端只需在 Authorization callback URL 做好路由接收，并在接收页面将 code 值发送至后端，后端收到 code 值进行 3 、4 部后直接返回用户数据至前端就好

建议在登陆操作时将当前页面存放至 localStorage，Authorization callback URL 页面获取到用户信息后，再将路由跳转至用户登陆前的页面；

2.1 中的第 4 步在后端处理的时候需要设置 ‘User-Agent’ 的请求头

request({
  url: tokenUrl,
  headers: {
  'User-Agent': 'http://developer.github.com/v3/#user-agent-required'
 }
}
复制代码

总体来说还是很简单的，有了用户登陆之后接下来就可以愉快的添加评论功能了，仿造掘金做了博客的登陆样式，这里看效果。

关注