Electron 实现第三方登录

上两篇文章说了,如何在Web端实现Google/Facebook的第三方登录。

这就简单说下 Electron 实现第三方登录。

其实,整个流程中与Web版本最大区别就是,如何获取回调的参数。


Electron 监听回调URL

//注册监听事件
OAuth.webContents.on('did-navigate', (event, url) => {
    let raw_code = /access_token=([^&]*)/.exec(url) || null;
    let access_token = (raw_code && raw_code.length > 1) ? raw_code[1] : null;
    let raw_state = /state=([^&]*)/.exec(url) || null;
    let state = (raw_state && raw_state.length > 1) ? raw_state[1] : null;
    let raw_time = /data_access_expiration_time=([^&]*)/.exec(url) || null;
    let expiration_time = (raw_time && raw_time.length > 1) ? raw_time[1] : null;
    // let error = /\?error=(.+)$/.exec(url);

    //获取到三个参数,即视为登录成功
    //PS:其实还应该验证回调域名是否匹配
    if (access_token && state && expiration_time) {
        //向登录窗体发消息,通知器第三方登录成功,继续走原来的流程
        AuthUI.webContents.send('oauth.success', {
            access_token: access_token,
            state: state,
            expiration_time: expiration_time,
            type: 'facebook'
        });
        //登录成功后销毁窗体
        OAuth.destroy();
    }
});

Electron 注册全局过滤器

Waxy主题:自定义Canvas背景

本篇文章为Waxy主题设置中自定义CSS/JS的高级应用。

什么是Canvas?

Canvas 是 HTML5 中一个新特性,开发者绘制一系列图形。通过和JavaScript配合,可以使静态的图形动起来~

当然更加具体的内容,还请您自己学习,这里不做展开~

后面飞扬的花瓣就是基于Canvas技术实现的后面飞扬的花瓣就是基于Canvas技术实现的

如何自定义Canvas背景?

目前Waxy主题支持3种方式自定义Canvas背景,在文章后面,我提供了几个整理好的背景。

Hexo 主题简单实现搜索功能

最近一直在折腾Hxeo的站点,发现自带的主题吗,没有搜索功能。决定自己改一个。

感谢 @bay1 大佬的文章,原文链接:https://segmentfault.com/a/1190000011917419

下面就是在hexo主题添加本地搜索功能的过程。

生成搜索索引文件

hexo-generator-searchdb插件可以生成一个xml格式的索引文件。之后再利用jQuery的ajax函数查询并处理生成的索引文件。

获取 hexo-generator-searchdb 插件

npm install hexo-generator-searchdb --save

修改 hexo 全局配置文件

在 hexo 全局配置文件_config.yml最后添加下面的配置。

实现hitokoto打字效果

使用hitokoto和typed.js,实现hitokoto的打字效果。传送门

代码如下

<div class="hitokoto">
    <span class="typed" id="hitokoto"></span>
</div>




<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/typed.js/2.0.11/typed.min.js"></script>
<script>
$(function () {
  $.get("https://v1.hitokoto.cn/", function (data) {
    var data = data;
    var str =  data.hitokoto + "&#12288;By "

    var options = {
      strings: [
        //str + "退格效果^1000",
        str + data.from,
      ],
      typeSpeed: 80,
      startDelay:300,
      // loop: true,
    }
    var typed = new Typed(".hitokoto .typed", options);
  })
});</script>