阅读 121

利用github授权OAuth,实现博客系统评论功能的思路

写文章的背景

博客系统是大家赖以总结和学习的常用手段,我自己也花时间写了一个博客系统,打算长期维护,常见的博客系统都会展示访问者的评论列表以及评论的入口,最开始并没有打算做网站的评论,是因为不知道怎么下手,感觉比较复杂,有一次和朋友聊天的时候,他问为什么不加一个评论互动的功能,我说我不会啊! 哈哈 最近在看文章的时候总结了一点思路,分享给大家。这篇文章后续会有更新。

角色分类

  • W: (访问者访问的网站)
    • 网站前台
    • 网站后台
  • G:(github)

第三方授权的原理 以github为例

原理总结

在访问者想要在W网站进行评论的时候,会请求GG检验是否登陆,若登陆则请求授权, 若确定授权返回W 授权码code,重定向到W,此时还要经过两步认证,先要根据授权code码获取access_token,然后根据access_token获取访问者github信息中间过程会访问几个不同的接口,在下文会具体的描述给大家。

实施步骤

1. 访问者若需要实现评论功能,需要先进行github OAuth,因为github需要知道关联应用的一些信息,如下图需要填写,并通过这些填充信息得到client_idclient_secret

各代表项如下

  1. Application name: 应用名称
  2. Homepage Url: 应用主页
  3. Application description: 描述
  4. Authorization callback URL: 授权过后重定向地址
  5. 得到的结果:

个人的理解是生成这两个东西仅仅是为了辨别要关联的应用,最多再知道生成这个client信息的github账号是什么,当然这一步咱们看不见,最初竟然还在想,那么岂不是需要每个人先在自己github把应用输入一下,然后在进行下一步,后来才明白过来用处是什 么,仅仅是在github填写了一些关于A网站的信息,两者并没有真正的关联

2. 对外api

github也提供了一些对外的接口,用以和github建立通信,针对于授权这一章,github也提供了部分接口 原文地址

3. 触发关联动作

上面这个就是常见的评论系统触发器,在想要评论的时候,需要检测当前是不是已经拿到访问者的github_user信息,如果没有拿到那么则不允许访问者评论,若拿到则可以允许当前访问者访问。

是否可以评论的思路是这样,那么其中的关键是如何判断是否拿到了访问者的github_user信息,这时候就需要真正的关联github,如何真正的关联,自然是由当前应用与github建立通信啊

以访问者未拿到github_user为例

此时不允许评论,暴露出连接github的链接,当触发这个超链接时 需要拿到授权码。

 window.location.href = 'https://github.com/login/oauth/authorize?client_id=6625cb27769b1bc52415&redirect_uri=http://localhost:3000/login&scope=user:email';
 这时一开始OAuth的client_id就用得着了
复制代码

确认授权后 会自动重定向到之前设置对的重定向路径中

 http://xxxx/login?code=aa043845e6b80253919f
复制代码

这个url中code就是github自动拼接到我们的路径后面的授权码,我们可以通过截取地址栏参数或者获取路由参数的方式拿到这个code值然后进行下一步。

获取access_token

上面已经拿到了授权码code 此时可以根据授权码code拿到access_token

贴上代码

const tokenResponse = await axios({
  method: 'post',
  url: 'https://github.com/login/oauth/access_token?' +
    `client_id=${clientID}&` +
    `client_secret=${clientSecret}&` +
    `code=${requestToken}`,
  headers: {
    accept: 'application/json'
  }
});
复制代码

上面的三个参数我们之前都拿到过 不再阐述了。

到这一步我们才算有了可以拿到访问者github_user信息的令牌 也就是access_token

获取github_user

access_token作为参数去拿user信息

贴上代码

const result = await axios({
  method: 'get',
  url: `https://api.github.com/user`,
  headers: {
    accept: 'application/json',
    Authorization: `token ${accessToken}`
  }
});
复制代码

如果user信息可以拿到 那么证明此时当前站点已经与github关联成功 可以拿到访问者的github的一些信息 包括头像 名称,以及个人网站等,利用这些信息就可以发表评论,将评论内容插入数据库,并进行评论列表渲染等一系列操作。

总结

以上就是我个人理解的实现github授权, 进行评论的重要几步,以及整个思路,并不是很复杂,但是关系较为紧密。如果大家的博客还没有进行评论系统的开发,不妨参考一下这个思路,如果文章有什么总结的不好的,欢迎大家评论我会及时改进。

附上git地址 会抽空将具体的代码上传

关注下面的标签,发现更多相似文章
评论