chrome extension call to gmail api - google-chrome-extension

I am really new creating chrome extensions. I am trying to use Gmail API in my extension to get the Thread Id from sent email folder. I have used this tutorial:
https://medium.com/streak-developer-blog/how-to-use-the-gmail-api-in-a-chrome-extension-a272b2405b57
When I use the function getThreads(query, labels),
https://gist.github.com/omarstreak/7908035c91927abfef59
I did not get nothing. Also when I review the background console appear this error:
Unchecked runtime.lastError while running identity.getAuthToken: OAuth2 request failed: Service responded with error: 'bad client id: {0}'
I have created my own client_id and I put it in my manifest.
"oauth2": {
"client_id": "27599747390-.................apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/gmail.modify"
]
},
Have someone some tutorial or sample that works about using Gmail API in chrome extensions?.

Yes, there is actually a sample in the documentation. See this method if your purpose is to get a specified thread. Also to guide you accordingly, here is a github post to help you more on chrome extension essentials.

Related

How do I invoke Link Update Mode in the Plaid Sandbox Quickstart app (node.js)?

I have the Plaid Quickstart (node) up and running.
I successfully logged in to one of the sandbox institutions (First Platypus Bank) using the sandbox credentials and got the access_token which it generated.
Per the Link Update Mode docs (https://plaid.com/docs/link/update-mode/), you should be able to "force a given Item into an ITEM_LOGIN_REQUIRED state".
From the docs I linked to above...
Update mode can be tested in the Sandbox using the /sandbox/item/reset_login endpoint, which will force a given Item into an ITEM_LOGIN_REQUIRED state.
I used Postman (in the Sandbox Public environment) to send an API call to this endpoint, https://sandbox.plaid.com/sandbox/item/reset_login, to force the ITEM_LOGIN_REQUIRED state.
This is the body sent with the API call...
{
"client_id": "{{client_id}}",
"secret": "{{secret_key}}",
"client_name": "Insert Client name here",
"country_codes": ["US"],
"language": "en",
"user": {
"client_user_id": "unique_user_id"
},
"access_token": "{{access_token}}"
}
This is the response I got back...
{
"expiration": "2021-02-13T04:13:12Z",
"link_token": "link-sandbox-7d82e9b8-b8a7-4977-9c20-aadbc82ec050",
"request_id": "eE56J8f5XJKpS6L"
}
...which is what I expected.
I then went back in to the Quickstart app and logged in to the "First Platypus Bank" again expecting to be prompted for the MFA challenges, but, instead, it just created a new access_token.
So, how to I get the Plaid Quickstart app into Link Update mode?
Update:
Per Alex's question, here is an image showing the Postman call I made. He's correct, it was a /link/token/create call. What's confusing it that it's labeled Create Link Token - Update Mode.
Update 2:
Here's the /sandbox/item/reset_login call and response. There's no link_token included in the response.
Update 3:
Between Alex's help and some help from Plaid support, I got this working.
I was putting the link token in the wrong place.
For anyone seeing this in the future, here are the steps you need to follow to get the node quickstart app into Link Update Mode.
You can also watch this video to see a demo of the process; HOWEVER, note that in the video, I put the link_token in the wrong place. The instructions below show how to put it in the correct place.
Get the access_token for the institution you want to get into Link Update Mode (this assumes you have the quickstart app installed, up and running. See... https://plaid.com/docs/quickstart/)
Start the quickstart backend (/quickstart/node/start.sh)
Start the quickstart frontend (cd /quickstart/frontend; npm start;)
Once the frontend fires up on port 3000 in your browser, click the "Launch Link" button then click "Continue".
Search for the institution (e.g., First Platypus Bank, First Gingham Credit Union...if in sandbox mode. or your own institution if in dev mode)
Enter your credentials (user_good/pass_good ...if in sandbox mode)
Copy the access_token
Close the Plaid browser tab
In Postman (to set this up, see... https://github.com/plaid/plaid-postman), enter the access token you just copied into the access_token variable (See the first screenshot above. Click on the icon near the upper right-hand side that looks like an eye then scroll down to access_token and enter it.)
Run the /sandbox/item/reset_login endpoint. It's labeled "Simulate ITEM_LOGIN_REQUIRED [Sandbox only]" in Postman. The request body should look like second screenshot above. Once you Send the request, the response body should show "reset_login": true. Now the Plaid Item (i.e., the institution) is in ITEM_LOGIN_REQUIRED mode.
Run the /link/token/create endpoint. It's labeled "Create Link Token - Update Mode" in Postman. The request body should look like the first screenshot above. Once you Send the request, the response body should give you a link_token. Copy it for the next step.
Put the link_token in the Plaid quickstart app.
On line 23 in /quickstart/frontend/src/App.tsx, replace data.link_token with your link_token. So this dispatch({ type: "SET_STATE", state: { linkToken: data.link_token } }); becomes this dispatch({ type: "SET_STATE", state: { linkToken: "link-sandbox-704ef648-2acd-44a2-867b-ea1258e9205c" } }); (Use your own link_token, of course, and don't forget the quotes around your link_token.)
Restart the backend and frontend. When you launch Link, it should now be in Link Update Mode.
The process you describe sounds right, but the API request and response bodies in your post are the request and response for /link/token/create, not /sandbox/item/reset_login. Can you verify that you didn't accidentally call /link/token/create instead of calling /sandbox/item/reset_login?

Chrome extension Oauth2 authentication and verification issue

I am developing chrome extension that uses several google API services. I've set up Oauth2 working code and authentication process works fine. However, I am getting "unverified app" screen and would like to get rid of that.
So, I went through google's verification process several times and I keep getting declined with explanation that I need to verify domain ownership of chromiumapp.org - which is I don't understand. Here's why:
By reading google's documentation about that topic I learned that I need to use https://.chromiumapp.org endpoint for webAuthFlow redirect url, which I did and everything worked fine. But now google wants me to prove my ownership of chromiumapp.org, which is unclear to me...
Here's the process of setting chromiumapp domain url as redirect url:
First I added https://my-extension-id.chromiumapp.org to Authorised redirect URIs section in google developers console.
Then, google notified me that chromiumapp.org domain needs to be added to Authorised domains section first (under consent screen tab) in order to be able to add it toAuthorised redirect URIs section. So, I added chromiumapp.org to Authorised domains
And now, when I apply for verification process, google wants me to verify my ownership of chromiumapp.org
Although I don't think that webAuthFlow code is relevant here, but here it is, just in case:
chrome.identity.launchWebAuthFlow(
{
"url": "https://accounts.google.com/o/oauth2/auth?" +
$.param({
"client_id": settings.CLIENT_ID,
"scope": settings.SCOPE,
"redirect_uri": getRedirectUri(),
"response_type": "code",
"access_type": "offline",
"login_hint": "",
"prompt": "consent select_account"
}),
"interactive": true
},
callback
);
My question is:
What am I doing wrong here?
Thanks!

Chrome Extension identity: OAuth2 request failed: Service responded with error: 'bad request'

I followed https://developer.chrome.com/extensions/tut_oauth exactly step by step but I am stuck at
https://developer.chrome.com/extensions/tut_oauth#identity_permission
where after I execute my extension, instead of getting the token, I get the error:
Unchecked runtime.lastError while running identity.getAuthToken:
OAuth2 request failed: Service responded with error: 'bad request'
Please suggest what is the possible cause of this error.
tl;dr
Update the scopes to the following if its empty,
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes":["https://www.googleapis.com/auth/userinfo.email"]
}
People who were following the tutorial on OAuth2: Authenticate Users with Google
If you've landed into this problem, it is probably because it's 2020 and the documentation isn't updated.
The tutorial asks you to,
Include the "oauth2" field in the extension manifest. Place the generated OAuth client ID under "client_id". Include an empty string in "scopes" for now.
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes":[""]
},
...
}
but never updates it before calling the identity API call to fetch the token.
Updating the scopes, with the following should fix the issue,
"scopes": ["https://www.googleapis.com/auth/userinfo.email"]
I think that's because the scope is empty. I was like you follow the article, but found the problem is from the scope area.
I changed the scope as suggested but the problem still persisted. Then I tried not only to reload the extension but also tried to update it and it worked in the end (errors next to Remove button went away and I am able to authenticate).
Honestly, I am not sure if it is the Update that did the magic or change the empty Scope that did the magic but here is an answer from a 2020 July user who got it working. :)
(PS, if you don't have that many Google friends, or your friends who don't bother to have image, likely your code will fail with data.photos[0].url in the next step, you just need to take care of that)

How can I get a token for the Drive API?

I want to implement the Google Drive API to my web application using NodeJS and I'm struggling when I try to get a token via OAuth.
I've copied the code from this guide and run the script using Node and it returns an error in this line:
var redirectUrl = credentials.installed.redirect_uris[0];
Googling around I found that I can set that variable as http://localhost:8080 and set the same value in the Authorized redirect URIs configuration in the Google Developers Console and that error goes away, fine, it works. Now it asks for a code that I should get by using an URL.
https://accounts.google.com/o/oauth2/auth?access_type=offline&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fdrive.metadata.readonly&response_type=code&client_id=CLIENT_ID&redirect_uri=http%3A%2F%2Flocalhost%3A8080
Then I've added the client id and enter to that URL with Chrome and then returns a connection refused error. No clue what to do in here, I searched about my problem and I can't found an answer. By looking at the direction bar in Chrome I see that there's a parameter called code and after it, there's random numbers and letters. Like this:
http://localhost:8080/?code=#/r6ntY87F8DAfhsdfadf78F7D765lJu_Vk-5qhc#
If I add any of these values it returns this error...
Error while trying to retrieve access token { [Error: invalid_request] code: 400 }
Any ideas on what should I do? Thanks.
Did you follow all the directions on the page you indicated, including all of those in Step 1 where you create the credentials in the console and download the JSON for it? There are a few things to note about creating those credentials and the JSON that you get from it:
The steps they give are a little different from what I went through. They're essentially correct, but the "Go to credentials" didn't put me on the page that has the "OAuth Consent Screen" and "Credentials" tabs on the top. I had to click on the "Credentials" left navigation for the project first.
Similarly, on the "Credentials" page, my button was labeled "Create Credentials", not "Add Credentials". But it was a blue button on the top of the page either way.
It is very important that you select "OAuth Client ID" and then Application Type of "Other". This will let you create an OAuth token that runs through an application and not through a server.
Take a look at the client_secret.json file it tells you to download. In there, you should see an entry that looks something like "redirect_uris":["urn:ietf:wg:oauth:2.0:oob","http://localhost"] which is the JSON entry that the line you reported having problems with was looking for.
That "urn:ietf:wg:oauth:2.0:oob" is a magic string that says that you're not going to redirect anywhere as part of the auth stage in your browser, but instead you're going to get back a code on the page that you will enter into the application.
I suspect that the "connection refused" error you're talking about is that you used "http://localhost:8080/" for that value, so it was trying to redirect your browser to an application running on localhost... and I suspect you didn't have anything running there.
The application will prompt you to enter the code, will convert the code into the tokens it needs, and then save the tokens for future use. See the getNewToken() function in the sample code for where and how it does all this.
You need to use this code to exchange for a token. I'm not sure with nodejs how to go about this but in PHP I would post the details to the token exchange url. In javascript you post array would look similar to this ....
var query = {'code': 'the code sent',
'client_id': 'your client id',
'client_secret': 'your client secret',
'redirect_uri': 'your redirect',
'grant_type': 'code' };
Hope this helps
Change redirect uri from http://localhost:8080 to https://localhost:8080.
For this add SSL certificates to your server.

Fetch API not sending session cookies when used inside a Chrome Extension

I'm trying to make a Chrome Extension which scrapes some details from Pull Requests on Github using the Fetch API, and then displays them elsewhere. I'm running into some problems when I try to use this with a non-public repository on Github. I believe this is related to CSRF protection, and the rules that govern Chrome extensions having access to session cookies.
I have the following in my extension's manifest.json:
"content_scripts": [{
"matches": [
"*://github.com/*/*/pulls"
],
"js": ["script/underscore-1.8.3.min.js", "script/content.js"]
}],
"permissions": [
"tabs",
"activeTab",
"*://github.com/*",
"webNavigation"
]
But when I run the following from within my script/content.js:
fetch('/redacted/redacted/pull/4549', {credentials: 'same-origin'}).then((response) => {
return response.text();
}).then((text) => {
// do cool stuff
})
This produces a 404 response from Github. Inspecting this request with Chrome Inspector's network tab, I can see it is not sending my GitHub session header with the request.
If I make the very same request using the Javascript prompt in the Inspector, I can see a 200 response, and I can see that it is sending my session cookies.
My understanding was that specifying the Github domain in my manifest.json would mean my extension would have access to my session data in my content scripts, is this not correct? What should I be doing to make a valid request to this protected content?
According to Chrome blog, to include cookies you need credentials: 'include' instead of credentials: 'same-origin'.
Specifying github in the permissions only gives access to the host, its there to limit damage if the extension/app is compromised by malware (source).
Its not indicated in the content script documentation that session data can be retrieved in content scripts, just their DOMs. I think it would be better if you use and incorporate the official Github API in the chrome extension project you're creating.

Resources