Authentication And Authorization (Part 2)

By Ashwin Venugopal -

 






Configuring the Blazor WebAssembly Project

The WebAssembly project offers similar functionalities. It is slightly more complex because it also necessitates API authentication. If we opt to include authentication when setting up the project, IdentityServer will be used by default to authenticate both the client and the API. IdentityServer is an open-source initiative that will assist us in managing authentication for both our website and our API.

Updating MyBlogWebAssembly.Server

  • Execute the following steps to update the MyBlogWebAssembly.Server project:

  • In the MyBlogWebAssembly.Server project, open Startup.cs.

  • Add the following namespaces-

using MyBlog.Data.Models;

using Microsoft.AspNetCore.Authentication;

  • Open appsetting.json and add the following just after the first curly brace-

"ConnectionStrings": {

"MyBlogDB": "Data Source=../../MyBlog.db" },

  • In the Configure method, just above app.UseEndpoints, add code. The codes need to be between app.UseRouting(); and app.UseEndpoints, otherwise you will get a warning that things might not work as you expect.

  • Now we need _LoginPartial, just as we did for the Blazor Server project. Right click on the Pages folder and select Add | Folder; name the folder Shared.

  • Right-click on Pages/Shared and click Add | Razor page. Name the page _ LoginPartial.cshtml.

  • Add code to the file we just created.

  • Inside of the <ul> tag, add code. Based on the user's current status, it is shown whether the user is logged in. If the user is logged in, then a greeting and a Log out link is shown.

  • We also need to create a controller for Open ID Connect. Right-click on the Controllers folder and select Add | Class. name the class OidcConfigurationController.cs.

  • Open the file we just created and replace the content. The controller is responsible for sending the token to the client when the client requests it.

  • Open appsettings.json and add the name of the client. The name should be specified and used in the API.

Updating MyBlogWebAssembly.Client

Now we need to tell the client project that we want to tell the project to use authentication:

  • First, we need to add a couple of NuGet packages. Right-click on the MyBlogWebAssembly.Client project and click Manage NuGet Packages.

  • Search for Microsoft.AspNetCore.Components.WebAssembly. Authentication and click Install.

  • Search for Microsoft.Extensions.Http and click Install.

  • Open Program.cs and replace the line builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder. HostEnvironment.BaseAddress) }), with the code block.

  • Add the following using statement-

using Microsoft.AspNetCore.Components.WebAssembly. Authentication;

  • Now we need to add a couple of files. Right-click on the Pages folder, select Add | Razor component, and name the file Authentication.razor.

  • Replace the content of the file. The component will redirect and log in on the server.

  • Right-click on the Shared folder, select Add | Razor component, and name the file LoginDisplay.razor.

  • Replace the content of the file. This file differs a bit from the file we created for Blazor Server. It uses the authentication component we just created and makes calls back to the server. It will log out the client and the server.

  • Right-click on the Shared folder, select Add | Razor component, and name the file RedirectToLogin.razor.

  • Open _Imports.razor.

  • Now we need to activate authentication by opening App.Razor and replacing the content with code.

  • Open Pages/FetchData.razor and inject IhttpClientFactory after the @page directive.

  • Change the content of the OnInitializedAsync method. This will call the weather forecast service, and if the token is missing, it will redirect to the login page.

  • Add the following namespace-

@using Microsoft.AspNetCore.Components.WebAssembly. Authentication

  • Now it's time to run the project. Make sure to set MyBlogWebAssembly.Server as a startup project and press F5.

  • Now navigate to the weather forecast service and you will be redirected to the login/ registration page, where you can create an account or log in.

Conclusion

The Blazor WebAssembly project is successfully configured.








































Comments

Post a Comment

Popular posts from this blog

Information Protection Scanner: Resolve Issues with Information Protection Scanner Deployment

By Ashwin Venugopal -
Image
  About If you are experiencing problems with the Microsoft Purview Information Protection scanner, check the health of your deployment by utilizing the Start-ScannerDiagnosticsPowerShell cmdlet to start the scanner diagnostic tool. The diagnostics tool checks the following details and then creates a log files with the results: Whether the database is up to date. Whether network URLs are accessible. Whether there's a valid authentication token and policy can be acquired. Whether the profile is defined in the Azure portal. Whether offline/online configuration exists and can be acquired. Whether the rules configured are valid.  The Start-ScannerDiagnostics command does not perform a comprehensive check of prerequisites. If you encounter problems with the scanner, you need to verify that your system meets the scanner's requirements, and that your scanner's configuration and installation are finished.  Verify Scanning Details Per Scanner Node and Repository Run the Get-ScanSt...
Read more

How AMI Store & Restore Works?

By Ashwin Venugopal -
Image
  CreateStoreImageTask The CreateStoreImageTask API stores an AMI as a single object in an S3 bucket. The API initiates a task that collects all the data from the AMI and its associated snapshots, subsequently using an S3 multipart upload to store this data in an S3 object. It gathers all elements of the AMI, including most of the non-Region-specific metadata and all EBS snapshots included in the AMI, and consolidates them into a single object in S3. During the upload process, the data is compressed to minimize the space utilized in S3, which means that the S3 object could be smaller than the total sizes of the snapshots in the AMI. If the account making this API call has access to AMI and snapshot tags, they will be retained. The S3 object shares the same ID as the AMI, except it has a .bin extension. Additionally, the S3 metadata tags for the object include the AMI name, AMI description, AMI registration date, AMI owner account, and a timestamp indicating when the store operation...
Read more

Create A Store Image Task

By Ashwin Venugopal -
Image
  Introduction When you save an AMI in an S3 bucket, a task for storing the image is initiated. This store image task allows you to track the progress and result of the procedure. Securing your AMIs It is crucial to verify that the S3 bucket is set up with adequate security to protect the content of the AMI and that this security is upheld for the entire duration that the AMI objects are stored in the bucket. If this cannot be achieved, it is advisable to refrain from using these APIs. Make sure that public access to the S3 bucket is prohibited. It is suggested to activate Server-side encryption for the S3 buckets where you keep the AMIs, even though it’s not mandatory. When AMI snapshots are transferred to the S3 object, they are sent over TLS connections. It is possible to save AMIs that contain encrypted snapshots; however, the snapshots will be decrypted during the storing process. Identify the source AMI used to create a new Amazon EC2 AMI You can determine the AMI that was us...
Read more