Skip to content

Sample Azure Active Directory B2C with an ASP.NET Core 3 Backend and an Angular frontend

License

Notifications You must be signed in to change notification settings

kevinhillinger/azureadb2c-aspnetcore-sample

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Getting Started

Developer Setup

  1. Install Visual Studio Code
  2. Install the Azure AD B2C custom policy extension
  3. Install the Azure Tools extension
  4. An Azure Subscription - to create the B2C tenant
  5. Azure Cloud Shell - to execute the scripts that do a lot for you :)

Cloud Shell

When working with this repository, you will clone within the cloud shell.

mkdir workspace && cd workspace
git clone https://github.com/kevinhillinger/azureadb2c-aspnetcore-sample.git
cd azureadb2c-aspnetcore-sample

Once this is done, you will be able to execute scripts within the ./scripts folder.

B2C Setup

To build this sample with custom policies in B2C, the following things needs to be done:

  1. Create a B2C tenant and associate it to your subscription
  2. Create the keys and application registrations in B2C for the Identity Experience Framework (to use the custom policies)
  3. Create the application registration for extension attributes (custom attributes for users)
  4. Create an application registration in the B2C tenant for the Angular frontend
  5. Create an application registration in the B2C tenant for the Web API backend
  6. Update the b2c/policies/appsettings.json with the values from steps 1-5
  7. Build the custom policies in Visual Studio Code.

Azure AD B2C Setup

Federating with an Azure AD Tenant

Documentation here

1. Create a B2C tenant and associate it to your subscription

Here are the instructions. Follow them for the B2C tenant.

2. Create a registration for the Angular frontend

The frontend of the app needs to be represented in b2c, i.e. b2c needs to know about it as "[relying party(https://en.wikipedia.org/wiki/Relying_party)]" application, also known as a service provider in the SAML days of yore.

Instructions

Follow the steps here

  • Instead of naming it webapp1, call it: Contoso Portal Frontend

This needs to represent the Angular app running in the browser. Set the clientID property in app.module.ts in the sample to the app id (client id) once this is created.

imports: [
    MsalModule.forRoot({ 
      clientID: '<here is where the application id goes>',
      ...
    }),

3. Create the keys and application registrations for the Identity Experience Framework

The encryption and signing keys plus the application registrations are needed to get custom policies working.

Follow the instructions here, but ignore the instructions where it says to create a Facebook key.

You don't need to get the custom policy start pack, but you can look over it if you want to.

4. Upload the policy files

Upload the policy files in b2c/policies to B2C.

  • Select the Identity Experience Framework menu item in your B2C tenant in the Azure portal.
  • Select Upload custom policy.

Upload the base file first, followed by the extension files, then the "profile" files. Example:

  1. TrustFrameworkBase.xml
  2. TrustFrameworkExtensions.xml
  3. SignUpOrSignin.xml
  4. ProfileEdit.xml
  5. PasswordReset.xml

https://devblogs.microsoft.com/aspnet/jwt-validation-and-authorization-in-asp-net-core/ https://developer.okta.com/blog/2018/03/23/token-authentication-aspnetcore-complete-guide

About

Sample Azure Active Directory B2C with an ASP.NET Core 3 Backend and an Angular frontend

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published