电子&ReactJS，使用 BrowserWindow 进行 GitHub oAuth 认证 [英] Electron & ReactJS, Use BrowserWindow for GitHub oAuth authentication

问题描述

我已经用 ReactJs 设置了 github 的 Electron.所以我得到了一个 BrowserWindow 和一个在该窗口中运行良好的反应应用程序.我想要实现的是通过 GitHub 进行身份验证.因此，当用户按下 Login with 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)); 我得到 {} 所以这是必须做的事情 事件监听器?有什么想法或更好的方法吗?

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?

推荐答案

所以我缺少的是正确的 event.正确的做法是:

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屋！