Electron и ReactJS, используйте BrowserWindow для аутентификации GitHub oAuth

Я настроил Electron github с ReactJs. Итак, я получил BrowserWindow и приложение для реагирования, которое прекрасно работает в этом окне. Чего я пытаюсь добиться, так это пройти аутентификацию с помощью GitHub. Поэтому, когда пользователь нажимает кнопку Login with Github, открывается новый BrowserWindow и переходит к URL-адресу приложения авторизации github. Проблема, с которой я столкнулся, связана с обратным вызовом и тем, как я получу код, возвращаемый из обратного вызова. Я сделал это с Apache Cordova и InAppBrowser, но все было по-другому, поскольку я мог использовать localhost в качестве обратного вызова.

Что я сделал до сих пор с электроном, так это открыл новый BrowserWindow, но после авторизации я не могу получить код из обратного вызова.

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? Любые идеи или лучшие подходы?


github-api electron oauth callback
person manosim    schedule 16.05.2015    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Итак, чего мне не хватало, так это правильного event. Правильный подход таков:

// 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/

person manosim    schedule 01.06.2015
comment
Спасибо, чувак, сэкономил мне много часов. Однако безопасно ли жестко задавать секрет клиента в исходном коде? В конце концов, каждый может проверить исходный код клиента. - person lmaooooo; 18.09.2016