Microsoft Azure login fails in electron app

问题

I am trying to integrate Microsoft Azure AD login functionality using ms-adal-angular6.

This project is on Angular-6 to create a desktop application using Electron.

Everywhere the login works fine except when I create the *.exe file because it has a file:// URL system. Below is the login failed screen after entering correct OTP during the login process.

I tried adding a file://* Reply URL under portal.azure.com -> Azure Active Directory -> App registrations -> Settings(of one app) -> Redirect URLs. But system didn't accepted it.

What I want to achieve is that this Electron app should work in any system(Windows for now) without issue of Azure login.

Can you help in determining what I could do different to make this work?

回答1:

Looks like this is an OAuth issue. OAuth does not supports file URI scheme. I was stuck with the same problem a few days ago. There are two ways you can proceed from here:

Run a local server in your app for authentication, save the authentication token/credentials locally. Use the token to make further requests to the azure services.
Do not use OAuth login. Use simple email/password login with custom implementation to authenticate user.

There is also a third way to authenticate using OAuth with node in the main process. But OAuth login with node is only recommended on servers and not in electron applications due to security reasons. Personally, I'd go with second option.

回答2:

As Azure AD doesn't support file system URL, I created a local server inside Electron app and served static files. This way the Azure's login page successfully redirects to correct localhost URL(it has been added in Redirection URLs of Azure setting).

Below code uses method described in serve-static. Code for creating the local server in Electron app -

const port = 18090; // port number for local server
const appFolder = 'my_app'; // app folder
const staticFolders = './my_app/path-to-files'; // relative path to static files

// required plugins
const http = require('http');
const finalhandler = require('finalhandler');
const serveStatic = require('serve-static');

// serve up public/ftp folder
let serve = serveStatic(staticPath, {'index': ['index.html', 'index.htm', 'default.html']});
// create server
let server = http.createServer(function onRequest(req, res) {
  serve(req, res, finalhandler(req, res));
});
server.listen(port); // listen on mentioned port


// Creating a new browser window
function createWindow() {
  let win = new BrowserWindow({
    ... // required options
  });

  win.loadURL(`http://localhost:${port}/`); // listen to local server
}

Now your Electron app will listen to a local server instead of a file system.

NOTE- Above method doesn't work for a build package with asar format file. May be there could be a possible way of doing that which I will add after finding it.

来源：https://stackoverflow.com/questions/51718222/microsoft-azure-login-fails-in-electron-app

标签

electron

azure-active-directory

adal

microsoft-teams