I'm porting my application to Electron and I was surprised to find out that the Dropbox authentication doesn't work in this environment. It does work in Chrome though.
The sign-in buttons remain disabled and the labels appear over the inputs.
The following message is displayed in the console:
The Content-Security-Policy directive 'worker-src' is implemented behind a flag which is currently disabled.
I'm testing using dropbox#2.5.7, electron#1.7.7 on OS X.
I found a similar question, but it seems to use a different version of Electron and has a different error message:
Dropbox oauth view is not rendering properly
Update:
The Content-Security-Policy message seems to be related to the Chrome version. The worker-src directive was introduced in Chrome 59 and electron#1.7.7 is shipped with Chrome 58.
https://www.chromestatus.com/feature/5922594955984896
I've tested with electron#1.8.0 that comes with Chrome 59, and the console messages are gone. But the problem with the auth page remains.
This happens because BrowserWindow has the nodeIntegration flag enabled by default. And this conflicts with the RequireJS implementation with which Dropbox was bundled.
So the solution would be to disable nodeIntegration when creating the browser window:
const win = new electron.BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false
}
});
win.loadURL(link);
Here's a small demo project:
https://github.com/kenjiru/electron-dropbox-sample-app
Related
I'm working on an Angular 6 web site and I face a weird problem only on Chrome in IOS (iPad, iPhone).
Each page renders correctly when going directly to each link. But when I click on any of the links inside any page, it generates a NavigationError like these one:
TypeError: Argument 1 ('other') to Node.contains must be an instance of Node
TypeError: Argument 1 ('node') to Node.insertBefore must be an instance of Node
It's really difficult to debug Chrome inside IOS so it's hard to get more information.
My web site is working well on any other browsers and OS, Firefox(windows, linux), Chrome (windows and linux), Safari (ios, osx, windows).
Anyone got an idea where to start looking?
Thank you!
Apparently, the problem is happening only on Google Chrome iOS when this code is present:
let script = window['document'].createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1');
window['document'].body.appendChild(script);
window['__onGCastApiAvailable'] = function (isAvailable) { /*Do chromecast initialization*/}
So I added this condition:
if(!navigator.userAgent.match('CriOS'))
Problem resolved.
I really don't know why cast framework is breaking angular routing.
Hello: I'm trying to get started with the ADAL plug-in for Cordova. Having used the native libraries a few times, I thought this would be pretty straightforward but I ran into a bit of an issue.
First of all my environment is VS2017, and the plugin is ADAL for Cordova 0.10.1.
I've created what I believe is the most simplistic example of a connection, using my own client application specifics and the ones provided in their sample online (which is) included below. My authentication looks like:
function authenticate(authCompletedCallback, errorCallback) {
var authority = "https://login.microsoftonline.com/common",
redirectUri = "http://localhost:4400",
resourceUri = "https://graph.windows.net",
clientId = "a5d92493-ae5a-4a9f-bcbf-9f1d354067d3";
var authContext = new Microsoft.ADAL.AuthenticationContext(authority);
authContext.acquireTokenAsync(resourceUri, clientId, redirectUri).then(authCompletedCallback, errorCallback);
This is then called in onDeviceReady();
acquireTokenAsync is called but doesn't appear to return either success or failure and a quick Fiddler trace doesn't appear to show the call which makes me wonder if it is not a configuration issue with Cordova to begin with.
I have commented out the Content-Security-Policy metatag with similar results.
Thank you in advance for any guidance!
Edit
Okay, perhaps this is helpful. I noticed that on the Cordova Plugin Simulation tab (I am trying to run this in the simulator in Chrome). I am seeing a dialog box with error:
There is no handler for the following exec call:
ADALProxy.acquireTokenAsync(...
Also, seems to work on a connected Android Device, just not in the local Simulator
The plug-in for Cordova doesn't support to run on the browser platform. When we developer an Cordova app and want to test on the browser platform, we have to ensure that the app depends on support the browser platform.
For the ADAL plug-in for Cordova support the platform:
Android (OS 4.0.3 and higher)
iOS Windows (Windows 8.0, Windows 8.1,
Windows 10 and Windows Phone 8.1)
And for other kinds of plug-in you can check it via you the Cordova plug-in.
I can't open devtools in the built version of my electron app. Therefore i want to find another solution to log any errors that only occur in the production version.
Is there any good way to get some console.logs from an electron application if its already built?
Obviously i can debug the “development” version (running npm run dev) of my electron app by opening the chrome dev tools. But i can’t find any way to enable them inside my production application.
I am using the newsest version of electron-vue
Thanks for any help in advance.
Here's what worked for me on Mac.
In terminal type lldb path/to/build.app
In the opened debugger type run --remote-debugging-port=8315. It should open a window of your app.
Open Chrome at http://localhost:8315/
Click on the name of the app. For example, Webpack App.
If you don't see anything in the opened tab, focus on the window of your app.
Launch your Electron application with the --remote-debugging-port=8315 flag set and navigate to chrome://inspect/#devices in Chrome 80+. Then click Configure... and add localhost:8315 as a discovery server.
Then, wait for your Electron instance to appear in the devices list and click inspect.
Enabling the Chrome devtools in production can be done in various ways:
A environment variable:
E.g. under Windows set ELECTRON_ENV=development&& myapp.exe
Pass a special parameter to your app
E.g. myapp.exe --debug
Debug mode via user settings (if you have persistent settings)
Menu entry to open the devtools
Can be combined with 1.-3. to only have that menu entry when in debug mode
You can just check if 1.-3. are set and if they are, you simply open the devtools via mainWindow.webContents.openDevTools()
Personally I use a combination of 1., 3. and 4. I simply unlock a developer menu that allows me to open the devtools or opens the userdata folder for me.
If you also want to log critical errors, then electron-log looks like a rather popular option for electron.
On Mac just run open /Applications/WhatsApp.app --args --remote-debugging-port=8315 and then open http://localhost:8315
https://github.com/bytedance/debugtron
Debugtron is an app to debug in-production Electron based app. It is also built with Electron.
The way to do this is using the --remote-debugging-port flag.
Using Signal as an example, take the following steps:
start the application from the CLI
signal-desktop --remote-debugging-port
Open the debugging URL in a Google Chrome browser (in this case http://localhost:39733/), this will open a page with the app name on it .
Click the to open a screen were you can click around to use the app and see output in the devtools
Alternatively, you can open chrome://inspect/#devices in the Google Chrome browser and click "inspect" (underneath the app name) to open the same window
In my case, I had a runtime error crashing Electron before the web view was even shown. Chrome dev tools were not useful for debugging this kind of error.
Even stranger, the app loaded fine using the lldb commands:
lldb ./dist/mac/electron-quick-start-typescript.app
run --remote-debugging-port=8315
I managed to solve by writing the Node.js console log/error to a file. So I could see the console output:
import fs from 'fs';
import util from 'util';
// use a fixed path, to ensure log shows outside Electron dist
const logPath = `/Users/username/Sites/electron-server/debug-${isDev ? 'dev' : 'prod'}.log`;
const logFile = fs.createWriteStream(logPath, { flags: 'w' });
const logStdout = process.stdout;
console.log = function(...args) {
logFile.write(util.format.apply(null, args) + '\n');
logStdout.write(util.format.apply(null, args) + '\n');
}
console.error = console.log;
I found the error was a relative path issue. When the app is started in production mode the relative path did not point to the correct location.
I solved by using an absolute path, with Electron getAppPath() method:
- './renderer'
+ app.getAppPath() + '/renderer'
In the main/index.js at the end of section app.on('ready') just add:
mainWindow.webContents.openDevTools();
Just for debugging, when electron opens an empty window, but the development version works fine, this way is very helpful for me.
The answers above don't help for me. ( those with -remote-debugging-port)
put this code into your main.js or similar file, it will automatically open the dev-tool when started.
mainWindow.webContents.openDevTools()
June 2022 UPDATE:
Devtools can be explicitly enabled through on the BrowserWindow object.
mainWindow = new BrowserWindows({
...,
webPreferences: {
...,
devTools: true,
}
}
And then you can manually open it on load.
mainWindow.on('ready-to-show', () => {
if (!mainWindow) {
throw new Error('mainWindow is not defined')
}
mainWindow.show()
mainWindow.webContents.openDevTools()
})
Our Ionic 2 mobile app was rejected by apple because of the following reason:
We noticed that the user is taken to Safari to sign in or register for an account, which provides a poor user experience.
Please revise your app to enable users to sign in or register for an account in the app.
The Auth0 Lock provides the user with a sign up button that we configured through the signUpLink option of the Lock. This button opens a registration page in the system browser (Safari) outside of the application, which apparently isn't acceptable for Apple.
Before we upgraded to the latest version of Ionic 2 (Ionic 2 beta 11), the lock would open the link in the InAppBrowser, which is acceptable for Apple. Because of the difference in Ionic 2 version, I imagine this could be an Ionic issue.
I made sure I had the Cordova InAppBrowser plugin installed. It's present in my config.xml as <plugin name="cordova-plugin-inappbrowser" spec="~1.6.1" /> and when I open the .xcproject file in XCode, the plugin is present in the Plugins folder. I have also tested using the InAppBrowser manually using open('https://www.google.com/, '_blank'); which opened the InAppBrowser as it should.
Neither the code regarding the Auth0 Lock, nor the URL to the registration page changed.
Auth0 Lock version: 10.6 (have also tried on 10.11, didn't solve the issue)
Ionic version: 2.1.0
OS: iOS
What could've changed since the Ionic 2 beta 11 that would affect opening the link in the InAppBrowser?
I have come up with a dirty temporary workaround by adding an onclick attribute to the button that opens the link in the window.open function:
this.lock.on('show', () => {
let parent: Element = undefined;
let intervalIndex = 0;
let interval = setInterval(() => {
parent = document.getElementsByClassName('auth0-lock-tabs')[0];
if (parent) {
let item = parent.children.item(1).children.item(0);
item.setAttribute('onclick', `window.open('${AppSettings.registrationUrl}', '_blank'); return false;`);
item.removeAttribute('href');
clearInterval(interval);
}
if (intervalIndex == 20)
clearInterval(interval);
intervalIndex++;
}, 500);
});
With this modification, the sign up link opens in the InAppBrowser and therefore doesn't violate Apple's terms anymore.
Note: this is not a good answer to this problem and is not a guaranteed fix as there is a delay on configuring this onclick attribute on the button.
I'm still a newbie in the mobile app development arena, please forgive me if I did not provide adequate information, probably because my lack of knowledge on its relevance. I'll edit with more info upon request.
Here's what I'm using to build my app on a Windows 7 64bit environment:
AngularJS 1.0
Phonegap Build 6.3.0 (cloud version)
cordova-android 5.2.1 (as shown on Phonegap build)
cordova-ios 4.2.0 (as shown on Phonegap build)
azure-activedirectory-library-for-cordova version 0.7.1
I'm testing on:
Android phone Samsung Galaxy SCH-I545 os version 5.0.1
iPhone 6S Plus os version 9.3.5
Everything went well with Android using ADAL plugin 0.7.1. However on iPhone, it kept going back to the login screen for authentication to our AD FS even though I already got authenticated the first time. I'm suspecting the token did not get stored in cache, that's why acquireTokenAsync kept getting called? I'm still trying to get my hands on a MAC to troubleshoot further.
Then, I updated to ADAL plugin 0.8.0 to see if that might solve my problem, but now Android stopped working and I got this error:
DEVELOPER_AUTHORITY_IS_NOT_VALID_INSTANCE
I debugged through using developer tool on both 0.7.1 and 0.8.0 and I saw no token coming back in acquireTokenAsync method in version 0.8.0. Switching back to 0.7.1 and Android works again.
Could anyone guide me on what might be causing this problem on my iPhone and Android? Maybe I'm missing additional settings or files? The way I updated the ADAL plugin was replacing the cordova-plugin-ms-adal folder under plugins and modify my config.xml file to spec="~0.8.0", that should be sufficient right?
* Update on cordova-android *
I finally got 0.8.0 working on my android device by turning off validateAuthority
var context = new Microsoft.ADAL.AuthenticationContext(authority,false);
I think it's because I'm using AD FS (found this comment in ADErrorCodes.h under adal-for-objc):
/*! The passed in authority URL does not pass validation, if you're trying to use ADFS directly you must disable authority validation. */
/*! An error was raised during the process of validating the authorization authority. */
AD_ERROR_DEVELOPER_AUTHORITY_VALIDATION = 101
* Update on cordova-ios *
Debugging in Safari developer tool, I don't have tokenCacheItems after the native method got called.
bridge.executeNativeMethod('tokenCacheReadItems',[this.authContext.authority, this.authContext.validateAuthority])
.then(function (tokenCacheItems) {
tokenCacheItems.forEach(function (item) {
result.push(new TokenCacheItem(item));
});
d.resolve(result);
}, function(err) {
d.reject(err);
});
I spent almost a week on this already and I really appreciate any help on this issue.