自制评论插件
一开始本来想用disqus的,但是它被墙了,所以退而求其次选择gitment,但是它每次写完文章都需要初始化评论,而且它需要的权限比较高,而且需要评论在issue中,在github首页默认展示评论的issue,看起来好不爽- -所以我想着做一个小轮子,把闲置的云服务器利用起来,然后就有了Lisper。
插件初始化
插件初始化流程:
- 在每个文章底部添加脚本。
- 脚本会创建iframe,请求评论页面。
- 在评论页面中,请求当前页面的评论并渲染。
在hexo中加入下面的脚本,这个javascript代码主要是保存page(当前页面)、id(用户id)、el(评论插件挂载的dom元素)配置信息。然后在后面的立即执行函数中通过script标签请求https://comment.dowob.cn/js/comment.js
这个文件。
1 | #comments |
在comment.js
中会创建一个iframe,在这个iframe中加载评论页面,同时使用iframe.contentWindow.postMessage
跨域通信,将配置发送过去。因为iframe的内容加载后不会改变iframe窗口的高度,所以主体这边监听iframe发来的高度消息,将主体中iframe的高度进行修改。
github登陆
github登陆,需要在github中创建一个oauth app,这时github会分配client_id、client_secret_id。
当用户点击登陆键后,依次进行下面步骤:
- 请求
/oauth
,服务端会判断用户是否已经登陆,如果没有登陆,重定向到https://github.com/login/oauth/authorize?response_type=code&client_id=${Config.client_id}&redirect_uri=${redirectURI}
- 这时候github会判断用户是否已经登陆了github,如果没有,会让用户登陆;如果已经登陆会通知用户是否授权github oauth app获取用户信息,默认是public信息。授权成功后,跳转到redirectURI。
- github会重定向到redirectURI,同时带上请求参数code,服务端根据这个code和client_id、client_secret_id来访问
https://github.com/login/oauth/access_token?client_id=${Config.client_id}&client_secret=${Config.client_secret_id}&code=${code}
- 最后github会返回access_token,之后的访问带上这个access_token就能获取用户信息啦。
这个github登陆卡了我好多天,因为我想实现的效果是用户点击登陆后弹出一个窗口,然后登陆完成后窗口自动关闭,同时原窗口加载用户信息,后面查到方法如下:
- 用户的登陆使用
let win = window.open('/oauth')
来打开新窗口。 - 在脚本初始化后,对window监听message事件,如果这个事件是登陆完成(
done
)那么加载用户信息。 - 当用户在新窗口完成登陆后,github重定向
/oauth/login?code=3213sad
,服务器处理完这个请求后,返回一个blank.ejs
- 在
blank.ejs
中通过window.opener.postMessage发送请求完成done
的信息,评论页面的message
事件处理函数便会执行,然后blank.ejs
自己关闭。
之所以这么麻烦主要还是因为跨域。
参考
nginx支持https [https://liluyang.me/2019/04/03/20190403_HTTPS%20%E9%85%8D%E7%BD%AE%E6%95%99%E7%A8%8B/](https://liluyang.me/2019/04/03/20190403_HTTPS 配置教程/)
nodejs mysql 语句生成器http://knexjs.org/
iframe resize https://github.com/davidjbradshaw/iframe-resizer
- 本文链接:https://dowob.cn/2019/08/10/%E8%87%AA%E5%88%B6%E8%AF%84%E8%AE%BA%E6%8F%92%E4%BB%B6/
- 版权声明:本站所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 CN 许可协议。转载请注明出处!