In Previous tutorial I explained how to use Azure AD B2C . This tutorial is a continuous part 3 of the previous tutorial. Here I will show how we can add more attribute in user profile and update those from UI .
You can check Previous tutorial how to setup sign in and register user in B2C. Here I will use same app which created for Previous tutorial. I assume that you have already set sign up/sign In project and continue from there.
1. User Flow : First we need to create new user flow to update profile .
Go to B2C directory -> user flow option from left menu -> Add User Flow-> Select Profile Editing and create .
In next screen enter policy name and select required field which you want to see/edit in profile .you can add more attribute by click show more.
Copy the policy name from the added user flow list "B2C_1_user_profile" and open visual studio .I am using project which create Previous blog .
Open appsetings.json and add below highlighted config
{
/*
The following identity settings need to be configured
before the project can be successfully executed.
For more info see https://aka.ms/dotnet-template-ms-identity-platform
*/
"AzureAdB2C": {
"Instance": "xxxx",
"TenantId": "xxxx",
"ClientId": "xxx",
"Domain": "xxx",
"SignUpSignInPolicyId": "B2C_1_singupsing",
"EditProfilePolicyId": "B2C_1_user_profile", // this line added to update profile
"CallbackPath": "/signin-oidc" // "/signin/B2C_1_sign_up_in" // defaults to /signin-oidc
},
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft": "Warning",
"Microsoft.Hosting.Lifetime": "Information"
}
},
"AllowedHosts": "*"
}
Go back to _layout.cshtml and add the below link to redirect to profile page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - AzureB2CExamples</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">AzureB2CExamples</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item"><a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="MyProfiles">My Profile</a></li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="EditProfile">
Edit Profile
</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
</ul>
<partial name="_LoginPartial" />
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - AzureB2CExamples - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>
Run the application and after sign in click on "Edit Profile" . you will be redirected to Default Edit form where you can update user profile.
Click Sign In and login with your user Id and password
After Login you will be redirected to home page , on home page click on Edit Profile
You will be redirected to default profile update page where you can update profile and continue .
After updating record you will be redirected to previous page . Similarly you can do password reset feature also. So by this way in less coding you can implement complete user management .
That's It . We have finished the series of Azure B2C .
you can download all the azure samples code : https://github.com/mkumar8184/azure-sdk-services-samples
No comments:
Post a Comment
Thanks for your valuable comments