Trying to build an Electron app using ember-electron and am trying to use emberfire to communicate with Firebase. Everything runs fine when running as a web app with ember s but when launching as an Electron app I get nothing but errors like this:
XMLHttpRequest cannot load https://www.googleapis.com/identitytoolkit/v3/relyingparty/signupNewUser?key=AIzaSyBYyuJ-1E3ufujlzdKhj8gE9I6QH8TreJE. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'serve://dist' is therefore not allowed access. The response had HTTP status code 404.
Is this a known problem or does anyone know a way around this? Unfortunately cannot simply add serve://dist to the list of authorized domains as Google doesn't consider it a valid domain name.
Update: I would still love to know if anyone has a possible workaround but I found a tool called Nativefier (https://github.com/jiahaog/nativefier) which works for my purposes. Since I am simultaneously developing a web app and a desktop app, once the web app is being hosted, can use nativefier to build the desktop app
I didn't try with electron, but played with node-webkit. Many problems related to origin can be solved by running local web-server: in main script run a web-server using express which serves your app. This is piece of code that I use to start local server:
let express = require('express');
let http = require('http');
let app = express();
app.use('/', express.static('dist'));
let server = http.createServer(app);
let port = 9000;
let maxPort = 50000;
server.on('error', function (e) {
if (port < maxPort) {
server.listen(++port);
} else {
alert('Your system has no free ports to start a web-server, which is needed for this app to work');
window.nw.Window.get().close();
}
});
server.on('listening', function () {
location = 'http://localhost:' + port + '/index.html';
});
server.listen(port);
I think that something similar should work for electron, too
Related
I am trying to make an API call via Office Scripts (fetch) to a publicly available Azure Function-based API I created. By policy we need to have CORS on for our Azure Functions. I've tried every domain I could think of, but I can't get the call to work unless I allow all origins. I've tried:
https://ourcompanydoamin.sharepoint.com
https://usc-excel.officeapps.live.com
https://browser.pipe.aria.microsoft.com
https://browser.events.data.microsoft.com
The first is the Excel Online domain I'm trying to execute from, and the rest came up during the script run in Chrome's Network tab. The error message in office Scripts doesn't tell me the domain the request is coming from like it does from Chrome's console. What host do I need to allow for Office Scripts to be able to make calls to my API?
The expected CORS settings for this is: https://*.officescripts.microsoftusercontent.com.
However, Azure Functions CORS doesn't support wildcard subdomains at the moment. If you try to set an origin with wildcard subdomains, you will get the following error:
One possible workaround is to explicitly maintain an "allow-list" in your Azure Functions code. Here is a proof-of-concept implementation (assuming you use node.js for your Azure Functions):
module.exports = async function (context, req) {
// List your allowed hosts here. Escape special characters for the regular expressions.
const allowedHosts = [
/https\:\/\/www\.myserver\.com/,
/https\:\/\/[^\.]+\.officescripts\.microsoftusercontent\.com/
];
if (!allowedHosts.some(host => host.test(req.headers.origin))) {
context.res = {
status: 403, /* Forbidden */
body: "Not allowed!"
};
return;
}
// Handle the normal request and generate the expected response.
context.res = {
status: 200,
body: "Allowed!"
};
}
Please note:
Regular expressions are needed to match the dynamic subdomains.
In order to do the origin check within the code, you'll need to set * as the Allowed Origins on your Functions CORS settings page.
Or if you want to build you service with ASP.NET Core, you can do something like this: https://stackoverflow.com/a/49943569/6656547.
In a previous Stack Overflow question, I shied away from using an external webhook on Actions on Google
so I needed to go back to the inline editor. I got that worked out, but now I'm feeling brave again.
I've outgrown the inline editor and want the ability to develop my code on my laptop, testing it in Firebase, and publishing to a site for my webhook, presumably where the inline code editor publishes to. In fact, I have already written the require functions and deployed them from Firebase. So the full functionality is ready to go, I just need to hook it up properly to Actions on Google.
What I have now in Actions on Google, inline editor, is more of a stub. I want to merge that stub into my more fullblown logic that I have in Firebase. Here is what is in the inline editor:
const { conversation } = require('#assistant/conversation');
const functions = require('firebase-functions');
const app = conversation();
app.handle('intent_a_handler', conv => {
// Implement your code here
conv.add("Here I am in intent A");
});
app.handle('intent_b_handler', conv => {
// Implement your code here
conv.add("Here I am in intent B");
});
exports.ActionsOnGoogleFulfillment = functions.https.onRequest(app);
When I search on the Internet, I see discussion from the point of view of Dialogflow, but like I say, I'm in "Actions on Google". I want to transition away from the inline editor, taking what I already have, as a basis.Can someone explain how I set that up? I'm happy to do this within the context of the Google ecosystem.
To test your own webhook locally on your own system I would recommend incorporating a web app framework such as express. With express you can host code on your local machine and make it respond to request from Actions on Google. In your case you would replace this will all the code related to the Firebase functions package. Here is an example of what a simple webhook for Actions on Google looks like:
const express = require('express');
const bodyParser = require('body-parser')
const { conversation } = require('#assistant/conversation');
const exprs = express();
exprs.use(bodyParser.json()) // allows Express to work with JSON requests
const app = conversation();
app.handle('example intent', () => {
// Do something
})
// More app.handle() setups
exprs.post('/', app);
exprs.listen(3000);
With this setup you should be able to run your own application locally. The only thing you need to do is install the required dependencies and add your own intent handlers for your action. At this point you have a webhook running on your own machine, but that isn't enough to use it as a webhook in Actions on Google because it runs locally and isn't publicly available via the internet.
For this reason we will be using a tool called ngrok. With ngrok you can create a public https address that runs all messages to your local machine. This way you can use ngrok address as your webhook URL. Now you can just make as many code changes as you want and Actions on Google will automatically use the latest changes when you develop. No need to upload and wait for Firebase to do this.
Just to be clear: Ngrok should only be used for development. When you are done with developing your action you should upload all your code to a cloud service or host it on your own server if you have any. A (free plan) ngrok URL usually expires every 6 hours. So its not a suitable solution for anything other than development.
I'm having incredible difficulty setting up the Twilio Client in Meteor JS, and would really appreciate any help.
I have extracted the relevant code and error logs below. So far as I can tell, it should be simple. The code is just grabbing an authtoken which I have previously generated, and then trying to set up the device using that authtoken. But it's not working.
'click #initializeDevice'(event) {
var thisAuthToken = Session.get('myAuthToken');
console.log(thisAuthToken); // I have confirmed with Twilio support that these authtokens are correctly generated
const Device = require('twilio-client').Device;
Device.setup(thisAuthToken, { debug: true });
var myStatus = Device.status()
console.log(myStatus); //this is logging "offline"
Device.on('ready',function (device) {
log('Twilio.Device Ready!'); //this is not logging anything
});
},
When that code runs, it generates the following logs:
eyJhbGciDpvdXRnb2luZz9hcHBTaWQ9QVA2NDE2MzJmMzA1ZjJiY2I[Note:I have deleted part of the middle of the logged authtoken for the purpose of this public post]5YmMxOGQyOWVlNGU2ZGM0NjdmMzRiNDVhNCIsImV4cCI6MTU3Nz0ygbJKTx15GgNCWDkm-iUPjn_O1NZU6yovp4vjE
modules.js?hash=69069bec9aeba9503ae3467590cf182be57d9e62:3605 Setting up VSP
modules.js?hash=69069bec9aeba9503ae3467590cf182be57d9e62:3605 WSTransport.open() called...
modules.js?hash=69069bec9aeba9503ae3467590cf182be57d9e62:3605 Attempting to connect...
modules.js?hash=69069bec9aeba9503ae3467590cf182be57d9e62:3605 Closing and cleaning up WebSocket...
modules.js?hash=69069bec9aeba9503ae3467590cf182be57d9e62:3605 No WebSocket to clean up.
modules.js?hash=69069bec9aeba9503ae3467590cf182be57d9e62:3605 Could not connect to endpoint: ws does not work in the browser. Browser clients must use the native WebSocket object
modules.js?hash=69069bec9aeba9503ae3467590cf182be57d9e62:3605 Closing and cleaning up WebSocket...
modules.js?hash=69069bec9aeba9503ae3467590cf182be57d9e62:3605 No WebSocket to clean up.
calltemplate.js:31 offline
I'm doing this all from a local server, tunneled through NGROK. I've also set up the Twilio back end, linked the app, purchased a number, etc.
So far as I can tell, the issue, from the logs, appears to be something to do with the way that Meteor uses WebSockets.
Could not connect to endpoint: ws does not work in the browser. Browser clients must use the native WebSocket object
This is a not a Meteor related problem rather than browser issue.
Make sure your browser supports WebRTC
BTW, Your browser might be supporting it but you'd need to enable it.
I've got meteor on a linux box that I develop on through SSH to a windows laptop. For simple apps I can just substitute the lan address (10.0.1.101:3000) for localhost:3000 in the (windows)browser and it works.
But working through a tutorial that uses oauth w twitter, it seems meteor hardcodes ROOT_URL as localhost when in development environment and sends that to twitter.js. This happens even though in dev.twitter.com I have given the callback URL as
http://10.0.1.101:3000/_oauth/twitter?close.
Is there someway to develop on a machine that is not localhost?
You need to set the environment variable before starting meteor:
ROOT_URL=http://10.0.1.101:3000 meteor
For me it works hijacking the request and checking the request hostname, but it might not work for race conditions, as I don't know if this is process-safe:
WebApp.rawConnectHandlers.use((req, res, next) => {
var match: any
if(
req.url.startsWith('/_oauth/facebook') &&
(match = req.headers.host.match(/([a-zA-Z0-9-]+)\.domain.com/))
) {
Meteor.absoluteUrl.defaultOptions.rootUrl
= process.env.ROOT_URL
= match[0]
}
next()
})
My problem was making the oauth work for multiple domains.
I have backend meteor server which serves and shares common collections across multiple apps (just sharing mongo db is not enough, realtime updates are needed).
BACKEND
/ \
APP1 APP2
| |
CLIENT CLIENT
I have server-to-server DDP connections running between backend server and app servers.
Atm i'm just re-publishing the collections in app server after subscribing them from backend server.
It all seems working quite well. The only problem tho is that in app server cant query any collections in server side, all the find() responses are empty, in client side (browser) it all works fine tho.
Is it just a coincidence that it works at all or what do you suggest how i should set it up.
Thanks
I realize that this is a pretty old question, but I thought I would share my solution. I had a similar problem as I have two applications (App1 and App2) that will be sharing data with a third application (App3).
I couldn't figure out why the server-side of my App1 could not see the shared collections in App3...even though the client-side of App1 was seeing them. Then it hit me that the server-side of my App1 was acting like a "client" of App3, so needed to subscribe to the publication, too.
I moved my DDP.connection.subscribe() call outside the client folder of App1, so that it would be shared between the client and server of App1. Then, I used a Meteor.setInterval() call to wait for the subscription to be ready on the server side in order to use it. That seemed to do the trick.
Here's a quick example:
in lib/common.js:
Meteor.myRemoteConnection = DDP.connect(url_to_App3);
SharedWidgets = new Meteor.Collection('widgets', Meteor.myRemoteConnection);
Meteor.sharedWidgetsSubscription = Meteor.myRemoteConnection.subscribe('allWidgets');
in server/fixtures.js:
Meteor.startup(function() {
// check once every second to see if the subscription is ready
var subIsReadyInterval = Meteor.setInterval(function () {
if ( Meteor.sharedWidgetsSubscription.ready() ) {
// SharedWidgets should be available now...
console.log('widget count:' + SharedWidgets.find().count);
// clean up the interval...
Meteor.clearInterval(subIsReadyInterval);
}
}, 1000);
});
If there is a better way to set this up, I'd love to know.
I have done this already,
check my app Tapmate or youtap.meteor.com on android and iphone,
I know it will work till 0.6.4 meteor version,
haven't checked if that works on above version,
You have to manually override the default ddp url while connecting,
i.e. go to live-data package in .meteor/packages/live-data/stream_client_socket.js
overwrite this - Meteor._DdpClientStream = function (url) {
url = "ddp+sockjs://ddp--**-youtap.meteor.com/sockjs";
now you won't see things happening locally but it will point to meteor server
also disable reload js from reloading
Thanks