Electron 实现第三方登录
warning:
这篇文章距离上次修改已过1445天,其中的内容可能已经有所变动。
上两篇文章说了,如何在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')
})
})
请问大大,别的网站(不是自己网站)的fb gg登录要怎么弄啊。
要与webview通讯登录的话,弹出窗口登录,然后返回给webview.
好像不太行。麻烦了。
这个是给Electron客户端做第三方登陆的,网站的话直接解析登陆成功后的回调地址中的认证参数就行了,没必要用webview
上班摸鱼不来看婷婷,那能叫摸鱼嘛???
请问下作者文章目录是怎么实现的、
现在我用的是自己魔改了下的@老高大哥的插件《Table Of Contents 自动文章目录》,这个插件是遍历正则匹配标签,并插入id,然后输出目录列表并插入文章最开头,。
下载地址:http://pic.idzd.top/typecho-theme-waxy/TableOfContents.tar.gz
启用插件报错了,可以分享下魔改后的吗。
下载地址:http://pic.idzd.top/typecho-theme-waxy/TableOfContents.tar.gz ,您看可以正常使用吗?