Input with javascript not working on external urls?


#1

I’m working on an app that authenticates with dropbox OAuth.
For simplicity sake, here’s an example:

var win = new BrowserWindow({ width: 800, height: 600, show: false });
win.on('closed', function() {
  win = null;
});
win.loadUrl('https://www.dropbox.com/login');
win.show();

When I try to log in it types “behind” the input label and the button does not get enabled.
I’ve tried the following browser options to no avail:

“web-preferences”: { javascript: true, “web-security”: false, “experimental-features”: true }

Tried on OSX; does anyone know how to fix this issue?

Thanks,
Dennis


Oauth2.0 integration fails
#2

I ran into the same problem while I was trying to implement oAuth authentication with GitHub. Try setting 'node-integration': false. (note not under web preferences but like I do that below).

var authWindow = new BrowserWindow({ width: 800, height: 600, show: true, 'node-integration': false });

Hope it helps!


#3

Thanks, that helped a lot!
With your Github Oauth, how did you deal with the callback url? I’m getting “Not allowed to load local resource” error, even though I turned web-security to false. Also, do you use a relative callback url? I’m trying to implement that, but it fails because registerProtocol doesn’t accept url params:

var protocol = require('protocol');
// https://github.com/atom/electron/blob/master/docs/api/protocol.md
protocol.registerProtocol('app', function(request) {
    console.log(request.url);
    var url = request.url.substr(5)
    console.log ("requested: "+url)

    var filename = url.substring(url.lastIndexOf('/')+1);
    console.log ("filename: "+filename)

    var filepath = path.normalize(__dirname + '/../dist/' + url);
    console.log ("path: "+filepath)

    console.log(filepath);
    console.log ("--------")
    return new protocol.RequestFileJob(filepath);
});

#4

Well my callback on GitHub is set to http://localhost/callback (I don’t think it can be set relative). Then with Electron and BrowserWindow I’m using an event listener for event did-get-redirect-request. That is where the user authorizes the app and github redirects to the callback providing a code like http://localhost/callback?code=123123123.

Below you can find my code with some comments:

// Your GitHub Applications Credentials
var options = {
    client_id: 'your_client_id',
    client_secret: 'your_client_secret',
    scopes: ["user:email", "notifications"] // Scopes limit access for OAuth tokens.
};

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

#5

+1 for 'node-integration': false fixing the issue.