Electron 实现第三方登录

warning: 这篇文章距离上次修改已过203天,其中的内容可能已经有所变动。

上两篇文章说了,如何在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 注册全局过滤器

//全局过滤器方案
let options = {
    scopes: 'email',
    redirect_uri: 'https://www.facebook.com/connect/login_success.html'
};

let filter = {
    urls: [options.redirect_uri + '*']
};
session.defaultSession.webRequest.onCompleted(filter, (details) => {
    var url = details.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 data_access_expiration_time = (raw_time && raw_time.length > 1) ? raw_time[1] : null;
    let error = /\?error=(.+)$/.exec(url);

    //获取到三个参数,即视为登录成功
    if (access_token && state && data_access_expiration_time) {
        //向登录窗体发消息,通知器第三方登录成功,继续走原来的流程
        AuthUI.webContents.send('oauth.success', {
            access_token:access_token,
            state:state,
            data_access_expiration_time:data_access_expiration_time
        });
        //登录成功后销毁窗体
        OAuth.destroy();
    }
});

清理Cookie

清理Cookie保证每次弹窗都会提示用户登录,哪怕用户不小心勾选了记住我

await new Promise((resolve, reject) => {
    session.defaultSession.cookies.get({})
        .then((cookies) => {
            cookies.forEach(cookie => {
                let url = '';
                // get prefix, like https://www.
                url += cookie.secure ? 'https://' : 'http://';
                url += cookie.domain.charAt(0) === '.' ? 'www' : '';
                // append domain and path
                url += cookie.domain;
                url += cookie.path;
                session.defaultSession.cookies.remove(url, cookie.name, (error) => {
                    if (error) console.log(`error removing cookie ${cookie.name}`, error);
                });
            })
            resolve('success')
        }).catch((error) => {
            console.log(error)
            reject('error')
        })
})

已有 7 条评论

  1. tranw tranw

    请问大大,别的网站(不是自己网站)的fb gg登录要怎么弄啊。
    要与webview通讯登录的话,弹出窗口登录,然后返回给webview.
    好像不太行。麻烦了。

    1. 这个是给Electron客户端做第三方登陆的,网站的话直接解析登陆成功后的回调地址中的认证参数就行了,没必要用webview

  2. 今天又是想婷婷的一天 今天又是想婷婷的一天

    上班摸鱼不来看婷婷,那能叫摸鱼嘛???

  3. test test

    请问下作者文章目录是怎么实现的、

    1. 现在我用的是自己魔改了下的@老高大哥的插件《Table Of Contents 自动文章目录》,这个插件是遍历正则匹配标签,并插入id,然后输出目录列表并插入文章最开头,。
      下载地址:http://pic.idzd.top/typecho-theme-waxy/TableOfContents.tar.gz

  4. test test

    启用插件报错了,可以分享下魔改后的吗。

    1. 下载地址:http://pic.idzd.top/typecho-theme-waxy/TableOfContents.tar.gz ,您看可以正常使用吗?

添加新评论

* 人工审核评论,通过后即可正常显示。《隐私政策》