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?
Related
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...
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
I'm currently developing an HTML5 mobile web app for Blackberry using WebWorks that interacts with a 3rd party API.
Unfortunately i can't use the API directly from the mobile app due to the cross domain requests constraints, so i'm considering the development of a Web Proxy that interacts with the API and serves the web app.
Since I've never done such thing i would like to get some recommendations, i'm going to use Microsoft technologies (.NET) to achieve my purpose.
I'm thinking about a WCF service that makes all requests to the API and the mobile client connects to the WCF service to get the data, but i think i'll have the same cross domain requests limitation anyway so it might not work.
First, check with your third-party API provider if they support CORS. If they do, you can get around the same origin policy restrictions. Assuming they don't, you can create a facade service using ASP.NET Web API instead of WCF. ASP.NET Web API is designed from the ground up for creating HTTP services for broader reach and there is no SOAP involved.
From your ASP.NET Web API, you can make a HTTP call using HttpClient and simply pass the request to the third party API and echo the response back to your app. As you rightly said, the same origin policy restrictions will apply to this case as well but you have more control over the server side. You can implement CORS in ASP.NET Web API and that way your BB WW app can still call your web API despite being in different origins.