In this article, we are going to do a demo on Azure AD B2C authentication in the MVC application[.NET 6].
(2) Now select your appropriate subscription.
(3) Search 'Resource Provider' and then 'Microsoft.AzureActiveDirectory' should be registered.
Step 4:
(3) Click on the 'Create' button.
(2)Fill up the App registration form
(2) Now let's create a user profile for Sign-in&Sing-up.(3) Complete the user flow form.
ClientId:Domain:
(4) Now after registration we successfully logged into the application.
Azure AD B2C Configuration Steps:
Step1:
Login into Azure Portal(https://portal.azure.com/)
Step2:
Chose the directory that has the subscription(eg: free, student, pay-as-you-go, etc).
(1) Select the 'Directories + Subscriptions' on the azure portal menu.
(2) Left side menu select 'Directories + Subscriptions'. Bottom select 'All Directories' tab where we can select all directories we have the option to 'switch'.
Here I have only one directory that has my subscription. So if we have multiple directories then we can see a 'switch' option.Step 3:
The 'Microsoft.AzureActiveDirectory' resource provider needs to register with our 'subscription'.
(1) On the Azure portal home page select 'Subscriptions'.
(3) Search 'Resource Provider' and then 'Microsoft.AzureActiveDirectory' should be registered.
Step 4:
Create Azure AD B2C tenant.
(1)Click on 'Create a resource' on the azure home page.
(2)Search and select 'Azure Active Directory B2C'.(4) Chose any one option from 'Create New Azure Active Directory B2C' or 'Link an existing Azure Active Directory B2C into your subscription'.
(5)Create a tenant.- Organization Name - Enter the name of your organization.
- Initial Domain Name - By default, the basic domain name at 'onmicrosoft.com' is included with your directory. Later, you can add a domain name that your organization.
- Country/Region - Select the nearest server location to you.
- Subscription - select your subscription.
- Resource Group - Create a new group if you don't have any existing Resource Group.
- Resource Grop Location.
Step 5:
So click on the 'Directories + Subscriptions' menu and then 'switch' to our newly-created directory.
Step 6:After switching to the directory, on the azure landing portal, search and select 'Azure AD B2C'.
Step 7:Register a web application.
(1) Left menu under 'Manage' select the 'App Registrations' and then click on 'New Registration'.
- Name - A display name for the application.
- Support account types - use the default selection(last radio button option).
- In the 'Redirect URL' section, select the dropdown value as 'Web', and in the text box enter our MVC(or any web application) URL.(Local development we can register 'localhost' so this URL can be updated any time later also)
- Check the 'Permission' check box.
(3) After successful Application registration we can observe a generated 'Application Id' which we have to use in our MVC application in later steps.
Step 8:Create a Client Secret.
(1) Left side menu under 'Manage' select 'Certificates & Secrets'. Next click on 'New Client Secret'. Next on popover enter the description for the secret and click on 'Create'.
(2) On successful creation secrets can be viewed like below.(1) Under 'Manage', select 'Authentication' tab, then enable the 'Access Token' & 'ID Token'.
Step 10:Create User flow for Sign-in &Sign-up.
(1) In 'Azure AD B2C', under the 'Policies' select 'User Flows'. Next click on the 'New User Flow'.
- Name - Register a name for our flow
- Identity Providers - Select 'Email Signup' means option for email & password login.
- Multifactor authentication & Conditional Access options can be left default.
- User attributes are values collected on sign-up. Claims are values about the user returned to the application in the token. You can create custom attributes as well.
Create A .NET6 MVC App With Azure AD B2C Authentication:
Let's create a .Net6 MVC sample application with individual Azure AD B2C authentication to accomplish our demo. We can use either Visual Studio 2022 or Visual Studio Code(using .NET CLI commands) to create any.Net6 application. For this demo, I'm using the 'Visual Studio Code'(using the .NET CLI command) editor.
CLI command
dotnet new mvc -o Your_Project_Name -au IndividualB2C
dotnet new mvc -o Your_Project_Name -au IndividualB2C
Configure Azure AD B2C Settings In appSettings.json:
let's configure the Azure AD B2C Settings in appSettings.json.
"AzureAdB2C": { "Instance": "", "ClientId": "", "Domain": "", "SignedOutCallbackPath": "", "SignUpSignInPolicyId": "", "ResetPasswordPolicyId": "", "EditProfilePolicyId": "", "CallbackPath": "" },Instance:
In 'Azure AD B2C', select 'App registration' next select 'Endpoints'. Copy the domain name from the urls on the popover.
eg: Instance: "https://naveenbommiditechseeker.b2clogin.com"
Registered Application Id
In 'Azure AD B2C', Domain name value.
SignedOutCallbackPath:The 'SignedOutCallbackPath' value must be '/signout/{your_signout_flow_name}'. Here in the path 'signout' keyword is fixed string.
eg: SignedOutCallbackPath: "/signout/B2C_1_Sign_SignUp_1"
So in 'Azure AD B2C' under 'Policies' select 'Users Flows' and copy the name of the signout flow.
SignUpSignInPolicyId:Directly assign the name of 'SignIn&SingOut' policy.
eg: SignUpSignInPolicyId : "B2C_1_Sign_Signup_1"
ResetPasswordPolicyId & EditProfilePolicyId:
Similarly like 'SignIn&SingOut' policy we can create for 'ResetPasswor' and 'EditProfile' then asing those policy names
CallbackPath:
A fixed string that is '/signin-oidc'. This path should be in redirect URLs registered in the 'App Registration' of the 'Azure AD B2C'
Test Authentication Flow:
(1) Run the application and click on 'Login'
(2) Now it redirects us to our Azure AD B2C authentication domain that loads the login page.
and then click on 'Sign-Up'
(3) Register our user into the 'Azure AD B2C'.(4) Now after registration we successfully logged into the application.
Support Me!
Buy Me A Coffee
PayPal Me
Video Session:
Wrapping Up:
Hopefully, I think this article delivered some useful information on Azure Active Directory B2C Authentication in .NET6 MVC application. I love to have your feedback, suggestions, and better techniques in the comment section below.
my signout button is not coming why ??
ReplyDelete