How to render two custom policies within the same HTML file on Azure B2C?

user_11107192 0
Viewed 140

is it possible to achieve the aimed scenario?

<!DOCTYPE html>
<html>
<head>
    <title>My Product Brand Name</title>
</head>
<body>
    <!-- api.localaccountsignup section -->
    <div id="api1"></div>
    <!-- api.signuporsignin -->
    <div id="api2"></div>
</body>
</html>

Ideally, I'd have a frontend that hosts local account signup and signup or signing, as the image below

image

azure-ad-b2c-custom-policy azure-ad-b2c azure-active-directory
1 Answers

Create 2 policies.

  1. A Sign Up policy. It will use B2C to render the "Full Name", "Email" and "Password" fields. Use custom HTML to add 3 buttons "Google", "Facebook", "LinkedIn". Each button will link to your application: myapp.com/<social_provider_name>. When a user hits one of these links, the app should send the user to the 2nd policy with a respecticve domain_hint parameter.

  2. This policy will have "Google", "Facebook", "LinkedIn" IdPs configured. Each will be configured for direct sign in. The app will pass a parameter domain_hint based off of the users action from Policy 1, and will then cause the user to hit the Social IdP they selected.

Adding parameters using MSAL: https://docs.microsoft.com/en-us/azure/active-directory-b2c/enable-authentication-spa-app-options#pass-a-custom-query-string-parameter

user_83573570
Related