使用 Angular SPA MSAL 库在 Azure B2C 上执行用户流程

Question

I have setup a Azure B2C for experimenting, and have created a signupandsign as a user flow.

I've followed the github samples on how to use the MSAL library from Angular 2+ and have as a result got this format:

export const protectedResourceMap: [string, string[]][] = [
  ['https://graph.microsoft.com/v1.0/me', ['user.read']],
];

function MSALConfigFactory(): Configuration {
  return {
    auth: {
      clientId: environment.clientId,
      authority: environment.authority,
      validateAuthority: true,
      redirectUri: environment.redirectUrl,
      postLogoutRedirectUri: environment.redirectUrl,
      navigateToLoginRequestUrl: true,
    },
    cache: {
      storeAuthStateInCookie: false, // set to true for IE 11
    },
  };
}

function MSALAngularConfigFactory(): MsalAngularConfiguration {
  return {
    popUp: false,
    protectedResourceMap
  };
}

export const environment = {
  production: false,
  clientId: '22ccxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
  authority: 'https://login.microsoftonline.com/bc5xxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/',
  redirectUrl: 'http://localhost:4200'
};

But all it does it take to sign in page, doesn't give me any options for sign up. How do i trigger the signupandsign user flow from my Angular SPA?

Answer 1

The sample which you are referring helps you to Sign in users and call the Microsoft Graph API from an Angular single-page application.

In the document you can see below note which points you to the tutorial

Note: A more detailed tutorial covering this sample can be found here. 

Please refer the Sample for B2C Angular SPA.