I'm building a web application; the frontend is a SPA using Angular8 and the backend is an ASP.NET Core 3.1 Web API.
The application already has its own authentication scheme, setup using JWT Bearer tokens.
Now I need to add the ability for the backend to sync events on the Office365 calendar of the users. The requirements are:
Users should login to their Microsoft Office365 account on the frontend;
The frontend should "save" the results of the authentication on the backend, allowing the backend to periodically interact with the Micosoft Graph API.
In the (rare) case for some reasons the authentication must be renewed (for example different rights/scopes are required), the backend will notify the frontend that a new login is required.
I am currently able to perform a successful login in example applications using MSAL.NET and msal-angular, but what I cannot do is to pass the result of the authentication I get from msal-angular to .NET and use it to proceed with further calls and token renewals.
I am thinking about modifying/extending the msal-angular library to support the MSALv3 cache serialization scheme used in MSAL.NET and sending the cache to my web app, but it seem a very complicated and fragile (I see the internals of those libs are not stable across versions).
So, is this use case supported in some other way by MSAL? Should I use some different libraries?
You can go through the following docs to see if they are helpful in your scenario.
Acquire and cache tokens using the Microsoft Authentication Library (MSAL).
Single-page application: Acquire a token to call an API
Get a token from the token cache using MSAL.NET
Initialize client applications using MSAL.NET
Related
I have a Blazor Webassembly app (Asp Net Core hosted).
I secured my app using JWT Token. Client makes a request to Server and if the request is valid, server sends JWT Token to client and token is saved in local storage. Client reads the token in storage and this way authentication is handled.
I followed the following practice from Chris Sainty :
https://chrissainty.com/securing-your-blazor-apps-authentication-with-clientside-blazor-using-webapi-aspnet-core-identity/
Now I want to enable users to login app with their Google or Microsoft accounts. What would be the best approach for this?
I tried Google and Microsoft authentication on server-side but I couldn't pass the token to client. (because there is no request from client..)
Your response exist in these links:
Google Authentication by OIDC
Microsoft Account using MSAL
But the details requires studying related Service and js files.
You can study sources of Remote Authentication Service in Github for both oidc and msal in following sites:
Web Assembly Authentication Service
Personally I suggest you to use Microsoft Account which also allow authentication through Google and other providers too. Altough oidc provider is more oidc than msal approach. Microsot implemented Code Authorization flow in msal while Google uses implicit token flow (do not forget that these happen in client side). There is two different js files for implementing the underlying requests so I do not think even the combining them work in this way. May be it is better you code it your self by implementing an authentication state provider which uses JS Interop.
You also can see following example which may help you by DotNet guys:
Example of Web Assembly
I'm currently working on a Xamarin form that consumes data from the.net core API.
For API side, I use Abp framework.
By using this reference, I can consume data from API.
But in this example, the user needs to login using an administrator credential.
What I need to do is, I just need to consume data from API without login.
Is it correct way if I add [AllowAnonymous] attribute over the API method that I need to access ?
This is the example they show,
var accessToken = await _loginService.AuthenticateAsync();
var httpClient = GetHttpClient(accessToken);
Is there any example like just using clientId/secrets and without using accessToken?
What I need to do is, I just need to consume data from API without login.
This refers to Server-to-Server authentication; backend making request to an other backend without user interaction.
The authentication flow you are looking for, is named Client Credentials Flow.
It boils down to:
Add your api (abp app) as an api resource and api scope at authentication server.
Add your ui app (xamarin app) as a client at authentication server.
Declare a client secret for your xamarin app at authentication server.
Make an access_token request from xamarin app to authentication server with the api scope and client secret that you have already created above.
Its implementation can be varied on authentication server provider (namely your _loginService). It can be Identityserver4, Microsoft, Google etc etc.
If you are using ABP application backend (as authentication server), it handles most of the automated stuff in the background. You can check abp synchronous communication between microservices docs that has explanation about how client credentials is used between microservices.
Vue front-end for SPA and asp.net core 3.1 as backend for API
Using Microsoft.AspNetCore.SpaServices.Extensions nuget package so, among others, SPA files will be served from a folder (wwwroot/dist) when users access .net core
Back end API controller is decorated with [Authorize] attribute
SPA router has authguards so protected routes are only available to authenticated users
SPA will use Axios and pass a bearer token to the back end API
I want to implement OAuth2/Oidc authorization code with pkce using the identityserver4 hosted on another system.
A request for the landing page should forward the user to identityserver4 for the login/password prompt and redirect back after completing all the steps with a token.
Ideally I want the .net core handle all the oauth/oidc steps and don't want to deal with it using oidc-client javascript client in SPA. Any suggestion on how I can accomplish this? Thanks
Well there are two standard models here and you need to choose one of them, depending on factors you care most about:
OPTION 1: SPA SCENARIO
The SPA is the OAuth client and authenticates via Javascript tech
The API is the OAuth resource server
It is not standard for a resource server to handle the authentication flow for a client - instead a client should authenticate, then call the resource server.
OPTION 2: WEB BACK END SCENARIO
People most commonly choose this option when they want to keep tokens out of the browser's Javascript code:
A Web Back End in C# is the OAuth client
The Web Back End needs to securely communicate with the browser and has to use an auth cookie for this
To call an API the browser needs to either send the cookie to the web back end to get a token, or double hop all API calls via the web back end
ABOUT OIDC CLIENT
Personally I prefer option 1, which I think is closer to overall SPA Goals, such as cross domain hosting and use of content delivery networks. OIDC Client can actually lead to a fairly simple SPA security implementation, as in this
Client Side Implementation of mine.
We have an application that has frontend UI(Which is a web application) which communicates with a resource server. Our frontend will be using some APIs from a resource server to get data.
I am planning to add frontend to Okta and provide access to okta registered users.
In the resource server, we have some APIs that we want to expose to our customers to integrate in their system(Programmatically). To use our APIs, we have to provide client credentials(client ID/secret) to them. Using clientId/Secret, they will get access_token and will use that in a subsequent request. We can display this clientId/Secret via frontend UI once the user logs in to it via Okta.
How should I authenticate requests to the resource server from the frontend? And how do I authenticate requests to resource server via customer using clientId/Secret? Should I use one or two different tokens for this purpose?
Does Okta provides per-user client Id/secret that user(customer) can use to get access_token and send it to access resource server and resource server validate token against Okta.
I just did something very similar. You can read about my experience here: How to pass/verify Open ID token between .net core web app and web api?
I don't know what application framework you are using (.net, node, etc), but if you're using .NET the steps are to (a) install the middleware in your web app, (b) install the middleware in your api app, and (c) make sure calls from your web app to the api app pass the id_token.
If you, in addition to that, need to secure it for external users - it should work the same way. The only difference is they will manually call the /authorize endpoint to get their token - but the middleware should take care of the token verification for you in both cases.
Note I did experience one odd thing which is that I needed to pass the id_token and not the access_token. It is also worth mentioning that the claims were interpreted differently in the app and the api (in that the name of the claims for say, userid, were different between them - the data was still the same).
You will have to use 2 different access tokens. There are 2 different flows going on here:
Web UI to API
Business partner system to API
Technically this means:
Authorization Code Flow (PKCE)
Client Credentials Flow
And in terms of tokens it means:
In the first case there is an end user represented in access tokens (the 'sub' claim)
In the second case there is only a Client Id claim in access tokens
I can advise on token validation techniques if needed - let me know.
To me though this feels like an architectural question - in particular around applying authorization after identifying the caller and versioning / upgrades.
Based on my experience I tend to prefer the following architecture these days, based on 2 levels of APIs: eg with these ones exposed to the internet:
User Experience API serves the UI
Partner API deals with B2B
And both entry point APIs call the same core services which are internal. Might be worth discussing with your stakeholders ..
I am currently working on a solution that includes a multi tenant webApi which will be accessed by multiple clients, some of which i will be creating, some of which others will be creating.
Access to the api will be available via an ApiKey & Secret (enough for some resources) as well as username & password (for owner resources).
At the moment, the clients i have created (.Net MVC Web apps) have their own membership systems so what happens is the user of the client logs into the client system and the client system passes the login information to the Api to retrieve an authentication token.
The client membership system is really an unneeded abstraction. What i really want to do is have the user log directly into the api and the api pass back an authentication token that can be used from the browser as well as the .Net MVC client app.
My question is, what it the best way to achieve this. In my mind i seem to be struggling with 2 solutions.
1) Have a browser based login (ajax/AngularJS for instance) solution that calls the api to retrieve a token which then passes that token onto the MVC client where it will be stored (session variable maybe). Any future calls to the api that come from the .Net MVC client can pass the token on. This seems wrong to me though. I'm not even sure this is possible.
2) Utilise one of the OAuth flows so that the browser based login can call the API and retrieve a token, and the OAuth flow redirects to the MVC client which then stores the token for that user (again, in a session variable).
The Api was generated using the VS2013 WebApi template using Owin local accounts and is generating tokens via the ValidateClientCredentials and ValidateResourceOwnerCredentials flows, but i think i need to use one of the other OAuth flows for this scenario.
I understand that another solution would be to bypass the .Net MVC client code and create a completely browser based solution using knockout or AngluarJS but it's quite a complex system and i don't really have time to do this at the moment so i'm looking for a solution that would allow me to retrieve a token from the api that can be used from my .Net MVC client and ajax calls from the browser.
Any ideas, advice would be much appreciated.
thanks in advance. Justin
If you'd rely on Azure AD as your credentials store and authentication system, you'd be able to leverage a ready to use JS library that handles authentication, AJAX calls and session management concerns automatically: see http://www.cloudidentity.com/blog/2014/10/28/adal-javascript-and-angularjs-deep-dive/.
If you can't rely on Azure AD, the code of the library and samples mentioned above can still have value as a reference to build your own system - provided that the authenticaiton system you decide to use offers similar capabilities.
HTH
V.