Github账号授权登录开发博客留言功能

最新推荐文章于 2022-07-04 09:00:29 发布

帅华君

最新推荐文章于 2022-07-04 09:00:29 发布

阅读量778

点赞数

分类专栏： web前端文章标签： github oauth

本文链接：https://blog.csdn.net/u010089686/article/details/97528026

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

以前用过weibo的开放平台授权登录，自从换了要重新申请，心想何不趁次换GitHub授权方式开发博客网站的评论功能。基于以下原因，我最终选择GitHub授权方式：

我使用GitHub的频率远高于使用微博，对娱乐八卦社会新闻不感兴趣；
自己博客网站里的内容编程一类居多，GitHub天生具有这一属性；
因为GitHub是开发者的聚集地，使用GitHub账号留言的用户，方便进一步互相学习。

以前看到有的博客主将用户的留言存储在GitHub平台内。我没有研究如何将用户的留言内容以何种形式存储到GitHub平台上，而是将留言内容存储在自己博客网站的数据库中。我是考虑到即便以后不再使用GitHub授权，也不会因为在GitHub中还有一大堆用户留言但无法转移而苦恼（抽空再研究下如何通过调API实现操作自己的Github账号）。

前期准备

我的博客网站使用的是阿里云服务器。后端使用NodeJS+Express搭建的web服务。数据存储使用MySQL数据库。

后端数据（包括代码和网站资源）托管在gitee.com平台，前端代码托管在github.com平台，且两个仓库在平台上都是私有状态。Github仓库托管服务在大多数情况下是还是很稳定的，个别时期偶尔会出现过网站打不开，git push要等待许久的情况。Gitee，也就是码云，没有出现过网络连接的问题，但我曾经遇到过几次向码云提交失败的经历，终端显示remote服务出错，我记得提示信息是说码云代码托管服务器ruby下某个子目录命令版本老旧或是找不到。

gitee就像后端，虽然笨重保守，偶尔错误百出，稳扎稳打更重要；github就像前端，也许会姗姗来迟，但绝不会缺席，求变创新加体验更重要。

编辑器独爱Sublime Text，虽然总弹窗提示我但前版本为试用版。以前用过Github的Atom和微软的VS Code，前者幼稚花哨后者肿胖累赘。

最后肯定要有GitHub账号一枚。

创建应用

在GitHub中创建应用。首先进入设置页面，在设置页面左侧边栏最下边找到并点击开发者设置一项，新页面点击OAuth Apps选项卡，然后点击创建新的OAuth App按钮。填写表单保存即可。填写完表单就能获取到一个Client ID和一个Client Secret。

表单中有一个Authorization callback URL，这个地方应该填写当你引导用户在GitHub提供的登录/注册/授权页面完成授权后立即跳转的URL地址。

授权流程

我在每一篇文章结尾处下方放置了一个留言入口。如果是第一次授权我的博客访问你的GitHub上公开的信息，那么点击该入口就会在当前标签页跳转到GitHub的网站提供的页面。

如果你最近登录了GitHub，点击Authorize lanserdi按钮授权成功，立即跳转到上方在应用设置页面指定的Authorization callback URL地址，你可以在后端的这个路由获取用户公开的信息，比如用户在GitHub使用的昵称和头像。然后立即重定向到用户最一开始访问的文章页面（这一过程用户甚至察觉不到）。

如果你最近没登录GitHub，则回先跳转到GitHub登录界面，登录成功后再授权。

对于如果是已经授权过的用户，不会跳转到授权页面，但是如果最近没登录过GitHub则会先跳转到登录页面，随后GitHub会立即重定向到Authorization callback URL回调地址。

解除授权

安全退出机制在任何时候都是有必要的。用户和开发者可以按照图中所示步骤解除授权：

用户按照1->2->5步骤，不再授权我的博客访问你的公开信息。

开发者按照1->3->4步骤，解除全部用户与我的应用的关联关系。

GitHub API使用与代码片段

主要用到了GitHub提供的针对网页应用授权的API，点这里查看详细API使用参考。

我目前用到API包括：

引导用户完成授权的页面；
授权成功后获取用户基本信息的接口。

其中，第一个接口的使用方法。对于登录的用户，我在全部文章末尾下方放置一个超链接，用来引导用户自行完成授权。

第二个接口在后端完成调用。由于发起的https请求，所以我用到了NodeJS的https内建模块的https.request()方法。GitHub API要求使用POST方法请求数据，只需配置相关选项即可。点这里详细看https.request方法。GitHub和NodeJS官网对API的使用方法已经详尽，这里不再赘述。

当用户完成授权后，如何返回授权前访问的文章。我使用了两种方法一起判断：