I have a hosted Blazor WebAssembly App and I tried to scaffold identity server in the project App.Server. It's working but now I have a mix of cshtml view files in the App.Server (which was intended to be only a asp net core web api). I found hard to integrate the Blazor UI and cshtml files to have a nice user experience.
I was expecting to have a separate pure web api with identityserver api and Blazor taking care of the pages/views and api calls. Is it possible to move those cshtml to Blazor and manage the pages from there or the scaffolding has been done that way because is not?
No, you can't move those Razor Pages pages to your front-end Blazor. But you can design them in such a way as to create the impression that, when the user, for instance, is redirected to the Login page, the Login Razor Pages page is part of the Blazor front-end. I've seen an example of that, and must admit that I couldn't discern it without seeing the source code.
Having a dedicated Web Api project or having Web Api end points in your Blazor server project has nothing to do with the Identity UI not being part of the Blazor front-end.
I was expecting to have a separate pure web api with identityserver api and Blazor taking care of the pages/views and api calls.
You can create a Blazor WebAssembly stand alone project, add a Web Api project, and an IdentityServer4 project, in which case, the flow of OpenID Connect is such that your users wanting to log in are redirected to the Login page provided by the default template of the project, but you can still design the pages to look as though they are part of the Blazor front-end.
The only viable solution that can satisfy your whims is to use Bearer Authentication; that is your Web Api produces Jwt token for users, which are passed to your front-end, and stored in the local or session storage. In that case, your Login page can be a Razor component that gather credentials from the user, and pass them to the Web Api appropriate end points via the Fecth API (this is the HttpClient service in Blazor)... This was the method we adopted before the Blazor team have created the current authentication system of Blazor. Personally I wouldn't recommend one to do that unless he is proficient in Blazor and other fields, and he's ready to invest a great deal of time for developing it. I guess your solution should be deception: let the user think that he's never left the space of the Blazor SPA...
Related
I have been working on authentication methods for my blazor app for some time now. I am currently developing as a standalone protected WebApi + Blazor Server, but will ultimately migrate to standalone protected WebApi + Hosted Blazor WASM so I need to be mindful of both server and client side authentication. The WebAPI will also serve an external OData feed and API for end users that also needs to be protected using the central authentication mechanism.
I would like to be able to sign on with Microsoft (ie. Microsoft.Identity.Web / MSAL), but want to configure some fairly complex roles and behaviours at the database level
(ie. ASP.NET Core Identity). To hopefully help someone else understand the different documentation sets, following are links to MS docs for the 2 options.
Introduction to Identity on ASP.NET Core
Microsoft Identity Platform Documentation
Don’t know about anyone else, but I have found it very difficult to navigate through the different documentation sets and tutorials to firstly understand how they work and secondly determine if it is best for me.
My question is, does anyone have any documentation on how they have integrated Microsoft.Identity.Web with the individual user accounts available in ASP.NET Core Identity for Blazor Server and/or WASM apps?, .
The following link shows how to do it all within ASP.NET Core Identity.
Integrate ASP.NET Core Identity with Microsoft account | BinaryIntellect Knowledge Base
If I was building an MVC web app, that’s what I would do. However, I really like the token handling capabilities of Microsoft.Identity.Web / MSAL (ie. ITokenAquisition etc.) for Blazor. It seems to be a real kludge to have to use the Razor pages for ASP.NET Core Identity and handling tokens securely becomes an issue – especially for Blazor WASM.
Chris Sainty has done some good work in porting some of the ASP.Net Razor pages to Blazor Components in the following link. However he does a lot of (very clever) manual processing of the token and I’m not sure I like the idea of storing the token in unprotected Local Storage of the blazor app. I haven’t gone into it in full detail yet, but I don’t think this method will be directly transferrable to Blazor WASM.
Authentication with client-side Blazor using WebAPI and ASP.NET Core Identity (chrissainty.com)
This SO post indicates that it is not possible to integrate Individual user accounts with Microsoft.Identity.Web.
c# - Microsoft Identity Plataform with asp.net Core Identity - Stack Overflow
I got a working solution going where I had both ASP.NET Core Identity and Microsoft.Identity.Web working side by side. However, I found this to be very difficult to implement and debug. Once you start mixing the various builder.Services.AddAuthetication(
) options (eg. .AddMicrosoftIdentityWebApp, . AddMicrosoftIdentityWebApi, .AddIdentityCore, .AddIdentity, .AddDefaultIdentity, .AddJWTBearer etc. etc.) I have found that you enter a world of pain and unpredictable behaviour. I basically had to go back to the source for each of them to work out what they were actually doing under the covers and work out how to blend them. I ended up going back to the raw OAuth / OpenId specifications and implementing everything manually – which is very unsatisfactory and I was unhappy with the risk I was taking in potentially introducing a security flaw – even though I got it to “work”.
EDIT: This SO post is similar to what I implemented. Microsoft Identity Local User Accounts and MSAL
I can’t believe how hard it has been to just get to this level of understanding, and still not have a solid working concept that does what I want it to do that is supported by documented acceptable techniques and not just my kludge at implementing everything manually.
Right now it appears to me that if I want to use as much out of the box / documented functionality as possible, I suspect that I should use ASP.NET Core Identity and work out how to integrate the ASP.net razor pages into my Web Api, Blazor Server and and Blazor WASM apps. However, this appears to be a backward step since Microsoft.Identity.Web / MSAL seems to be so much better suited to Blazor and seems to be the direction that MS is going.
If anyone can point me to some current examples of how this can be done, I would be very thankful.
I think I have found at least a partial answer to my question. The key problem I faced was how to capture the callback event from Microsoft.Identity.Web so that I can persist / retrieve info to/from the database during the authentication event. I was hung up on the ASP.NET Core Identity method of doing that.
I found the following SO post that provides information on how to respond to the OnTokenValidated event using Microsoft.Identity.Web. Microsoft.Identity.Web: OnTokenValidated event not triggered
Having access to this event means that I will be able to implement what I need to do at the database level and move on.
So I'm coming from Xamarin world trying to build a Blazor App. And I'm struggling with a high level understanding of why Blazor Apps ( client side only ) cannot make a basic HTTP get call to say google.com or any other http get/post call to different resources/urls?
Can someone break it down for me, am i crazy? how would i ever implement maps.google.com or other http request I'm going to need to make.
I do notice anything with a package, like SendGrid or B2C or Cosmos Nuget Packages seem to work fine... how do they get around the different domain names ?
Can i simply say on my webserver : (in English) - allow requests to google.com and someoneElsesApi.com
or would i have to contact google and have them allow my Blazor app to make calls?
Just really struggling with how to use Blazor Client Only PWA app if it cant connect or call to anything else on the web... seems pointless if a Blazor app cannot make any http calls to other services.
Ok, so yes... I found an Public Open API to test a request against, and it does work from a Blazor WASM (Client only). More specifically the below works just fine..
#inject HttpClient HttpClient
...
string responsString = await HttpClient.GetStringAsync("https://rickandmortyapi.com/api/character/5");
The problem i was having which seems confusing:
Both
Blazor WASM
Xamarin Forms apps
can both call an open public Web API just fine from HTTP Client.
But...
When I create an ASP.NET core API and publish it allowing anonymous access in azure,
Xamarin Forms can call that API
Blazor WASM cannot call it unless i specify CORS correctly in the Web API
So with my inexperience with Blazor WASM i assumed it could not do this.. while Xamarin can. So this changes to ... how is it that the Web API i created in Azure + ASP.net Core Web API - just allows the Xamarin App to call it (without CORS specification)... while CORS Must be set correctly for a Blazor WASM?
I have a Blazor WebAssembly app. It's self contained and doesn't use any web API calls. I'd like to add authentication using my existing Azure AD B2C tenant so that only registered users can access the app.
Microsoft says that:
In Blazor WebAssembly apps, authorization checks can be bypassed because all client-side code can be modified by users.
So rather than host my Blazor app statically (the standalone model), I'd like to use the ASP.NET Core hosted model (so an ASP.NET Core app serves the Blazor app to clients). That way I can do the authentication/authorization on the server - if the user is registered and is allowed access to the app, the ASP.NET Core app serves them the Blazor app. If they aren't, they can be shown an error page or be redirected.
The issue is that I'm not sure how to implement this.
When I create a new Blazor WebAssembly Hosted app from the template in Visual Studio 2019, it creates three projects. A shared project, the Blazor project, and a Server project. The Server project has a reference to the Blazor project. This line appears at the end of the Configure method of Startup.cs:
endpoints.MapFallbackToFile("index.html");
This seems to be the thing that makes it serve the Blazor app to the client. I'm not sure how I can add authentication/authorization to this. I tried modifying this line to look like this:
endpoints.MapFallbackToFile("index.html").RequireAuthorization();
But the app still loads without redirecting to a login screen first.
There is some Microsoft documentation called "Secure an ASP.NET Core Blazor WebAssembly hosted app with Azure Active Directory B2C" which sounds like it's what I need, but it's actually still doing the authentication in the Client app while also securing API calls to the Server app (which I don't need).
Is there any way to accomplish what I'm trying to do - authenticating the user on the server before serving the Blazor app, rather than doing that authentication in the Blazor app itself?
The answer was really simple. Actually, the RequireAuthorization() call does work. If you're already logged in to B2C you won't be redirected to the login page first (and, in Edge at least, it doesn't even visibly redirect to B2C first before redirecting back to the app, hence the confusion). But if I load the page in a private browser window I am redirected to the B2C login page - so it must be working as intended.
For future reference, the answer to the title question is:
Add auth to the ASP.NET Core Server app if you haven't already.
In the Server app, add a project reference to the Blazor app.
Add the following line to the UseEndpoints call inside the Configure method in Startup.cs:
endpoints.MapFallbackToFile("index.html").RequireAuthorization();
I want to build 2 apps.
Private API in .NET that takes care of database access / processing of data.
Blazor WebAssembly app which will connect to this API securely, to search data.
Since Blazor WebAssembly DLLs can be decompiled, I can't use any private/secret keys in the APP.
I don't want anyone being able to use the API if they discover the endpoints. Only the Blazor APP can use the API (and any other app I might build in the future).
How should I approach this? Is it even possible to do it securely or should I go Server Side?
Secure ASP.NET Core Blazor WebAssembly explains how to secure a Blazor WASM app
Blazor WebAssembly 3.2.0 Preview 2 release now available explains how to use IAccessTokenProvider to get the access token to authentify your applicaton on API.
I am new to Identity server and wants to secure my two apps (MVC, Webapi) using it.
I have seen the example where we can invoke the webapi from MVC action method and SetBearerToken that was issued to the the MVC application. I am referring the below sample:
https://identityserver.github.io/Documentation/docsv2/overview/mvcGettingStarted.html
This is typical example of server to server communication where we are using access token issued to the MVC app for Web api.
In the same scenario, I want to call webapi from Javascript client(fro ex Angular or any one) using same access token.
"I want to pass the the access token issued to the MVC application to call WebAPI from JavaScript"
How can I utilize the token that was issued to my MVC application from the JavaScript client?
Thanks
They should be treated as different client in my opinion, I guess they are different site? For your Javascript client you should be able to find example here , you can use the javascript lib that provided in the example or write one yourself
Once you get the token, then you can call your API using AJAX, where you might face CORS problem if your webapi is on a different domain, well...that is different topic.
Hope that helps