authenticate front end with web apis - reactjs

I have a .net core application that I'm trying to authenticate with azure ad.
I'm using C# web apis for for all backend.
The place where I'm getting stuck is how to force my user to login when coming to my app.
If I add Authorize to my api calls with they just fail and the page loads without getting the information from the api calls.
How do I tell my react app to go to the microsoft login page if they're not logged in? I'm thinking that I don't need tokens because I can just get the ms login link from my api call and login?
Is this something I can set in the startup page?

Related

How to get Azure App Service EasyAuth Apple sign in to work with MobileServiceClient.LoginAsync?

I have Azure App Service EasyAuth working successfully with Google, Microsoft, and Facebook providers in my Mobile App using the MobileServiceClient.LoginAsync method. However, I'm having trouble getting it to work with Apple.
I am able to successfully kick off the authentication process as follows:
await myMobileServiceClient.LoginAsync("Apple", "myapp");
This does launch a new browser window and display the Apple login. I am able to authenticate successfully in the browser window.
The first problem I have is that post_login_redirect_url is being ignored and not passing back control to the mobile app using the myapp://easyauth.callback protocol. Instead, the login successful page is displayed in my Azure App Service website and there is no redirect.
I managed to hack around this issue by omitting the code_challenge and code_challenge_method parameters in the call to my Azure App Service. This DOES NOT pass back control to the mobile app using a redirect:
https://.azurewebsites.net/.auth/login/apple?post_login_redirect_url=myapp%3A%2F%2Feasyauth.callback%2F&code_challenge=WxdeYYJSn5ZoozK0i7WPwYMryh%2BNokYryHevXD2%2BG3k%3D&code_challenge_method=S256
This DOES pass back control to the mobile app after authentication:
https://.azurewebsites.net/.auth/login/apple?post_login_redirect_url=myapp%3A%2F%2Feasyauth.callback%2F
The second problem, regardless of whether I meddle with the call to the Azure App Service above, I do not get back an authorization_code parameter. Instead, I get a token:
https://.azurewebsites.net/.auth/login/done#token=%7B%22authenticationToken%22%3A%22eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdGFibGVfc2lkIjoic2lkOmFkZTg4ZDIwMjMzNjgzZGFhYTU0NmU1OGE0Zjg5MmYxIiwic3ViIjoic2lkOmFkZTg4ZDIwMjMzNjgzZGFhYTU0NmU1OGE0Zjg5MmYxIiwiaWRwIjoiYXBwbGUiLCJ2ZXIiOiIzIiwibmJmIjoxNjUyMzg4NDI5LCJleHAiOjE2NTIzOTIwMjksImlhdCI6MTY1MjM4ODQyOSwiaXNzIjoiaHR0cHM6Ly9vc3hiYWNrZW5kLmF6dXJld2Vic2l0ZXMubmV0LyIsImF1ZCI6Imh0dHBzOi8vb3N4YmFja2VuZC5henVyZXdlYnNpdGVzLm5ldC8ifQ.ujhWH9B05vc18rsOFKR-k8tHBAHNvzqLxF9fFLaLlAA%22%2C%22user%22%3A%7B%22userId%22%3A%22sid%3Aade88d20233683daaa546e58a4f892f1%22%7D%7D
Does anyone have a working example or insight into the details of OAuth to get this to work?

Azure AD Authentication and Authorization React.js

I have a requirement of using Azure AD for authentication in React.js. This can be done using NPM package but the react.js application is calling API to get/update data.
I want to allow API to only return data when user is authenticated means if someone has direct URI of API it should not return data instead show authentication error.
As react.js only works at front end , how to use that authentication for calling API?
If you are using React.Js or any other Javascript front end technology , Then to authenticate Azure Active Directory you can use Implicit Grand Flow and it isrecomended to use your app as a single page application as per documents.
The libreary which can help you is MSAL.js and you can find MSAL.js code sample here.

Desktop app opening a server-side Blazor page protected by AD auth

I have a server-side Blazor app running on Azure AppService protected by AAD auth. Authorized AD users (admins) are able to access and use the app.
What I'm want to achieve is to allow other users to access only a specific page of the Blazor app. Users would access the app from WPF app, themselves not necessarily being AD users, but AD application user (daemon app). WPF app gets the token (v2.0) and opens the page in a browser with the Authorization header (bearer token), however Blazor doesn't not interpret the auth header in request and threats the user as unauthenticated.
App registrations should have been setup properly as I'm able to access API when using this approach.
It this scenario possible? If so, any ideas what I could be doing wrong?
This scenario sounds like it is going quite a lot against general recommendations.
You really should not be doing "daemon app" authentication from a WPF app as it is not a confidential client application (and neither a daemon app). It runs on a user device, exposing the application's credential to any user.
Authentication flows that use secrets should never be used from a user device.
Secondly, a Blazor application is not generally one that can accept requests from an application.
Your WPF application should be calling an API, not a UI application.
What you should instead have is:
WPF app authenticates the user and acquires a token on their behalf to your API
WPF app calls the API with the access token
API validates the access token, authorizes access for the user and app, returns data
The Blazor app could be using this same API in its front-end code in a similar manner.
But I don't think you are going to be able to put it in the middle of your client app and the API.

SAML with ADFS for angularjs+java+jetty webapp

I am working on a webapp, the Front-end is implemented in AngularJS which talks to back-end server by invoking REST API. The back-end is Java REST Server implemented using reslet framework deployed in Jetty.
Currently, when a user logs into a web app, a REST API is invoked which then goes to the Java REST server. The server then authenticates the user.
I want to implement SSO using SAML. So when a corporate user tries to login to the app, the user must be redirected to ADFS. If the user is successfully authenticated he must be allowed to login to the app.
I want to know how do I start? I have seen sam2-js library, however it seems to be for NodeJS based server. I am not quite sure if it can be used with AngularJS on frontend.
SSO with SAML involves browser redirects so the flow is between angular and ADFS.
There's no Java backend.
So Jetty is irrelevant.
SSO has nothing to do with REST. They are two different flows handled in two different ways.
SAML is not a suitable SSO protocol for angular. That's why you can't find any examples.
You need to use OpenID Connect with ADFS 4.0. ADAL is the way to go.

Get logged in user in Web Api

I want to get logged in username in Web Api but unable to do so. Below is my problem -
I have a Web App developed using AngularJS and Windows authentication is enabled on it.
I have a API which the Web App calls to get the data.
API application is configured to use basic authentication so I need to pass logged in username whenever I call any API method.
The problem is, I can't find a way to get the logged in username and pass it in the request header as I don't have any control over it.
Any help would be appreciated !!

Resources