I'm attempting to use the node-trello package to interact with the Trello API inside a Meteor app. However running through setup and attempting to make an api call in my client-side javascript file, I get this error.
This is my code in my javascript file, following the documentation for the package.
var Trello = require('node-trello');
var t = new Trello(Meteor.settings.public.trelloKey, Meteor.settings.public.trelloToken);
t.get('/1/members/me', function(err, data) {
if(err) throw err;
console.log(data);
});
I'm not exactly sure what the error means or how to fix it so any help would be greatly appreciated.
Google will help you find an answer to your problem, by searching for the error message.
The problem is basically a security one, because you are making http requests from the browser to another site (Trello), and you need to let the browser know that it's ok to allow these requests by setting up some headers. I'll let you research what those are.
A better solution is for you to write a server method to do these things. The server process is not restricted in the requests to other sites that it makes, so you avoid the need to maintain headers, and you also won't hit any firewall issues (because perhaps the user's environment doesn't allow access to 3rd party services like Trello).
Related
I'm building a desktop app using Electron and Vue as framework.
I also need to authenticate the user using Azure AD and I'm using msal-node.js as library to do that.
I'm able to authenticate with the server in azure and get the user info, but I cannot figure it out how to set the redirect URL.
First I have to say that the behaviour between dev and prod change drastically and I'm going to explain both scenarios and, in both of them I'm going to use history mode or not
DEV - using createWebHistory
Return Url in Azure and .env file: http://localhost:8080/
This is what I've got from the devTools during the normal navigation (no authenticated)
And this is what I've got after the authentication (the call to the API is successful):
Blank page in the app.
DEV - using createWebHashHistory
Return Url in Azure and .env file: http://localhost:8080/#/
After the authentication (failed):
Blank page in the app.
PROD
In prod I must use createWebHasHistory otherwise I've got blank page from the beginning.
The first problem I've got in production is the url itself.
When I create the window I call the following url:
await win.loadURL('app://./index.html')
In azure I cannot use the same url because it's not a valid url.
If I use just:
await win.loadURL('app://index.html')
I've got blank page
Any idea?
Thank you
The solution I've found it's pretty simple. Probably it's not the most "elegant", but it works, at least for prod. In dev I've still got the same weird problem described above.
Basically I'm starting a node server (localhost:3031 for example), within the app itself, then I'm catching the redirect url with it (localhost:3031/redirect) and serving the internal url from it:
expressApp.get('/redirect', async (req, res) => {
await win.loadURL('app://./index.html#about')
})
As I said, it works and I don't see any security issue with that, but, if you have any other idea or suggestion, please let me know.
Thank you
UPDATE
I've found the issue with Dev as well. In order to authenticate I'm using what Microsoft is suggesting in its documentation.
If you look at the file AuthProvider.js there is this portion of code, at the beginning:
const CUSTOM_FILE_PROTOCOL_NAME = process.env.REDIRECT_URI.split(':')[0];
Down below, in the method "getTokenIteractive" there is this other piece of code that applies the new protocol:
protocol.registerFileProtocol(CUSTOM_FILE_PROTOCOL_NAME, (req, callback) => {
const requestUrl = new URL(req.url)
callback(path.normalize(`${__dirname}/${requestUrl.path}`))
})
In Dev my REDIRECT_URI is "http://localhost:3031/redirect", but the app protocol must be "app" (or whatever you have chosen) in order to work with Vue. So, I've just wrapped this last method in a condition based on the environment and now everything works as expected everywhere.
I hope all this can be useful to someone.
I ran into a similar issue and your solution helped me out, thank you! Can I ask how you handled the logout redirect?
Also have you tried onBeforeRequest to handle the redirects, instead of a node server?
It was used as an example in an auth0 blog: https://auth0.com/blog/securing-electron-applications-with-openid-connect-and-oauth-2/
Trying to Upload an image by XMLHttpRequest(), have issue understanding what is the correct URL to access file via xhr.open(...).
Following this example for server side code and everything..
var xhr = new XMLHttpRequest();
xhr.open('post','../../../../server/routes/saveImage.js',true);
xhr.onload = function() {
if(this.status ==200) {
resolve(this.response);
} else {
reject (this.statusText);
}
};
The Project directory is something like this
Project
client
app
component
product
addproduct.js <-- xhr.open is called from here
server
routes
saveImage.js <-- File being called
Also regarding paths let me know if there is a more convenient way to check the access path or absolute path to use in url.
I think there is a conceptual problem in many levels.
First, When you are XHRing(ajax) an url that means you are accessing the url from CLIENT SIDE. So, Let's say you have an app and HTTP posting or getting an url. Do you have that file from client side? The answer is obviously NO.
let's say you are hosting the app in:
http://localhost/myapps/app
So, When you access ./someFile.txt, ../someFile.txt and ../../someFile.txt you are actually requesting
./someFile.txt-> http://localhost/myapps/app/someFile.txt
../someFile.txt-> http://localhost/myapps/someFile.txt
../../someFile.txt-> http://localhost/someFile.txt
Now, For your problem. You need to host the Server Side upload code somewhere. The example assumes the Server Side code is hosted in, for example, http://localhost/upload and use xhr.open('post','/upload',true);
You need to understand requireing or importing or fs.readFile a file is accessing the path internally. But when you host the app, any client side code like Ajax(XHR) is accessing the url from outside.
The problem indeed was with setting up a server side route, this was mostly clarified, thanks to the answer from #Arkita and comment from #Kasper. But I went ahead to dig for a solution, which may not be very useful to others as this was a dumb question in the first place, but here it goes..
On client side
xhr.open('post','/saveImage/save',true);
on server side if you are using Express.js or other connect based frameworks
app.post('/saveImage/save',(req,res,next)=> {....})
Also the example I linked above may be outdated, this seems more helpful.
I have a challenge I'm running into and cannot seem to find an answer for it anywhere on the web. I'm working on a personal project; it's a Node.js application that uses the request and cheerio packages to hit an end-point and scrape some data... However, the endpoint is a Facebook page... and the display of its content is dependent upon whether the user is logged in or not.
In short, the app seeks to scrape the user's saved links, you know, all that stuff you add to your "save for later" but never actually go back to (at least in my case). The end-point, then, is htpps://www.facebook.com/saved. If, in your browser, you are logged into Facebook, clicking that link will take you where the application needs to go. However, since the application isn't technically going through the browser that has your credentials and your session saved, I'm running into a bit of an issue...
Yes, using the request module I'm able to successfully reach "a" part of Facebook, but not the one I need... My question really is: how should I begin to handle this challenge?
This is all the code I have for the app so far:
var express = require('express');
var fs = require('fs');
var request = require('request');
var cheerio = require('cheerio');
var app = express();
app.get('/scrape', (req, res) => {
// Workspace
var url = 'https://www.facebook.com/saved';
request(url, (err, response, html) => {
if (err) console.log(err);
res.send(JSON.stringify(html));
})
})
app.listen('8081', () => {
console.log('App listening on port 8081');
})
Any input will be greatly appreciated... Currently, I'm on hold...! How could I possibly hit this end-point with credentials (safely) provided by the user so that the application could get legitimately get past authentication and reach the desired end-point?
I don't think you can accomplish that using request-cheerio module since you need to make a post request with your login information.
A headless browser is more appropriate for this kind of project if you want it to be a scraper. Try using casperJs or PhantomJs. It will give you more flexibility but it's not a node.js module so you need to make a step further if you want to incorporate it with express.
One nodeJs module I know that can let you post is Osmosis. If you can make .login(user, pw) to work then that'll be great but I don't think it can successfully login to facebook though.
API if possible would be a much nicer solution but I'm assuming you already looked it up and find nothing in there for what you are looking for.
My personal choice would be to use an RobotProcessAutomation. WinAutomation, for example, is a great tool for manipulating web and scraping. It's a whole new different approach but it can do the job well and can be implemented faster compared to programmatically coding it.
there is a website that works with virtual items for an online game. I made a chrome extension that automates some actions on that website. Since I'd like to make this run on my raspberryPi (and chromium with the extension seems to be too slow and unefficient) I am trying to move this into node.js.
The login for the website works with Steam OpenID. It allows you to select items from a list, click a few buttons, then it sends you a tradeoffer on steam.
My extension works with the website while I was logged in there. It receives their database with jQuery getJSON, loops through the array, pushes some values into an array and then sends a post request telling the website which items I want and which items I am offering.
Here is how I am sending the request from chrome:
function withdrawXHR(botId, playerItems, botItems) {
$.ajax({
url: websiteURL,
type: 'post',
data: {
"steamid": botId,
"peopleItems": playerItems,
"botItems": botItems
},
success: function (data) {
console.error('>> Done: ' + data)
console.log("")
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.error('>> Error: ' + errorThrown)
console.log("")
}
});
}
I can do everything in node so far like receiving their database, working through it, filter out the values I need, but I can't manage to send a working request. The problem is probably the login / how the website knows who I am.
I used wrapAPI (a chrome extension) to catch the request that is being sent when manually working with the website. Here is what it looks like:
So these are the things I am wondering about:
How would I send this request from node?
How does the website know who I am? They obviously know, because they are sending me an offer, but I can't see any "personal" data in that request.
Would I need to log into Steam OpenId from Node in some way? Is that possible?
What is a CF-RAY? (See the end of the captured request).
I am quite new to JS and requests in general and even "newer" to Node.js. I don't fully understand how the background of sending requests works. I would just need some tips, ideas on how to achieve my goal here.
Any help is greatly appreciated! Thank you! :)
You cannot use XMLHttpRequest for resources across domains. ( incidentally, unless you are using an extension)
I would look into grabbing express.js, and something called CORS. CORS permits cross-domain requests.
Here: http://enable-cors.org/server_expressjs.html
And here is some information on XHR requests in browser extensions: https://developer.chrome.com/extensions
Am looking for some information on how to create a node.js login system, I have came across a lot of examples using express.
But am looking for some direction on how to do this without using express.
The main reason behind this is that my login webpages will be hosted on an apache server and my node.js server application will be running on a different server running mongoDB.
Any help in pointing me in the right direction would be great.
Thanks,
Iain
I know you said you didn't want solutions using express. But you may want to checkout Drywall for other inspiration. There are a lot of problems we solved and I'm sure there are some take-a-ways you could use.
Drywall Aqua - A website and user system for Node.js:
https://jedireza.github.io/aqua/
SweetAuth
A lightweight, zero-configuration user authentication module which doesn't depend on a database.
https://www.npmjs.com/package/sweet-auth
It's simple as:
app.get('/private-page', (req, res) => {
if (req.user.isAuthorized) {
// user is logged in! send the requested page
// you can access req.user.email
}
else {
// user not logged in. redirect to login page
}
})
With this, you have the flexibility to point your front end pages in a separate server to a nodejs in another server.