I followed the diagram below to integrate Firebase Authentication to my GAE web app, but I am having trouble redirecting users to homepage after they log in.
Currently, I have a FirebaseUI widget on my login page that handles the authorization. I configured the widget such that it sends the ID token of the user to my backend server with an XHR as described here upon a successful login, so that I can verify the integrity and authenticity of the token. However, after I am done verifying, I am not able to redirect the user to homepage since apparently that's how XHR works.
As can be seen from my network logs below, my app does indeed request a redirection, but my browser does not respond to it.
I am not sure what the best way to proceed is as my experience in web development is nonexistent and Firebase documentation was not helpful. Any direction you can provide me would be appreciated!
I was able to implement this using a callback function that is executed on the frontend upon verification of the token. Something along the lines of:
jQuery.ajax({
type: 'POST',
url: '/login',
dataType: 'json',
data: 'idtoken=' + idToken,
success: function(response) {
window.location.replace(response.redirect);
},
error: function(xhr, textStatus, errorThrown) {
// Handle error
}
});
Related
I have created a simple REACT application that is ONLY run on a local PC attached to a large screen on our network. Internal use only! It is like a billboard or dashboard. There is ZERO user interaction. The screen is NOT a touch screen and there is no keyboard and mouse attached. Therefore NO users to login.
The REACT application is build and then deployed to a folder on the PC. All automated. The initial deployment includes all current data. Then at windows startup a command something like this is executed:
"python -m http.server 3000" (just example...)
The application has initial data that was deployed with the application, however, I would like it to also be able to call a secure Azure WebAPI service to get updated statistics every few minutes. Very small data. Mostly integer values. I just want to provide some real time updates.
I have the REACT app fully working (if the WEBAPI is not secure) or the individual calls allow anonymous. However, we have business rules that require all endpoints to be secure.
This app runs locally, but the API is an Azure App Service.
I have setup the REACT application in Azure AD as a registered application and configured it to have permissions to call the WEBAPI service.
I have many console applications that are setup and work basically the same way as this REACT application. With the C# daemon applications, there is a MSAL package that makes it easy.
I am trying to learn REACT, and instead of building this as another WPF or UWP application, I wanted to try using REACT.
So, I know I need an access token somehow. I was thinking with a client ID and Secret just like I do in my C# daemon clients that are written in C#.
I cannot find any REACT nor Angular examples that do this without a user login first. Remember, the PC does not have input devices. Display ONLY. Again, my app does not have users. It calls a secure API to get data. That's it.
Thanks for your help.
Using Joy Wang's comments and this page from documentation:
Service-to-Service Access Token Request
This is my new code:
const adalConfig = {
tenant: '...',
clientId: '...',
clientSecret: '...',
authority: 'https://login.microsoftonline.com/{tenant}/oauth2/token',
endpoints: {
apiResourceId: 'api://bbbbbb-...',
},
};
function getAccessToken() {
var requestParams = {
grant_type: 'client_credentials',
client_id: adalConfig.clientId,
client_secret: adalConfig.clientSecret,
resource: adalConfig.endpoints.apiResourceId
};
// Make a request to the token issuing endpoint.
fetch(adalConfig.authority,
{
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify( requestParams )
}).then(response => {
if (response.status >= 200 && response.status < 300) {
console.log(response);
console.log(response.json());
} else {
console.log('Somthing happened wrong');
console.log(response);
}
}).catch(err => err);
}
When I call the function above, I get the following response:
Response {type: "cors", url: "https://login.microsoftonline.com/.../oauth2/token", redirected: false, status: 400, ok: false, …}
body: (...)
bodyUsed: false
headers: Headers {}
ok: false
redirected: false
status: 400
statusText: "Bad Request"
type: "cors"
url: "https://login.microsoftonline.com/.../oauth2/token"
proto: Response
Maybe there is another way to start the REACT application so that CORS is not checked? Any ideas?
Thanks again.
So, currently there is not a secure way to do what I want. The basic issue is that you cannot use the client credential grant type from JavaScript in a browser.
However, I think I have a good work around that may help others. I am sure it is NOT for most application. And I believe OAUTH is working on a solution so this may not be needed in the near future. If a better solution is add, I will gladly mark it as the correct answer. Thanks for your help.
My app is basically an automated dashboard/billboard with ZERO user input. It pulls secure data and displays it. The REACT application is ONLY on a LOCAL PC on a wall with NO inputs. A script runs when the PC is turned on.
The script starts the built REACT application using an http server like python.
Ex: "python -m http.server 8000"
The script then opens the browser in kiosk mode so the only thing you see on the screen is the application.
So far, this is exactly as I had it before.
WORK AROUND:
I created a command line utility called GetToken. Before the REACT application is started by the script, it calls this utility like so: "gettoken --client Dashboard --file token.json"
This utility makes the Client Credential Grant Type call to get a token.
It then saved that token to a local json file with the other built REACT files. Ex: \public\data\token.json
In my REACT application, it just loads the token and uses it.
const t = await fetch('./data/token.json').then(r => r.json());
this.setState({ token: t.token });
Then I just add this to my api calls like so:
const fetchOptions = {
method: 'GET',
headers: {
"Authorization": `Bearer ${this.state.token}`,
"Content-Type": "application/json"
}
};
const newSlides = await fetch(this.state.baseUrl + '/api/Dashboard/GetSlides', fetchOptions).then(response => response.json());
IMPORTANT: This only works if you also have the ability to update the API. If you cannot, then you will still get CORS errors. You will have to allow calls from the localhost and port you use to start you application. You should pick something other than 3000, 4200, or 8000.
I added the following to my API startup.cs:
public void ConfigureServices(IServiceCollection services) {
...
var origins = Configuration.GetSection("AppSettings:AllowedOrigins").Value.Split(",");
services.AddCors(o => o.AddPolicy(specificOriginsPolicy, builder => {
builder.WithOrigins(origins)
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials()
.SetIsOriginAllowed((host) => true);
}));
...
}
public void Configure(IApplicationBuilder app) {
...
app.UseCors(specificOriginsPolicy);
...
}
I am still refining this solution, but it works well so far. I may turn the utility into a background service that is updating the token on an interval. Or I may turn the utility into a Shell, and then use it instead of the script. Either way, you get the idea.
LESSON:
I know I could have done this as a UWP or WPF application and avoided all these issues, but the main goal was to learn REACT. I learned a lot. I would do it again. It is shocking just how little code there is to my REACT application now that it is done. I believe REACT could be used for many similar scenarios.
You could refer to this sample, it uses client credential flow(i.e. client id and secret you want) to get the access token, just change the resource to the one you want to get token for, the sample gets the token for Microsoft Graph.
auth.getAccessToken = function () {
var deferred = Q.defer();
// These are the parameters necessary for the OAuth 2.0 Client Credentials Grant Flow.
// For more information, see Service to Service Calls Using Client Credentials (https://msdn.microsoft.com/library/azure/dn645543.aspx).
var requestParams = {
grant_type: 'client_credentials',
client_id: config.clientId,
client_secret: config.clientSecret,
resource: 'https://graph.microsoft.com'
};
// Make a request to the token issuing endpoint.
request.post({ url: config.tokenEndpoint, form: requestParams }, function (err, response, body) {
var parsedBody = JSON.parse(body);
console.log(parsedBody);
if (err) {
deferred.reject(err);
} else if (parsedBody.error) {
deferred.reject(parsedBody.error_description);
} else {
// If successful, return the access token.
deferred.resolve(parsedBody.access_token);
}
});
return deferred.promise;
};
I'm using cypress for writing E2E tests for my UI (Note that it's a PowerBI report, hence it's kind of special case). When I am testing with a public report, it works fine. But when it's a private PBI report, I am having trouble with login part. After some research, I found this approach promising for Azure AD based auth, and added this login function in my commands.js file:
Cypress.Commands.add('login', () => {
cy.request({
method: 'POST',
url: 'https://login.microsoftonline.com/{TENANT}/oauth2/token',
form: true,
body: {
grant_type: 'client_credentials',
client_id: CLIENT_ID,
client_secret: CLIENT_SECRET,
// resource: RESOURCE
},
header: {
'Content-Type': 'multipart/form-data'
}
}).then((responseData) => {
if (responseData.status === 200) {
window.sessionStorage.setItem("adal.idtoken", responseData.body.access_token);
window.sessionStorage.setItem("adal.token.keys", CLIENT_ID + "|")
window.sessionStorage.setItem(`adal.expiration.key${CLIENT_ID}`, responseData.body.expires_on)
window.sessionStorage.setItem(`adal.access.token.key${CLIENT_ID}`, responseData.body.access_token)
} else {
console.log("error retrieving token")
}
})
})
Note that the Client ID and secret are correct and have permission to access the powerbi report. I also tested the token generated, and the sessionStorage variables, and all seem to be assigned correctly. Now, in my test:
describe("E2E Tests", () => {
beforeEach(() => {
cy.login();
})
it("Sample Test 1", () => {
cy.visit("https://powerbi-report-url.com");
//...
});
})
And I am seeing in the cypress test runner that, even though login has been called in beforeEach, while visiting the powerbi report, it still redirects to https://login.microsoftonline.com url with a different client id as query param, and since the superdomains of powerbi report and redirected urls are different, it gives chrome-error://chromewebdata error(I guess that's the reason). Hence wondering, how to login to a website in cypress tests backed by azure ad auth.
Also, might be unrelated, but seeing one more error in the console:
Refused to display 'https://powerbi-report-url.com' in a frame because it set 'X-Frame-Options' to 'deny'.
Edit 1: Switching to Edge doesn't give the chrome webdata error, but still the cy.visit to the URL times out and gives HTTP 431 Error(Request header too long) and couldn't authenticate.
Edit 2 (More Details about Auth Error): While generating the toke using client credentials, I am getting the token, and see it's stored in the session Storage, however the cypress tests are not picking the same token to authorize the visit to PowerBI report. So, basically even thought the cookie exist to auth the request, the request to Power BI visit still redirects to login.microsoftonline.com/common/oauth2/authorize?client_id={a different client ID from what I am using in the above POST call}
Whereas, while using username/password; getting this error: "error": "interaction_required", "error_description": "AADSTS50079: Due to a configuration change made by your administrator, or because you moved to a new location, you must enroll in multi-factor authentication to access
"error_codes": [50079]
At this moment (17-Apr-20), this might be related to an Open issue with the Cypress team: https://github.com/cypress-io/cypress/issues/4220
For me particularly, I used to have one super-domain having this error with the previous version 4.3.0 but now with 4.4.0, I get more domains having same issue.
Current workaround: Roll back to previous version and run via Edge (which is based on Chromium anyway).
I want to have a login button in my website so when a user clicks on it, the user can use their Google credentials. I'd like to ideally perform the authentication server side using Express.js and Passport.js.
I implemented authentication server-side but the problem is that I can't make an AJAX request from the website to the server to start authentication because Google or Oauth don't support CORS. So I need to use a href element in my website which would call the server authentication endpoint. However, I can't catch server response in this way.
If I perform the authentication client-side (I'm using React) I could store login state in Redux and allow the user to access the website's resources. However, when the user logs out I need to make sure that server endpoints stop serving the same user which feels like implementing authentication twice: client-side and server-side.
In addition when authenticating client-side, Google opens a popup for the user to authenticate which I think is worse user experience then just a redirect when authenticating server-side.
I'm wondering what the best practice in terms of authenticating using Oauth2/Google. For example, stackoverflow.com also has Google button but just makes a redirect, without any popup, so I guess they figured out a way to perform server-side authentication and to bypass CORS issue.
I faced the same issue. This article is Gold link
1.In auth route File I had following code
const CLIENT_HOME_PAGE_URL = "http://localhost:3000";
// GET /auth/google
// called to authenticate using Google-oauth2.0
router.get('/google', passport.authenticate('google',{scope : ['email','profile']}));
// GET /auth/google/callback
// Callback route (same as from google console)
router.get(
'/google/callback',
passport.authenticate("google", {
successRedirect: CLIENT_HOME_PAGE_URL,
failureRedirect: "/auth/login/failed"
}));
// GET /auth/google/callback
// Rest Point for React to call for user object From google APi
router.get('/login/success', (req,res)=>{
if (req.user) {
res.json({
message : "User Authenticated",
user : req.user
})
}
else res.status(400).json({
message : "User Not Authenticated",
user : null
})
});
2.On React Side After when user click on button which call the above /auth/google api
loginWithGoogle = (ev) => {
ev.preventDefault();
window.open("http://localhost:5000/auth/google", "_self");
}
3.This will redirect to Google authentication screen and redirect to /auth/google/callback which again redirect to react app home page CLIENT_HOME_PAGE_URL
4.On home page call rest end point for user object
(async () => {
const request = await fetch("http://localhost:5000/auth/login/success", {
method: "GET",
credentials: "include",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
"Access-Control-Allow-Credentials": true,
},
});
const res = await request.json();
//In my case I stored user object in redux store
if(request.status == 200){
//Set User in Store
store.dispatch({
type: LOGIN_USER,
payload : {
user : res.user
}
});
}
})();
5.last thing add cors package and following code in server.js/index.js in node module
// Cors
app.use(
cors({
origin: "http://localhost:3000", // allow to server to accept request from different origin
methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
credentials: true // allow session cookie from browser to pass through
})
);
Your authentication should be done server side. Here is how it works.
You make a fetch or axios call to your authentication route.
Your authentication route sends a request to Google's Authentication servers. This is important to have on the backend because you will need to provide your clientSecret. If you were to store this on the frontend, it would make it really easy for someone to find that value and compromise your website.
Google authenticates the user and then sends you a set of tokens to your callback url to use for that user (refresh, auth, etc...). Then you would use the auth token for any additional authorization until it expires.
Once that expires, you would use the refresh token to get a new authorization token for that client. That is a whole other process though.
Here is an example of what that looks like with Passport.js: https://github.com/jaredhanson/passport-google-oauth2
EDIT #1:
Here is an example with comments of the process in use with Facebook, which is the same OAuth codebase:
https://github.com/passport/express-4.x-facebook-example/blob/master/server.js
Redux can really help with achieving this and this follows the same logic as Nick B already explained...
You set up oauth on the server side and provide an endpoint that makes that call
You set up the button on you react frontend and wire that through an action to the endpoint you already setup
The endpoint supplies a token back which you can dispatch via a reducer to the central redux store.
That token can now be used to set a user to authenticated
There you have it.
Is it possible to use basic auth with the following snippet to make a simple post request to a site running locally?
app.controller('post', function($scope, $http) {
$http.post("http://localhost:8888/angular//wp-json/posts", {'title':'Posting from Angular'})
.success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
document.getElementById("response").innerHTML = "It worked!";
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
document.getElementById("response").innerHTML= "It did not work!";
alert(status)
});
});
When you say basic auth, do you mean HTTP Basic Authentication?
If that's what you mean: then NO. HTTP Basic Authentication requires that your client (in this case, your web browser) needs to know your API keys and be able to send them over the network to your server. Since you're running Angular inside of a web browser, this means that any user visiting your site would theoretically be able to view your API credentials in plain text by inspecting the browser's Javascript console.
This is a HUGE security risk.
What you want to do instead is use a protocol like OAuth2 with the Password Grant (more info here: https://stormpath.com/blog/token-auth-spa/).
OAuth2 allows you to basically do this:
Have a user log into your application with a username/password.
When the login is successful, a token will be returned and stored in a web browser cookie that is HIDDEN FROM JAVASCRIPT.
Then you can use Angular to POST to your API service, as the browser will automatically attach the relevant token API credentials in the HTTP Authorization header automatically.
Your server can then grab the token out of the HTTP Authorization header, and validate the credentials in this way.
This is the only safe way to access an authenticated API service from a browser.
I want to get the access token from platform life-log.
What should I do to get the access token or code .I'm using Node.js. this is my request,but I didn't know how can I get the code.
request.post({
url: 'https://platform.lifelog.sonymobile.com/oauth/2/token',
form: {
client_id: 'client',
client_secret: ' secret',
grant_type: 'authorization_code',
SCOPE :'lifelog.profile.read+lifelog.activities.read+lifelog.locations.read',
REDIRECT_URL : 'https://localhost:8000/callback'
},
},
function(err, res, body) {
var accessToken = JSON.parse(body).access_token;
I appreciate any help on this.
Have you already signed up for an account here?
https://developer.sony.com/develop/services/lifelog-api/create-app/
If so then the steps on this page should be able to guide you in getting everything you need to make successful API calls:
https://developer.sony.com/develop/services/lifelog-api/authentication/
The above documentation says that to get your code you will make a GET or POST request to this url:
https://platform.lifelog.sonymobile.com/oauth/2/authorize?client_id=YOUR_CLIENT_ID&scope=lifelog.profile.read+lifelog.activities.read+lifelog.locations.read
When you sign up for an account you will be asked for a callback url. Make sure you have an endpoint in nodejs to handle the callback url you supplied. Once you run the above line of code and authenticate you will receive the "code" to your callback url. You can then follow the rest of the steps on the authentication page of the documentation to walk you through making your first API call.