Chrome extension Oauth2 authentication and verification issue - google-chrome-extension

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!

Related

How to fill login prompt with Webdriver IO?

I'm working on a CLI with OCLIF. In one of the commands, I need to simulate a couple of clicks on a web page (using the WebdriverIO framework for that). Before you're able to reach the desired page, there is a redirect to a page with a login prompt. When I use WebdriverIO methods related to alerts such as browser.getAlertText(), browser.sendAlertText() or browser.acceptAlert, I always get the error no such alert.
As an alternative, I tried to get the URL when I am on the page that shows the login prompt. With the URL, I wanted to do something like browser.url(https://<username>:<password>#<url>) to circumvent the prompt. However, browser.url() returns chrome-error://chromewebdata/ as URL when I'm on that page. I guess because the focus is on the prompt and that doesn't have an URL. I also don't know the URL before I land on that page. When being redirected, a query string parameter containing a token is added to the URL that I need.
A screenshot of the prompt:
Is it possible to handle this scenario with WebdriverIO? And if so, how?
You are on the right track, probably there are some fine-tunings that you need to address to get it working.
First off, regarding the chrome-error://chromewebdata errors, quoting Chrome DOCs:
If you see errors with a location like chrome-error://chromewebdata/
in the error stack, these errors are not from the extension or from
your app - they are usually a sign that Chrome was not able to load
your app.
When you see these errors, first check whether Chrome was able to load
your app. Does Chrome say "This site can't be reached" or something
similar? You must start your own server to run your app. Double-check
that your server is running, and that the url and port are configured
correctly.
A lot of words that sum up to: Chrome couldn't load the URL you used inside the browser.url() command.
I tried myself on The Internet - Basic Auth page. It worked like a charm.
URL without basic auth credentials:
URL WITH basic auth credentials:
Code used:
it('Bypass HTTP basic auth', () => {
browser.url('https://admin:admin#the-internet.herokuapp.com/basic_auth');
browser.waitForReadyState('complete');
const banner = $('div.example p').getText().trim();
expect(banner).to.equal('Congratulations! You must have the proper credentials.');
});
What I'd do is manually go through each step, trying to emulate the same flow in the script you're using. From history I can tell you, I dealt with some HTTP web-apps that required a refresh after issuing the basic auth browser.url() call.
Another way to tackle this is to make use of some custom browser profiles (Firefox | Chrome) . I know I wrote a tutorial on it somewhere on SO, but I'm too lazy to find it. I reference a similar post here.
Short story, manually complete the basic auth flow (logging in with credentials) in an incognito window (as to isolate the configurations). Open chrome://version/ in another tab of that session and store the contents of the Profile Path. That folder in going to keep all your sessions & preserve cookies and other browser data.
Lastly, in your currentCapabilities, update the browser-specific options to start the sessions with a custom profile, via the '--user-data-dir=/path/to/your/custom/profile. It should look something like this:
'goog:chromeOptions': {
args: [
'--user-data-dir=/Users/iamdanchiv/Desktop/scoped_dir18256_17319',
],
}
Good luck!

Spotify API Token Scope Issue

I have been at this for sometime now and wanted to see if anyone had and idea of what I could be doing wrong. What I am trying to do is add a song to a playlist using the provided Spotify Web APIs. According to the documentation on this https://developer.spotify.com/documentation/web-api/reference/playlists/add-tracks-to-playlist/ I need to establish the scope of the user.
"adding tracks to the current user’s private playlist (including collaborative playlists) requires the playlist-modify-private scope" I have created the playlist as collaborative and I am using the login credentials of my personal account to reach this playlist I created. all this is under the same login.
What I am finding is that my scope is not getting added to my token on my call for my token causes a 403 error when I try to add the song.
Here is what that call looks like
https://accounts.spotify.com/authorize/?client_id=mynumber&response_type=code&scope=playlist-modify-private&redirect_uri=http:%2F%2Flocalhost:55141/Home/GetToken/
here are the docs on using authorization to get the correct token.
https://accounts.spotify.com/authorize/?client_id=894400c20b884591a05a8f2432cca4f0&response_type=code&scope=playlist-modify-private&redirect_uri=http:%2F%2Flocalhost:55141/Home/GetToken/
further more if I go into the dev support here
https://developer.spotify.com/documentation/web-api/reference/playlists/add-tracks-to-playlist/
and click the green try button and then request a new token it works.
Bottom line some how my request is not taking my scope request. Any Ideas?
Thanks
To get the token with a specific scope you need to go to the authorize endpoint and get the code. The code is what you want to get to be able http post to the endpoint https://accounts.spotify.com/api/token and get a token with your desired scopes. You can simply get the code by pasting a url like this in your browser...
https://accounts.spotify.com/authorize?client_id=<client_id>&response_type=code&scope=streaming%20user-read-email%20user-read-private&redirect_uri=<redirect_uri>
Only add %20 in between scopes if you have multiple ones
You will then be sent to spotify's website and they'll verify you want to do this. Once you verify it your browser will redirect you to what you set the redirect_uri to be in the url above. At the end of the url that you are sent to, you should be able to see the parameter name code with the code value assigned to it. You then get that code and put it in your http post body params to the https://accounts.spotify.com/api/token endpoint. Make sure you accurately follow the query params requirements in your post method.
An example of the post in python using the requests library:
authorization = requests.post(
"https://accounts.spotify.com/api/token",
auth=(client_id, client_secret),
data={
"grant_type": "authorization_code",
"code": <code>,
"redirect_uri": <redirect_uri>
},
)
authorization_JSON = authorization.json()
return authorization_JSON["access_token"]
In the end you should get a json that shows the scopes you set a long with a refresh the token later on to make more requests.
I know this answer is quite late but I was experiencing the same issue as well which is how I came across this question. I hope this helps anyone that sees this at a later date.
Source: https://developer.spotify.com/documentation/general/guides/authorization-guide/#client-credentials-flow

chrome extension call to gmail api

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.

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.

Instagram-Node calls keep returning "access code invalid"

I recently opened a new Instagram account and registered a new client. The information I received back from Instagram included the client_id and the client_secret.
I will only run the script on my machine, and be the sole user of the project, so I don't need any user to "log in". But for some reason, whenever I try to make any calls to the Instagram-Node API, it returns the following error:
{ [Error: OAuthAccessTokenException: The access_token provided is invalid.]
code: 400,
error_type: 'OAuthAccessTokenException',
error_message: 'The access_token provided is invalid.',
retry: [Function] }
That's weird to me, because I have an identical setup with an older Instagram account and different credentials, that seem to be working just fine. Then again, that was before November, when Instagram changed some of their API policies.
I use the Instagram-Node like so:
ig.use({
client_id: "dxxxxxxxxxxxxxxxxxxxxxxx2",
client_secret: "4b0xaxaxaxaxaxaxaxaxaxaxa53c03100e4"
});
and make my first call like this:
ig.user_media_recent(user.toString(), options,...
I tried handling the authentication by rerouting my request through the redirect_uri as shown in the Instagram-Node documentation, but even then, all of my requests are unsigned, so it's not clear to me what I would do with the access_token any way.
Any help would be much appreciated!
Okay, the problem is a misunderstanding of the limits of the Sandbox Mode, they essentially make it impossible to look up media from users who are not in your sandbox.
The documentation here says:
The first point is important and it means that the API behaves as if
the only users on Instagram were your sandbox users, and the only
media ever posted were the last 20 for each of these users.
I was trying to find media from users who are not in my sandbox, and so I received an error. The reason that my previous credentials weren't affected is because they are still grandfathered into the grace period, June 2016, at which time they will expire as well. Thanks!
I ran into this same issue. If your app is using oauth, you will cause Instagram to spaz out if you pass the client_secret and client_id stuff again. I had to take these out of my code. So I just pass the access_token now.
ig.use({ access_token: token });
ig.user_media_recent(config.userid, { count: 20 }, function(err, medias, pagination, remaining, limit) {
Were my equivalant statements.
EDIT: I forget to mention. This is after a cycle of these for those confused:
api.authorize_user
api.get_authorization_url

Resources