In this article, we are going to implement Blazor WebAssembly cookie authentication using Microsoft Account(external login provider).
Part-3 Blazor WebAssembly Cookie Authentication With Twitter
Step2:
Step3:
Stpe6:
API_Project/Controllers/AuthController.cs:
Part-3 Blazor WebAssembly Cookie Authentication With Twitter
Install Microsoft Authentication NuGet Package In API Project:
Let's install the Microsoft authentication NuGet Package in API project.
.NET CLI Command:
dotnet add package Microsoft.AspNetCore.Authentication.MicrosoftAccount --version 6.0.3
dotnet add package Microsoft.AspNetCore.Authentication.MicrosoftAccount --version 6.0.3
Package Manager:
Install-Package Microsoft.AspNetCore.Authentication.MicrosoftAccount -Version 6.0.3
Install-Package Microsoft.AspNetCore.Authentication.MicrosoftAccount -Version 6.0.3
Register API With Microsoft Azure Portal:
To enable Microsoft authentication to our application, we have to register our app into the Microsoft Azure portal. So following are steps to registering the app with the Microsoft portal.
Step1:
Go to the Azure portal 'https://portal.azure.com/'. Then select 'App Registration'.
In the 'App Registration' page select the 'New Registration' button.
Configure the App Registration.
- Define 'Name' to your App registration
- Select supported account types as 'Accounts in any organizational directory(Any Azure AD directory - Multitenant) and personal Microsoft account'.
- In the Redirect URL section select the dropdown value as 'Web' and in the text box define the redirect URL. Here specify that our API domain and path will 'signin-microsoft' which is the default redirect path.
Stpe4:
Once the app registers successfully we can observe a 'Client Id' which we have to use in our API project.
Step5:
Select 'Certificates & Secrets' left side menu and then click on the 'New Client Secret' button.
Now we have to use the 'Secret Value'(only we can copy one time so please carefully store it.) in our API application.
Add Microsoft App Settings In API Project:
In our API project let's configure our Microsoft App registration settings into the 'appsettings.Developmen.json'.
API_Project/appsettings.Development.json:
"MicrosoftSettings":{ "AppId":"0000000", "SecretId":"00000000" }
Register Microsoft Account Service In API Project:
Let's register our Microsoft Account service into 'Program.cs'.
API_Project/Program.cs:
// existing hidden for display purpose builder.Services.AddAuthentication( CookieAuthenticationDefaults.AuthenticationScheme ) .AddCookie() .AddFacebook() .AddTwitter() .AddMicrosoftAccount(mt => { mt.ClientId = builder.Configuration .GetSection("MicrosoftSettings").GetValue<string>("AppId"); mt.ClientSecret = builder.Configuration .GetSection("MicrosoftSettings").GetValue<string>("SecretId"); });
- Here configuring 'ClientId' and 'ClientSecret' with values from the 'appsettings.Development.json' file.
Implement Microsoft Authentication Login In API Project:
Let's implement the 'MicrosoftAccountLogin' action method.
API_Project/Controllers/AuthController.cs:
[HttpGet] [Route("microsoft-account-login")] public IActionResult MicrosoftAccountLogin(string returnURL) { return Challenge( new AuthenticationProperties { RedirectUri = Url.Action(nameof(MicrosoftAccountLoginCallBack), new { returnURL }) }, MicrosoftAccountDefaults.AuthenticationScheme ); }
- (Line: 3)The 'returnURL' is a Blazor Webassembly application URL.
- (Line: 5-11) The 'Challenge' method to invoke the external login providers. Here we configured the 'Microsoft Account' authentication. Here 'RedirectUri' is configured with the 'MicrosoftAccountLoginCallback' action method that gets executed on successful authentication with the Microsoft Outlook account.
API_Project/Controllers/AuthController.cs:
[HttpGet] [Route("microsoft-account-login-callback")] public async Task<IActionResult> MicrosoftAccountLoginCallBack(string returnURL) { var authenticationResult = await HttpContext .AuthenticateAsync(MicrosoftAccountDefaults.AuthenticationScheme); if (authenticationResult.Succeeded) { string email = HttpContext .User.Claims.Where(_ => _.Type == ClaimTypes.Email) .Select(_ => _.Value) .FirstOrDefault(); string firstName = HttpContext .User.Claims.Where(_ => _.Type == ClaimTypes.GivenName) .Select(_ => _.Value) .FirstOrDefault(); string lastName = HttpContext .User.Claims.Where(_ => _.Type == ClaimTypes.Surname) .Select(_ => _.Value) .FirstOrDefault(); var user = await ManageExternalLoginUser( email, firstName, lastName, "Microsoft Account" ); await RefreshExternalSignIn(user); return Redirect($"{returnURL}?externalauth=true"); } return Redirect($"{returnURL}?externalauth=false"); }
- (Line: 3)The 'returnURL' is our Blazor WebAssembly application URL.
- (Line: 5-6) Fetching authentication status of Microsoft Account.
- (Line: 9-22) On successful authentication, an initial cookie will be created by our .NET6 framework with Microsoft Outlook account claims. Here we fetching claims like 'email', 'givenname', 'surname'.
- (Line: 24-29) The 'ManageExternalLoginUser' is a common method for our external login click here to know more about this method implementation.
- (Line: 31) The 'RefreshExternalSignIn()' is a common method where we remove the default cookie and create a new cookie with our database user information. Click here to more about this method of implementation
- (Line: 32) Redirecting to Blazor WebAssembly application with query parameter 'externalauth=true'
- (Line: 34) If Microsoft authentication fails then redirect to Blazor WebAssembly application with query parameter 'externalauth=false'.
Add Microsoft Login Link In Blazor WebAssembly App:
In 'Login.razor' add the Microsoft login link.
Blazor_Wasm/Pages/Login.razor:
<div class="row"> <div class="col-md-6 offset-md-3"> <div> <a href="https://localhost:7235/auth/microsoft-account-login?returnurl=https://localhost:7218/" class="nav-link btn btn-link"> Microsoft Account </a> </div> <!-- code hidden for display purpose> </div> </div>
- Configure the 'Microsoft Account' login API and added our Blazor WebAssembly URL as a query parameter.
Step5:
Hopefully, I think this article delivered some useful information about Blazor WebAssembly Cookie Authentication Using Microsoft Account. using I love to have your feedback, suggestions, and better techniques in the comment section below.
Refer:
Part-1 Blazor WebAssembly Cookie Authentication[.NET 6]
Part-2 Blazor WebAssembly Cookie Authentication With Facebook
Part-3 Blazor WebAssembly Cookie Authentication With Twitter
Part-2 Blazor WebAssembly Cookie Authentication With Facebook
Part-3 Blazor WebAssembly Cookie Authentication With Twitter
Comments
Post a Comment