Im trying to get basic data from instagram profiles, I am using a local webpack dev server to run my react app, I am also using Firebase functions, the function on firebase sends oauth/authorize request to instagarm's api, im getting a code response back and return it to my react popup, i then send the code to instagrams api for oatuh/access_token but im getting the following error:
Error validating verification code. Please make sure your redirect_uri is identical to the one you used in the OAuth dialog request
Im running localhost:3000 as https with an ssl, i've set the redirecturl in the instagram developer tools to https://localhost:3000/instagram-popup/
the popup is the page I'm, loading to get the access token, it does get the code from the firebase function correctly, but fails the last call... I have lost SO many hours on this issue, if anyone has been in this situation and solved it, or didnt even encounter it but knows what i can do to fix it, i would really appreciate any guidance here
Related
As I'm trying to integrate Linkedin API to get user's email to make a social sign in functionality in my project. Currently my project is working in react.js as frontend and node.js as backend.
I'm working in 'localhost:3000'.
For that I have created a App in Linked Developers section. From that I got my 'Client id' and 'Client Secret' key. And I also selected sign in with linkedin in products. Then I have integrated one package for react which helps me to sign with linkedin process. On clicking of that button it opens a popup which asks for linkedin signin. After that successfull sign in I get a code and state in response. When I enter that code for authorization it shows invalid access token. I tried to hit the API for authorization - "https://www.linkedin.com/oauth/v2/authorization. Then I hit the API - "https://api.linkedin.com/v2/me to get user profile but still getting the issue of "invalid access token".
I have read multiple documents and tried to integrate linkedin API in frontend as well as in backend too. But both side I'm getting error of CORS issue (Cross origin has blocked). or redirect_uri is not as per registered value. (I have entered multiple redirect_uri's in my linkedin app but none of them are working). or access token is not proper.
Please help me in this issue. I'm not getting why I'm having this error. What steps I have to follow Please guide me breifly.
I have tried to hit the API in multiple ways: postman, sample html file through AJAX, in react using its one of package, in php file using AJAX. But same issue in all.
I will ask again. Hope someone who has experienced the same issue offer me some help.
Background: to build a translation app from Swedish to English with ReactApp.
Issue: when access an open URL with axios.get(https://dictapi.lexicala.com/test), I am able to get data, but if replace with axios.get(https://dictapi.lexicala.com/search?source=global&language=sv&text=${keyWord}), resulted in GET https://dictapi.lexicala.com/search?source=global&language=sv&text=asdf 401
I suppose I need to find a way to embed my user credentials for api provider in my ReactApp code, everytime before use axios.get(https://dictapi.lexicala.com/search?source=global&language=sv&text=${keyWord}), I should make a login act to this api server. Because, I can access api server with URL in chrome, e.g. https://dictapi.lexicala.com/search?source=global&language=es&text=azul due to the fact chrome saved my user credentials.
Please indicate how to search the right question for sovling this problem? I am not expert with ReactJS and neither am I an English native speaker. What techniques should I refer to ?
The question is not related to React. It's related to a network call.
Looking at https://dictapi.lexicala.com looks like it requires a basic auth.
So probably what do you want to check is that question: How to send Basic Auth with axios
I haven't signed up for the service so I cant analyse the API, but I imagine you're assigned an API key - you'll want to either send this via url parameters or headers, depending on how the api works. These are both pretty easy to do with axios basic auth.
I hope you are all doing good,
I have a question that I've been stuck on for the past couple of days.
I am building a website with React that uses AWS-Amplify for user authentications (For users on the Cognito AWS database).
I am working on the Log-in and Sign-up page, and it's working fine when using Chrome, but whenever I am using Firefox there is an issue (Specifically the Log-in).
Problem: There is a part in the JS code that uses the Auth.signin() function from the aws-amplify extension. This function takes in the username and password and returns if the user is authenticated or not. However, when using Firefox, this function gets timed-out, as if the browser can't get the response from the server. Here is a screenshot of the console:
Seems like the response is 403 but I am guessing it's because of the time-out.
(The try/catch doesn't catch anything because it looks as if the page freezes)
I hope I made it clear, and thank you for your time reading everything!
Do your request headers/body contain the correct username and password for the user in Firefox, and is it sending the request to the same endpoint as in Chrome? The 403 code makes me think that the endpoint is malformed on the Firefox request. Finally, is it sending with SRP_AUTH or USER_PASSWORD_AUTH?
Also, since you're using React with Cognito+Amplify for auth*, you might want to consider using the withAuthenticator higher-order-component provided by aws-amplify-react and styling it to your needs. Then you won't need to maintain your own login logic, won't need to worry about fixing it yourself if a browser change breaks your code, etc.
I'm studying about ReactJS and during my research I got stuck in middle of this untraceable issue. The idea is to present information on browser screen fetched from Database. I've chosen WebAPI to serve as a channel for communicating with database. The API implementation is working as expected, I tested it using Postman.
But I'm encountering the subjected error when I try to access API through Reducer (React-Redux implementation), please refer below screenshot.
It seems to me a CORS (Cross-Origin Resource Sharing) issue, as both API & ReactJS app running on localhost using different ports, but I'm not sure. In either case, please help me get to the solution.
When I test the setup on my laptop Chrome browser everything works just fine using both sameWindow and newWindow: I am able to login though for example Facebook and the user is authorized and can use my app.
However, when I try to deploy the app to android and use the inAppBrowser things break. When selecting the 'login through FB' button in my app I can see the inAppBrowser frame come up with the Facebook mobile site asking to login. When I inspect that specific window through Chrome inspect, I can see that the callback from FB coming in to omniauth on my server including state and code in the querystring:
https://<app>.herokuapp.com/omniauth/facebook/callback?code=<code>&state=<state>
This request receives a 302 redirect to the following URL:
https://<app>.herokuapp.com/api/v1/auth/facebook/callback
This follow-up request receives a 200 response. So far it all seems fine and the inAppBrowser window closes, we get back to my mobile app and I see the ng-token-auth "auth:login-success" event passing by.
However, any subsequent API requests to my server receive a 401 Not Authorized response. When I look at the request headers of those API requests I don't see any of the headers that Chrome on my laptop is sending to the server such as: access-token, client, expiry, token-type and uid.
I would be very grateful for any advice on where to look or what I am missing here.
Thanks!
Turns out that when working with ionic and I assume it is the same with cordova, storing the tokens according to default behavior in the cookie does not work. However, once you configure it to work with localStorage it works great!
For more info see this issue I opened at the GitHub project.