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

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

  1. 我使用GitHub的频率远高于使用微博,对娱乐八卦社会新闻不感兴趣;
  2. 自己博客网站里的内容编程一类居多,GitHub天生具有这一属性;
  3. 因为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包括:

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

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

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

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

  1. 用户每访问一篇文章都会后端记录或更新最近访问的文章的标志,作为重定向的地址;
  2. 根据referer请求头作为重定向地址,会判断referer地址的域名是不是来自本站。

本篇完。更新或补充说明的内容我可以以留言的形式发布。留言区的布局样式风格和其他网站的留言很类似,日后我会陆续给留言区增加必要的扩展功能。

授权账号 » 
原创声明 » 未经授权,请勿复制转载,谢谢配合
联系方式 » 
微信:huazi19930927
邮箱:lanserdi@163.com
发布日期 » 2019年7月27日 周六
Github账号登录以留言