Angular 8 与 Azure B2C 身份验证（使用 MSAL.js）

Question

I'm trying to create a basic authentication app (SPA) using Angular 8 with Azure B2C login. I'm using this sample here .
I already configured the "app registration" for the SPA, but I'm not sure whats is the "Web API" in the sample. When I run the project I can login but after redirect to Angular I got the following error:

The application with ID '<MY_CLIENT_ID>' cannot get an ID token either because the openid scope was not provided in the request or the application is not authorized for it.

Can someone help me, please?

Thank you

Answer 1

While registering your application in the Azure AD B2C you need to configure the consent for openid and offline_access permission.

If you missed this configuration you can enable this in App -> API Permissions- > Microsoft Graph-> Delegated Permissions -> openid

This permission helps you to sign in to app with your work or school account and allow the app to see basic user profile information

Answer 2

this sample has 2 methods of setup, either use their demo tenant, where you don't set anything, just run. or if you are setting your own app registration in the spa, which it appears that you are, then you also need to set up the web api from a different sample, as per the readme, https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi so you need to set this up, then in the API permissions, MY APIs will show in the SPA app registration.