Forum Discussion

TiagoC's avatar
TiagoC
Copper Contributor
Jan 23, 2025

angular-b2c-sample-app and iframes

I have a project that I based on this sample project:
https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v3-samples/angular-b2c-sample-app

Currently I have the custom policies as intended. Button, redirects to a azure page, finishes w/e the custom policy is, redirects back to the web app.

But now I need to using said custom policy as an iframe, basically the client requests that there is less one layer of buttons to pressed. Therefore I want the custom policy to be displayed as an iframe, making the web app feel more single page.

I have looked around, but can't really find anything detailed enough.

Any help is welcomed :)

  • Take this:

     

    • Enable Custom Policy for JavaScript: Ensure your custom policy is enabled for JavaScript. This is necessary for embedding the B2C UI in an iframe.
    • Configure Web Application: Set up your web application to generate an authorization request and redirect the user to the Azure AD B2C policy.
    • Set Up the Iframe: Add an iframe element to your web application's HTML. The src attribute of the iframe should point to the sign-in controller (e.g., /account/SignUpSignIn).
    • Handle Authentication: After the user completes the authentication process, the ID token will be received by your application. Validate the token and reload the main page to complete the authorization flow.
      <iframe src="/account/SignUpSignIn" width="100%" height="500px"></iframe>
      

      Replace /account/SignUpSignIn with the appropriate sign-in controller in your application.

Resources