Forum Discussion
TiagoC
Jan 23, 2025Copper Contributor
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.