Azure B2C AD Redirect to Angular App

3
votes

I am trying to run this Angular 4 example that uses Azure B2C Active Directory and adal-angular 4.

To run the app, in Azure I created a tenant, registered a the app in AD B2C and added a reply Url of https://localhost:4200. I then added the app id and tenant to my Angular App.

When I run the app, it correctly redirects to https://login.microsoftonline.com... on load for login. Logging in correctly redirects to https://localhost:4200.

When I log out, there is a problem. The app is redirected to this static logout page which doesn't redirect back to my app.

I tried registering an app in Azure Active Directory (not B2C), moving its config data into my Angular App, and when I run it and a log out it redirects temporarily to this "logging you out" page which redirects back to the app.

The the redirect urls after logout are identical other than the tenant name, only the B2C just dies. This happens in both Chrome and Edge.

I expect that this is not just a difference in functionality between B2C and regular AD. I checked my configurations, but maybe this is something in the Azure portal I missed?

2
angularazure-active-directoryopenid-connectadalazure-ad-b2c

2 Answers

1
votes

You should use MSAL.js w/ Azure AD B2C.

ADAL ... is designed to only work against Azure AD "classic" (e.g. - NOT B2C)

Reference: MSAL or ADAL library for use with Azure AD B2C and Xamarin

See this Angular 4 example that uses MSAL.js.

1
votes

The logout request should include both the "p" and "post_logout_redirect_uri" parameters such as:

GET https://login.microsoftonline.com/{tenant}/oauth2/v2.0/logout?p=b2c_1_sign_up_sign_in&post_logout_redirect_uri=https%3A%2F%2Flocalhost%3A4200%2F

If the "post_logout_redirect_uri" parameter isn't specified, then Azure AD B2C displays a generic message.