I'm using google drive javascript api(v2) in my reactjs project.
And I'm using this function to get files from google drive.
this.getProjectObjects = function(query, callback)
{
var request = gapi.client.drive.files.list({
corpus : 'DEFAULT',
q : query,
fields : 'items(id,description,title,properties)'
});
request.then(function(resp) {
callback(resp.result.items)
}, function(err) {
console.log(err)
});
};
After authenticate the user, I can get the files using this function.
But, when I navigate to other react component, it's no longer working.
There is no response or error, api just hangs.
Silly thing is when I refresh page, it's working. Again if I navigate to other component, it's not working.
I'm using the same query, nothing changed during navigating.
Anyone have any ideas what the issue could be?
Thanks
You may want to check the Chrome devTools to see if you are encountering any problem when switching pages. Also in the documentation - Getting Started:
There are several ways to use the JavaScript client library to make API requests, but they all follow the same basic pattern:
The application loads the JavaScript client library.
The application initializes the library with API key, OAuth client ID, and API Discovery Document(s).
The application sends a request and processes the response.
The following sections show 3 common ways of using the JavaScript client library.
Option 1: Load the API discovery document, then assemble the request.
Option 2: Use gapi.client.request
Option 3: Use CORS
See the sample for code implementation on effectively loading and making API calls.
Hope this helps.
Related
i am Learning Python and at the moment i am experimenting with the request Module.
What i did so far:
This is the API Documentation for the Endpoint i used:
https://trackapi.nutritionix.com/docs/#/default/post_v2_natural_exercise
And this is the associated Python Code:
EXERCISES_ENDPOINT = "https://trackapi.nutritionix.com/v2/natural/exercise"
header = {
"x-app-id": APP_ID,
"x-app-key": API_KEY
}
body = {
"query": "Ran 2 miles and walked for 3Km."
}
response = requests.post(url=EXERCISES_ENDPOINT, headers=header, json=body)
The corresponding http Request URL should be:
https://trackapi.nutritionix.com/v2/natural/exercise?Ran%202%20miles%20and%20walked%20%20for%203Km.
My Problem is as follows:
In Python the code ist working perfectly fine and my response is as expected
If i use Postman, this works fine too, because in both -Python and Postman - i can specify my Request as a POST Method
But if i use the URL in my MS Edge Browser (and Chrome too) i get an Error: Cannot GET /v2/natural/exercise
The Header information are ok, because i told the Browser them per "ModHeader" Extension.
But why is my Browser doing a GET and not a POST and how can i change this with the developemant tools from MS Edge Browser.
Important for my learning is to know why the Browser do a GET??
Is the Browser only able to do GET in generel and the other Methods (POST, PUT, DELETE) are not possible in this way. But that makes no sense for me :)
Thanks a lot in advance
But why is my Browser doing a GET and not a POST
Presumably because you are trying the address into the address bar of the browser.
That is designed to make a GET request because there is nothing in the UI designed to collect any of the data needed to make another request type.
The usual way to make a POST request would be to provide a user interface for it in the form of an HTML <form>.
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
I am completely stuck trying to figure out how to allow users to sign up a "Connected Account" via Stripe OAuth steps for my website. (I'm building a marketplace website with React front-end, Firebase back-end, and Stripe to handle payments).
Some guides I have been trying to use to help guide me are as follows:
(1) https://stripe.com/docs/connect/collect-then-transfer-guide : I am stuck on this guide at step 2.2. However this guide is not as helpful since I am using Firebase as my backend.
(2) https://medium.com/#c.nwaugha/integrate-stripe-payment-with-firebase-cloud-functions-part-2-e381babd39bc : I am stuck on this guide at around 1/3rd up the page (see yellow text of image below)
Unfortunately I'm not sure what my Stripe Redirect URI should be. I currently have it set to something similiar to "https:MyWebsiteName.com/oauth_redirect" on my Stripe settings, however this link doesn't have a React front-end yet and am not sure what code it should contain.
Simply put, how can I continue the OAuth setup process and pull the data from a returned URL. Any clarity is greatly appreciated. (PS: I did look into "Regex" as the guide suggests, but am unable to find anything that appears to be useful for this case).
UPDATE and PARSING URL SOLUTION
Thanks to hmunoz's advice, I was able to parse through the returned URL and capture the stripe OAuth Authorization Code in a string. (Please see the code below).
This is returned when this page "https://.../oauth_return" URI is reached after the user finishes the OAuth forms on stripe.
import React from 'react';
import queryString from 'query-string'; //this is a 3rd party library that is used to parse through the Redirect URL returned from Stripe.
const oauth_redirect = () => {
//Parsing over URL
const value=queryString.parse(window.location.search);
//Retrieves the "code" value.
const code=value.code;
console.log('code:', code)
//Retrieves the "state" value.
const state=value.state;
console.log('state:', state)
... //(I'm not sure how to pass these strings into a Firebase HTTP function).
}
export default (oauth_redirect)
CURRENT PROBLEM; BUILDING FIREBASE HTTP FUNCTION USING JAVASCRIPT
I am trying to build a Firebase HTTP function that uses the POST method, to return this Authorization Code. I have a function inside "index.js" of the functions/src directory of this react website. Unfortunately all of the guides on this subject have the firebase function is .typescript and I am using .javascript. Any clarity on how build this HTTP function in .javascript would be greatly appreciated!!!
Please note: I clarified the question a bit in the following post :Returning Authorization Code to Stripe using Firebase HTTP Function (Firebase, Stripe OAuth, React (JSX) frontend)
The redirect_uri in this case is the final page that you want your user to land on, once they have authenticated via Stripe.
This would have to be a web page of yours, say https://your-website.com/oauth-complete
Once on this page, your React code needs to grab the URL parameter like code: ac_123 which is the authorization code, and call a Firebase function with that authorization code.
Your Firebase function will complete the OAuth connection to this Connect account by consuming the OAuth token.
These two steps are described here: https://stripe.com/docs/connect/oauth-standard-accounts#redirected
Not sure if I've arrived too late. You can start simple uncommeting the example from the index.js in /functions.
You can test running firebase emulators:start from your terminal.
It might start in the localhost:5001/project-name/zone/newFunction
exports.newFunction = functions.https.onRequest( (req, res) => {
// your logic code here
}
I am working on a project in which we have to include cookies for each service call from frontend (ReactJs) due to authentication. However, all our service calls are implemented by fetch API. Because fetch API does not include cookies by default, we have to add the configuration "credentials: 'include'" to where fetch API is used. It is not maintainable to manually do it everywhere in our code, so we decide to use fetch-interceptor plug in. My code looks like
fetchIntercept.register({
request: function (url, config) {
config.credentials = 'include';
return [url, config];
},
...
};
However, all fetch functions stop working after the change. Here is the message we found in Chrome developer console:
Uncaught (in promise) Error: Failed to fetch login user info:
TypeError: Cannot set property 'credentials' of undefined
I searched online about how to set configuration in fetch-interceptor, but few examples are available. Could someone provide us an example how to set configuration correctly? Thanks.
I see this hasn't been answered in 2 years. Hopefully you have solved the problem by now. If not, just ensure there is a config object associated with every fetch call, a simple
{
method: "GET"
}
will do.
I am creating an Ionic app which has multiple 3rd party integration. I already have a java server which does the oauth2 authentication for the 3rd parties and redirect to the callback url in the server itself.
Now my task is to open back the app page after the server callback url is done.
I have tried the following method:
monitoring the url changes in app using ionic and redirect after the successful callback.
Which is the best way to handle this sitn.
Thanks.
Frankly, I haven't done anything like this. But to my mind, you can check ngcordova oauth implementation for ideas.
var browserRef = window.open(your_url);
browserRef.addEventListener("loadstart", function(event) {
//your code
});
browserRef.addEventListener('exit', function(event) {
deferred.reject("The sign in flow was canceled");
});
Check oauth.js source for more details.
Moreover, you can find the sample of using this implementation on this page.
http://mcgivery.com/using-custom-url-schemes-ionic-framework-app/
Above link may help you. If I am thinking correctly what you want?