How to use Chrome extension get Laravel passport token? - javascript

I'm working on using Chrome extension access Laravel passport API. Currently, the Laravel passport API is setup and working. I tried to use chrome.identity.launchWebAuthFlow to get passport token but not working. There is an example provided by Google, it is different from my use case.
I have two questions:
According to the Laravel document, the first step is request an authorization code, the API end point is /oauth/authorize. What the redirect_uri should be since it is a chrome extension but not a website?
After the user approve the request, I'm using chrome.identity.launchWebAuthFlow to get the access token from Passport. In laravel it is a POST request, the end point is /oauth/token. But I tried chrome.identity.launchWebAuthFlow, it is a GET request.
I can make this whole process working using PHP but not Chrome Extension. Any suggestions?

As per the launchWebAuthFlow docs:
When the provider redirects to a URL matching the pattern https://app-id.chromiumapp.org/*, the window will close, and the final redirect URL will be passed to the callback function.
As an example, you could use the following code:
let redirectUrl = chrome.identity.getRedirectURL('redirect');
chrome.identity.launchWebAuthFlow({
url: `https://my.app.domain.com/oauth/authorize?client_id=xxx&response_type=code&scope=&redirect_uri=${redirectUrl}`
}, (redirectUrl) => {
console.log(redirectUrl) // Redirect URL with oauth query params added
})

Related

How to get around auth level when testing API on laravel project?

I am using the basic Auth from laravel that you get from running the following command.
php artisan make:auth
I have an API written so that the backend on the server can update/create services and statuses. The issue i'm running into is that the Admin also has a UI on the web app and can create a service, or update its status manually. Therefore, I have an Auth level on the methods where you have to be logged in to use them.
Now when I call the method in postman it redirects me to the login page, I was wondering if there was a way around this Auth level strictly for an API?
I was told of a way to do pre-request scripts directly in postman but i'm fairly lost when it comes to the whole java script part of that and feel like there is an easier way to do it. I also already tried to do 'basic auth' with the username and password, it didnt seem to work though.
Thank you for the help in advance!
Edit: Here is the screenshot from my header.
I am presuming if you have the API in place you have an api_token set for the specific user. You can use that inside Postman in one of two ways.
You will goto the Headers tab and add:
Key: Authorization
Value: Bearer API_TOKEN_VALUE
Edited: Added the screenshot of postman
You can amend the url for the request and add the token:
url_to_api_endpoint?api_token=API_TOKEN_VALUE
On the api routes if you have ->middleware('auth:api') Laravel will read the authorization token from the header or using the query parameter and check it to the database value.
Adding the api_token to the user table
If you don't have an api_token field in your user table then add one. It is not the same as remember_token, they are different. So add to your user migration the following:
$table->string('api_token', 60)->unique();
You will need to update the users api_token using something like the following:
$user = User::find(1);
$user->update(['api_token' => str_random(60)]);
That 60 character string you will use where I put VALUE_OF_TOKEN_FROM_DB

Facebook login: Please make sure your redirect_uri is identical to the one you used in the OAuth dialog

So I'm out of ideas, I don't know what to check or debug anymore, but on the exception I get this:
string(188203) "Facebook\FacebookAuthorizationException Object
(
[statusCode:Facebook\FacebookRequestException:private] => 400
[rawResponse:Facebook\FacebookRequestException:private] => {"error":{"message":"Error validating verification code. Please make sure your redirect_uri is identical to the one you used in the OAuth dialog request","type":"OAuthException","code":100,"fbtrace_id":"DqCCKoiN0r4"}}
[responseData:Facebook\FacebookRequestException:private] => Array
(
[error] => Array
(
[message] => Error validating verification code. Please make sure your redirect_uri is identical to the one you used in the OAuth dialog request
[type] => OAuthException
[code] => 100
[fbtrace_id] => DqCCKoiN0r4
)
)
[message:protected] => Error validating verification code. Please make sure your redirect_uri is identical to the one you used in the OAuth dialog request
[string:Exception:private] =>
[code:protected] => 100
You can set redirect URI in
Go to https://developers.facebook.com/apps
Select your app.
Under Products > Facebook Login > Settings
Enable Embedded Browser OAuth Login
Set Valid OAuth Redirect URIs
You can Validate Redirect URI with Redirect URI Validator.
You can only use https URIs.
Also set App Domain in Settings > Basic > App Domains
Try / at the end of redirect URI
In my case I was using https://localhost everywhere but somehow when getting access token specifying https://localhost/ worked.
As absurd as it sounds, verify you're using the correct app_secret.
Facebook will give you this instead of just saying "invalid secret" in the response
I believed you have used different redirect_uri in your facebook app settings and Oauth API code. thats why you got this error.
For facebook login you must set same redirect_uri into both place.
Make sure to have it exactly as in your FB settings.
For me, I had https://localhost:3000/ in my settings but https://localhost:3000 in my get access token call and this was the source of the error!
I had the same issue and non of the answers helped me, then I tried to make another Facebook app, and it solved my issue!
I mean you have to use one application for Facebook OAuth and make another to use for Instagram oauth. seems Facebook has an issue with using both functionalities in one app.
After engaging in the problem for more than a day, found my mistake to be one '/' (slash) in app url at the end.
incase anyone else is having this issue and can't figure it out, your redirect_uri needs to have a "/" at the end. Facebook adds one automatically when you put your redirect_uri in the app settings. If you don't add the "/" in your code when you're trying to get the token, it will give you this error. That's what was going on with mine.
Ex: redirect_uri = "https://myserver.com:4429"
should be
redirect_uri = "https://myserver.com:4429/"
It means the redirect URI you pass to FB (usually in the query string) does not match what you have set in the app settings.
It can also be because of multiple slashes, for ex:
https://yoursite.com/auth/facebook/callback -> that's the one you added in the app settings
https://yoursite.com//auth/facebook/callback -> that's what you actually send
For me, it worked by replacing
callbackURL: "api/auth/facebook/redirect/",
to
callbackURL: "http://localhost:3000/api/auth/facebook/redirect/",
in the new FacebookStrategy
Was stuck in the same problem for a long time .
You will get this error when the redirect url is mismatching or does not exist or is wrongly formatted in the field (additional spaces or // ) , either the facebook app setting or while you are calling the API .
Solution
What worked for me was when ever you add a redirect URl you can check it in the valid redirect auth field uf it doesnot show valid when pressed check than that url is not the correct one
I finally managed to get this to work, in my case, I was using the Instagram Oauth API but I believe the logic is the same and you can find the complete flow here : https://developers.facebook.com/docs/instagram-basic-display-api/guides/getting-access-tokens-and-permissions.
So here is the basic flow :
Generate an authorization which will provide you with a code (the user will get redirected to Instagram in order to accept/deny the requested authorizations)
This code can be used in order to generate a 'short lived access token' and this is where the troubles arise.
For the first point, you need to provide Instagram with a redirect_uri. When you want to complete the second point, you'll need to make a POST request to Instagram, with a redirect_uri as well.
I thought that both redirect_uri's could be different between the 2 steps, but they don't. And this is simply where my error was : I wanted something like that for the first step : https://my.domain/short-lived-token and something like this for the 2nd : https://my.domain/short-lived-token but when I tried both with https://my.domain/generate-access-token, for instance, it worked.
Hope it helps you guys because I couldn't find anything on the internet.
LATEST FIX:
After sending 3 hours, I found a solution to this error.
This happened due to 2 reasons.
As we can see in response. Just Make sure you set the same URL in the developer portal and code
IMP: FACEBOOK needs to change the API response. 2nd reason is that you make sure that using Instagram App Secret and app ID. I was getting the same error bcoz I was using the wrong app secret.
Must Follow: Official FB Docs

Facebook auth api callback access token

I am accessing facebook's api via this url as I need to do manual login for the users:
https://www.facebook.com/dialog/oauth?client_id=123456&scope=publish_actions&redirect_uri=http://localhost:4004/auth/callback
I get the popup for authentication without a problem, give fb access and then my callback url is accessed with the url:
http://localhost:4004/?login#_=_
Normally I would expect an access token so I could post on the users behalf.
I'm writing my code in node and using the node npm fb package to help me post
Turns out you also need to tell facebook what you would like returned add this as one of the query parameters:
response_type=token
Then you'll get back the token in the url
complete url
https://www.facebook.com/dialog/oauth?client_id=123456&scope=publish_actions&redirect_uri=http://localhost:4004/auth/callback&response_type=token

Facebook graph api call to get app access token returns "unknown error"

I am building a web app integrating with Facebook. I have on Facebook an app id and app secret already.
I'd like to use javascript to retrieve my app's access token to make further app-to-user app requests. I'm following the instructions here
However, I could not make my FB.api call working. I tried
FB.api('https://graph.facebook.com/oauth/access_token','get',
{client_id:'XXXXX', client_secret:'XXXXX',grant_type:'client_credentials'},
function(response) {
alert(JSON.stringify(response));
});
and
FB.api("/oauth/access_token?client_id=XXXXXX" +
"&client_secret=XXXXXXXX&grant_type=client_credentials",
function(response) {
alert(JSON.stringify(response));
});
but only to get {"error":{"type":"http","message":"unknown error"}}
Do I use FB.api incorrectly? At this time, I could not find further documentation showing what I did wrong.
On the other hand, I can manually request it from my browser with the url like:
https://graph.facebook.com/oauth/access_token?client_id=XXXXX&client_secret=XXXXXX&grant_type=client_credentials
So, what is missing in my code? Thanks a lot for your help.
you dont need to expose your app secret.
Instead you can use the app token directly in your calls (App token does not expire until you reset the secret key).
Facebook Documentation Reference link access tokens and types
Have Fun!!!
Regards,
hbk

Adding a test user in graph api (javascript sdk)

I am trying to add a couple to test users to an app I'm developing using google app engine and the javascript sdk. Following this link:, I tried this code:
FB.api ('/app_id/accounts/test-users', 'post', {installed:'true', permissions:'read_stream'}, function (response) {
alert (response.id);
});
(app_id was changed to the App ID as obtained in http://www.facebook.com/developers/apps.php)
But I get a popup "undefined". What is wrong with this code? I could not find any example for the javascript sdk.
As per the same facebook help page, response is supposed to be:
{
"id": "1231....",
"access_token":"1223134..." ,
"login_url":"https://www.facebook.com/platform/test_account.."
}
BTW, if I log in as myself,
FB.api('/me', function(user) {
welcomeMsg (user);
});
works just fine, so it's not a problem with app activation.
I don't think it's possible to perform this type of task using the Javascript SDK, which is intended to make calls on behalf of a user, not an app. For this type of call, it's necessary to authenticate as the app, and for that you need the app OAuth token and secret, which aren't available via Javascript (nor should they be, for security reasons). So the best solution here is to make this call serverside. To do so, you should follow the "App Login" instructions here to get an app access token, and then pass that token in to the /app_id/accounts/test-users API call (as the "access_token" param)

Categories

Resources