电子与ReactJS,使用BrowserWindow进行GitHub oAuth身份验证 [英] Electron & ReactJS, Use BrowserWindow for GitHub oAuth authentication
问题描述
我已经用ReactJs建立了github的Electron。因此,我得到了一个 BrowserWindow
和一个在该窗口中很好地播放的react应用。我想要实现的目标是通过GitHub进行身份验证。因此,当用户按下用Github登录
按钮时,将打开一个新的 BrowserWindow
并转至github授权应用url。我必须与回调有关的问题以及如何从回调中返回代码。我已经使用Apache Cordova和 InAppBrowser
做到了这一点,但是由于我能够使用 localhost
作为
I have set up github's Electron with ReactJs. So I got a BrowserWindow
and a react app playing nicely in that window. What I'm trying to achieve is to get authenticated with GitHub. So when a user presses the Login with Github
button, a new BrowserWindow
opens and goes to the github authorize app url. The issue I have has to do with the callback and how I will get the code returned from the callback. I've done it with Apache Cordova and the InAppBrowser
but it was different since I was able to use localhost
as a callback.
到目前为止,我对电子所做的工作是打开新的 BrowserWindow
,但获得授权后,我无法打开
What I've done so far with electron is opening the new BrowserWindow
but after the authorization I cannot get the code from the callback.
var authWindow = new BrowserWindow({ width: 800, height: 600, show: true, 'always-on-top': true });
var githubUrl = 'https://github.com/login/oauth/authorize?';
var authUrl = githubUrl + 'client_id=' + options.client_id + '&scope=' + options.scope;
authWindow.loadUrl(authUrl);
authWindow.setVisibleOnAllWorkspaces(true);
authWindow.setResizable(false);
authWindow.addListener('page-title-updated', function(stream) {
console.log("LOADED");
console.log(JSON.stringify(stream));
console.log(stream);
var url = (typeof stream.url !== 'undefined' ? stream.url : stream.originalEvent.url),
raw_code = /code=([^&]*)/.exec(stream.url) || null,
code = (raw_code && raw_code.length > 1) ? raw_code[1] : null,
error = /\?error=(.+)$/.exec(strean.url);
if (code || error) {
authWindow.close();
}
// If there is a code in the callback, proceed to get token from github
if (code) {
// requestToken(code);
} else if (error) {
alert("Oops! Couldn't log authenticate you with using Github.");
}
});
我在哪里做 console.log(JSON.stringify(stream) );
我得到 {}
,所以必须执行 eventListener
吗?有什么想法或更好的方法吗?
Where I'm doing console.log(JSON.stringify(stream));
I get {}
so it's something that has to do the the eventListener
? Any ideas or better approaches?
推荐答案
所以我所缺少的是正确的事件
。正确的方法是:
So what I was missing was the right event
. The correct approach is:
// Build the OAuth consent page URL
var authWindow = new BrowserWindow({ width: 800, height: 600, show: false, 'node-integration': false });
var githubUrl = 'https://github.com/login/oauth/authorize?';
var authUrl = githubUrl + 'client_id=' + options.client_id + '&scope=' + options.scopes;
authWindow.loadUrl(authUrl);
authWindow.show();
// Handle the response from GitHub
authWindow.webContents.on('did-get-redirect-request', function(event, oldUrl, newUrl) {
var raw_code = /code=([^&]*)/.exec(newUrl) || null,
code = (raw_code && raw_code.length > 1) ? raw_code[1] : null,
error = /\?error=(.+)$/.exec(newUrl);
if (code || error) {
// Close the browser if code found or error
authWindow.close();
}
// If there is a code in the callback, proceed to get token from github
if (code) {
requestGithubToken(options, code);
} else if (error) {
alert("Oops! Something went wrong and we couldn't log you in using Github. Please try again.");
}
});
// Reset the authWindow on close
authWindow.on('close', function() {
authWindow = null;
}, false);
我还写了一个教程,描述了完整的实现,可以在 http://manos.im/blog/electron-oauth-with-github/
I also wrote a tutorial that describes the full implementation which can be found at http://manos.im/blog/electron-oauth-with-github/
这篇关于电子与ReactJS,使用BrowserWindow进行GitHub oAuth身份验证的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!