Firebase auth with Facebook OAuth credential (from Google Extension) - javascript

I am just having fun with the new Firebase, but I'm struggling with auth system.
Because I'm trying to login user from options page of google extension, so I can't use signInWithPopup or Redirect method due (some) security reasons.
So I figure out possible solution. From options page I redirect user to my another page, where he can easily login with Firebase (by Facebook provider) - everything is OK - user obtain OAuth FB token and this page send message to extension to cache this token.
There lies the problem.
I have code like this:
firebase.initializeApp(FIREBASE_CONFIG);
var credential = new firebase.auth.FacebookAuthProvider.credential(token);
firebase.auth().signInWithCredential(credential)
.then((data) => {
console.log(data);
})
.catch((err) => {
console.error(err.code);
})
This fire up POST request to https://www.googleapis.com/identitytoolkit/v3/relyingparty/ and in response I can clearly see the error:
message:"INVALID_REQUEST_URI"
This request is fired with requestURI payload, which is in mine situation:
chrome-extension://kefhjfjilmodblnpnekjleceapohasdf/options.html
When I tried to fire this request from terminal with CURL and I faked the requestURI with 'http://localhost' everything is OK and I got correct data.
Do you have any ideas, how can I achieve proper behavior?
Thanks a lot.
P.S: I'm using Firebase.js 3.0.5-rc.2

Related

ebay "errorId": 1100, "longMessage": "Insufficient permissions to fulfill the request."

I managed to set up a developer account to get API responses working on the API explorer. However, I'm trying to connect to Postman and have been getting the following error messages.
I have gotten my user access token as follows:
The Callback URL: I have used the RuName (eBay Redirect URL name)
Auth URL: I have used https://auth.sandbox.ebay.com/oauth2/authorize (https://developer.ebay.com/api-docs/static/oauth-consent-request.html#configure)
Access Token URL: I have used the https://api.sandbox.ebay.com/identity/v1/oauth2/token (https://developer.ebay.com/api-docs/static/oauth-authorization-code-grant.html)
ClientID and Client Password I've used the credentials from my developer account
This returns the following token:
As you can see a USER ACCESS TOKEN.
When I go to use the request in an API put request I always get the following error:
The token seems to be right.
I try the same call in the built in API explorer and it works.
Please could someone advise its driving me crazy, probably something I've done wrong but any ideas?
During Authentication the following happens it prompts me to login and then shares the oath code (it doesn't tell me to accept the application as stated in document not sure why though)

async req to load/render new page

Im working on a project, using firebase auth for login i.e. login with google; if logged in then redirect to /app where real functionalities of webapp exists.
login page js:
document.getElementById('login').addEventListener('click', e => {
var provider = new firebase.auth.GoogleAuthProvider();
firebase.auth()
.signInWithPopup(provider)
.then((result) => {
firebase.auth().currentUser.getIdToken(true).then(function(token) {
// make request to backend to get /app page where main app exists
axios.get('/app', {
headers: { 'Authorization': `Bearer ${token}` }
})
.then(res => {
console.log(res.data);
});
});
});
});
now my main motive is, user can't access pages other than / (landing page) without JWT token in header.
so here when user log in using login With google it will give token when logged in and then it will make req to backend with token and backend will return /app page pre-rendered!
PROBLEM: using this is code, when i make req to backend it just return HTML code in res.data BUT i want actual page!!
Axios is well and good to fetch data from my backend api but i cant figure out how to attach header and make req, And get page instead of source code in response;
Same problem is occurring everywhere in application. I just don't want users to access pages other than landing page without JWT in header!
backend: nodeJs
firebase auth
ejs template engine for view
EDIT:
meaning of returning source code is:
img of console log
any help, ideas or approach are welcome 🙏🏻
Login as before
Write the token into a cookie instead of the Authorization header
Redirect the browser to /app
In the backend read the cookie instead of the Authorization header
This way the browser will solve the problem for you by rendering the response. Using cookies is the usual way to implement a login without AJAX.
It's not possible to make a redirect and set the Authorization header.

Request to b2c login is blocked by CORS policy

I'm developing a web application, where the user is given a challenge from the web app that contains a URL to another website, where he's asked to sign-up.
The sign-up page is made using the sign-up flow in Azure AD B2C.
The response sent from my ASP.NET Core API looks like this:
var redirectUrl = Url.Action(nameof(SignupController.Return), "Signup");
var properties = new AuthenticationProperties { RedirectUri = redirectUrl };
properties.Items[AzureAdB2COptions.PolicyAuthenticationProperty] = AzureAdB2COptions.SignUpPolicyId;
return Challenge(properties, OpenIdConnectDefaults.AuthenticationScheme);
The challenge is requested using Fetch API in Javascript, which looks like this:
fetch(`/api/invitations/${invitationId}`, {
method: 'PUT',
mode: 'cors'
}).then(response => {
// HTTP 301 response
if (response.redirected) {
console.log(response.url);
window.location.href(response.url);
}
})
.catch(function (err) {
console.log(err);
});
However I keep getting this error:
As far as I understand this is a server problem, but I suppose its on b2clogin? I can't really see how I'm supposed to update the CORS policy. I can easily access the fetch URL as shown above by clicking on it, but the javascript code itself cannot redirect to it. I'm sure it's just a simple fix. I hope someone will help.
I am not sure what you are trying to achieve here because of limited context. But, to fix this error, run below Azure CLI command in your Local:
az webapp cors add --resource-group myResourceGroup --name api-name --allowed-origins 'http://localhost:44315'
Check out more about CORS policies in App service here.

How do I access tables in Azure after authentication?

I have been following the instructions on this page but I am getting stuck after the authentication part. After I login I get the user id and token back but I don't know what to do after that. If I try to access the tables after logging in then it comes back with this error
XMLHttpRequest cannot load sitename.azurewebsites.net/tables/modules.
Redirect from 'sitename.azurewebsites.net/tables/modules' to
'sitename.azurewebsites.net/tables/modules' has been blocked by CORS
policy: Request requires preflight, which is disallowed to follow
cross-origin redirect.
This is the code. It will give me back my userid and then come back with the error above when trying to access tables.
var client = new WindowsAzure.MobileServiceClient('http://sitename.azurewebsites.net');
client.login("facebook").done(function (results) {
console.log("You are now logged in as: " + results.userId);
var table = client.getTable("modules");
table.read().then(success, failure);
}, function (err) {
console.error("Error: " + err);
});
Should it automatically work after I login or do I have to do some extra stuff?
Per documentation you provided,
You also need to add the same loopback URLs to the CORS whitelist
settings:
Navigate back to the Azure portal.
Navigate to your Mobile App backend.
Click CORS in the API menu.
Enter each URL in the empty Allowed Origins text box. A new text box is created.
Click SAVE
After the backend updates, you will be able to use the new loopback URLs in your app.
Eventually, you will see something like this:
Note: You should also use https://sitename.azurewebsites.net instead of http://sitename.azurewebsites.net to request your App Service.
You should allow for Cross Origin Requests.

Facebook Same Window Authentication

I am trying to do Facebook authentication in same window of my web application's login page.
I am using following code when user clicked login button to go to authentication page.
function loginUsingOAUTH()
{
top.location = 'https://graph.facebook.com/oauth/authorize?client_id=839846246064537&scope=email&redirect_uri=http://www.olcayertas.com/testqa/result.html';
}
1) After authentication Facebook redirects me to my redirect url and returns a parameter "code".
At this point I want to access Facebook user information but I don't know how to do that.
What is this "code" parameter for?
2) Is there any other way to access user information?
3) Do you have any other advice facebook authentication with same window login?
Thank you in advance for your help
When you get the code you should make a server side request to get an access token and than pass the access token to user. It is explained in Facebook Developer page:
Exchanging code for an access token
To get an access token, make an HTTP GET request to the following
OAuth endpoint:
GET https://graph.facebook.com/v2.3/oauth/access_token?
client_id={app-id}
&redirect_uri={redirect-uri}
&client_secret={app-secret}
&code={code-parameter}
This endpoint has some required parameters:
client_id. Your app's IDs
redirect_uri. This argument is required and must be the same as the original request_uri that you used when starting the OAuth login
process.
client_secret. Your unique app secret, shown on the App Dashboard. This app secret should never be included in client-side code or in
binaries that could be decompiled. It is extremely important that it
remains completely secret as it is the core of the security of your
app and all the people using it.
code. The parameter received from the Login Dialog redirect above.
Response
The response you will receive from this endpoint will be returned in
JSON format and, if successful, is
{“access_token”: <access-token>, “token_type”:<type>, “expires_in”:<seconds-til-expiration>}
If it is not successful, you will receive an explanatory error
message.

Categories

Resources