How to test Pinterest SDK locally? - javascript

I'm testing out the Pinterest SDK on my local machine. The problem is, I need a secure server in order to test the API (they only allow Redirect URIs with a HTTPS prefix).
Every time I try to login to the Pinterest application it throws the error:
{"status": "failure", "message": "You are not permitted to access that resource.", "code": 7, "data": "The provided redirect_uri http://localhost:3000/ does not match any of the registered redirect URIs."}
Is there any way I can test via HTTPS locally?

If you are using Create React App you can start the development server in HTTPS, see https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development

You can't. Pinterest demands that you have https link.
I tried using ngrok to convert my localhost link to an https link for testing. But it was throwing some errors, so skipped it. You can try it out though
But if you wish to have a temporary setup to work with the APIs, lets say to write down functions to process information you get from APIs, which was my requirement, then you can follow what I did. May not be the best option, but I could get my job done.
I hosted a basic app on firebase. Firebase provides some sample apps which you can use as base app if you want.
Just get the link of the hosted app and add it in your app page in Pinterest.

Related

Unable to use Google SSO on server react

I am trying to use Google SSO on a server but the popup for Google SSO doesn't display the google accounts to select for logging in. It works when I test it in my local and am able to login too.
I am using the package react-oauth/google
I have added server details in Credentials via Google Cloud Console. Following are URLs in configurations in Authorized JavaScript origins and Authorized redirect URIs:
http://localhost
http://localhost:9998 ## React app is running on this port
http://example.com:9998 ## Server url can be accessed using domain and port
I am getting 403 error when following url is called https://accounts.google.com/gsi/button:
Following is the error that is shown in cosole
[GSI_LOGGER]: The given origin is not allowed for the given client
Tried clearing cache and hard reload. It doesn't work either.
Does it have something to do with using ports along with domain name?
EDIT: I have also tried creating new credentials.. but that doesn't work either
I had the same issue at work. Does your website have ssl certificate? If not try adding ssl certicate (otherwise google sso won't work without it) and then change the urls in the Authorized JavaScript origins and Authorized redirect URIs with the https url. This should fix the issue. Let me know if it worked :)

How to support HTTP protocol in Electron/Firebase App

I'm trying to user firebase authentication (saml) within my Electron app. I have read that Electron isn't "officially supported", however I've also encountered some threads that indicate people have gotten it to work. My issue is when using firebase.auth().signInWithRedirect (or signInWithPopup), I get the error:
code: "auth/operation-not-supported-in-this-environment"
message: "This operation is not supported in the environment this application
is running on. "location.protocol" must be http, https or chrome-extension and
web storage must be enabled."
Google turns up this tips and tricks article which suggests just using a hosted URL:
Third, OAuth requests need to have a verifiable origin, which can be whitelisted in the Firebase Console. This requires the current Electron browser window to use the http or https protocol, and not file. That means the current window contents should be loaded with browserWindow.loadURL and not browserWindow.loadFile, and the url must be an http or https url, not a file:// url. This generally requires a hosted page somewhere that gets wrapped into the Electron window.
This will probably work, as just running the app locally on the angular dev server works by simply using:
mainWindow.loadURL('http://localhost:4200');
I don't want to do this because having a hosted page lessens much of the appeal of having a native app.
I could make this work in by just having a local Node/Express instance serve the app locally using get-port to find a free port to run the app there. I haven't really seen any examples showing this. There are a few Stackoverflow questions on getting it to work, but nothing that makes me think it is an acceptable production-level solution.
Is a local Express server an acceptable way to circumvent this error, or is there currently a better solution?
Note: The package recommended in this answer is not published by Firebase and anyway doesn't look like it supports SAML auth.
I had to do something very similar but with Auth0 instead of Firebase.
What I had to do was make two Browser Windows, where the first one is strictly an authentication Browser Window while the second one is the actual main App Browser Window.
Auth0 has the same restrictions of whitelisting only http/s protocols, so in the authentication Browser window, I load the Auth0 sign in URL via localhost (it’s a hosted URL in Auth0 itself). I then take the credentials (access token and refresh token) from that redirect/Oauth process and store them locally for the time being (use Keytar, SafeStorage, FS modules, whatever; I chose Keytar).
Then my authentication Browser Window closes itself and launches the main, app Browser Window.
From here onward, I have to reference my stored access token and refresh tokens from my storage location and use those in all other calls.
So, for instance, I have some API library modules I made for myself that use Axios. So I bring the saved access token into all of my Axios calls. Works like a charm.
So, in summary: I had to use two different Browser Windows and persist credentials locally for later use in the main Browser Window.
Check out Auth0’s guide on using Electron for authentication; I think you’ll find that many concepts carry over for Firebase and other providers.
i've successfuly implemented firebase email ver in my app, it is more feasible to load .html file rather than load a page from url as users can exploit the the url by sending fake data. but with oauth it is not possible,firebase create webapp you can create a html file it should contain api keys, host url etc and host it locally in android file://android_assets/filename.html this works fine even offline i dont know properly about
electron

HTTPS on localhost for OAuth for a desktop application

I am creating a desktop application that using Spotify's oauth api. I am using the implicit grant flow described here: https://developer.spotify.com/web-api/authorization-guide/#implicit_grant_flow
My idea is to have an "Authenticate" button, that you click and it opens your browser. You login/approve the connection with Spotify. Then it sends you to a redirect url.
I want to set this redirect url to 127.0.0.1:58212 or some port on the loopback device.
My question is, should I use https for this?
I am leaning towards yes. One because the access token needs to be secure, and I believe other users on the system could potentially read the message when it is sent, and two because in the time it took the user to log in, someone could have taken over the port.
So I want SSL for encryption of the message, and I want to ensure I am actually talking to my app.
How do I generate certificates in this situation? I think each instance of the application needs to have its own certificate, and I need to somehow inform the computer to trust that certificate during the lifetime of the application.
I could also generate the certificate during installation, and do some step during installation that makes the system trust that certificate.
Am I thinking about this the correct way, or am I going about this all wrong?
I am using electron and express in JavaScript to write my application.
Thanks for any advice.
The best way to securely use Oauth with installed applications such as desktop applications is to use the Oauth 2 flow for installed applications. But this option would have to be implemented by the service provider. Google provides for this option.
https://developers.google.com/api-client-library/python/auth/installed-app
Unfortunately, many services do not implement OAuth2.
To use Oauth 1.0 with installed applications, instead of returning to a callback_url, the service provider displays the auth code to the user which the user can then copy and paste to the desktop application. Check out Trello Ouath integration which allows for this.
The Web Api flow that you are trying to achieve will not work in the case of desktop apps. The redirect uri 127.0.0.1:port is your local uri. The service provider will need, at the very least, your public ip to redirect the flow back to your system.
AFAIK, for a Desktop or a native app it is much better to implement the Oauth authorization code flow. The implicit grant is intended to be used on a device browser and not on a Web View.
If your app uses a Web Service to connect, your Web Service needs a redirect URL that uses https. Luckily most hosting platforms like Heroku provide this to you for free (otherwise you need to buy an SSL certificate which might be a lot of work).
On the authorization code flow, a token doesn't need to see the client, it is all stored in the backend.
Most services allow you to test on localhost with http.
I wrote a tutorial that could give you some guidance on the flow.

How to alias a URL?

I'm testing client-side Facebook auth locally.
I'm hitting the error
API Error Description: The specified URL is not owned by the application
because I'm testing locally, what is the best way to work around this and alias the URL so I can keep testing locally?
I'm using a Mac.
Thanks!
In the facebook application you can set a URL in the app tab where the script is being executed. This has to be set if you're working on some external website.
Reason why:
If i was to discover the app id of someones app i cannot start posting feeds and whatnot in it's name. You have to be specific with the URL in the application so it will be granted access.
Edit
To my knowledge you cannot work local with facebook applications when it comes to JavaScript. You can specify the local URL in the facebook api but i don't think it will go trough without giving the same error.
Assuming I understand your question correctly, for this I would use Charles Proxy and make use of its Map Remote functionality.
Changing the url on Facebook to localhost works.

Facebook API: How to authenticate a web app

I am attempting to write a plugin for a webapp that integrates it with facebook using the Javascript API. The application is installed by our customers on their own servers each with their own site names. This poses a problem to me as Facebook wants me to specify a site url for the application. This url is going to be different for every customer. Creating a new application for each customer is not an option.
In my research of this problem it seems that I have to pretend to be a desktop app and follow that authentication path. I cannot figure out how to do this.
Anyone have any idea how this can be done?
Are you going to host the app as a canvas app or outside facebook?
Is the url important to you? There is a strict one-to-one relation between base-url and application.
What many apps do is host the apps as directories in their domain. For example http://crazy-fb-app.com/customername
That's your options basically if you want to use Javascript SDK.
If you're going to be using server side technology you could have the user authorize the application while requesting permission to access user's data while he's offline. in that case you will receive a non-expiring (or long-expiring) authentication token which you can use from the server to make Graph API calls on behalf of the user. For some stuff you can obtain an Application Auth token (which is shorter and non-user-specific) to make calls to the graph.
Rotem

Categories