A project boilerplate for a Single Page Application in Vue JS calling an API in DotNetCore and authenticated with Azure AD B2C. The web app was generated using the vue-cli tool.
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
- Create an Azure Active Directory B2C tenant - take note of your directory domain. This will have the format of {domain}.onmicrosoft.com
- Register your web API - take note of the Application Id and App ID URI.
- Register your web application - take note of the Application Id (Client Id)
- Add Api Access to your web app - Skip step 1 as we are not using a client secret in this application. Instead, we use the access token to connect to our API.
- Create a sign-up or sign-in policy
Go to the file application.config.js. Replace the appropriate placeholders under the applicationConfig object with the values derived from your Azure B2C applications.
const applicationConfig = {
clientID: '{Web App Application Id}',
authority: 'https://login.microsoftonline.com/tfp/{Directory Domain}/{Sign-up Or Sign-in Policy}/v2.0/.well-known/openid-configuration',
scopes: ['openid', '{API App Id URI}/user_impersonation']
}
Go to appsettings.json in the API project and replace the appropriate placeholders
"AzureAdB2C": {
"Instance": "https://login.microsoftonline.com/tfp/",
"ClientId": "{API Application Id}",
"Domain": "{Directory Domain}",
"SignUpSignInPolicyId": "{Sign-up Or Sign-in Policy}"
}