This blog will present a step-by-step process to help you create a custom login page for the Power Apps Portal.
Prerequisites: –
In the above code, the
element indicates where Azure AD B2C content is to be inserted.Tip: You can also download the sample template code from Git.
To host your HTML content in Blob storage, perform the following steps:
1. Sign in to the Azure portal.
2. Make sure you’re using the directory that contains your Azure AD tenant, and which has a subscription.
3. Select the Directories + Subscriptions icon in the portal toolbar.
4. On the Portal Settings | Directories + Subscriptions page, find your Azure AD directory under the Directory name list, and then select Switch.
5. In the Azure portal, search for and select Storage Accounts
6. Select à + Create.
7. Select a Subscription for your storage account.
8. Create a new Resource Group or select an existing one.
9. Enter a unique Storage Account Name for your storage account.
10. Select the geographical Region for your storage account.
11. Performance can remain Standard.
12. Redundancy can remain Geo-Redundant Storage (GRS).
13. Select Review + Create and wait for a few seconds for Azure AD to run the validation process.
14. It will take few minutes to create the Blob Storage Account. After the deployment is complete, the storage account page opens automatically. If not, you would get a notification with a button labeled as Go to resource.
To create a public container in Blob storage, perform the following steps:
1. Under Data storage in the left-hand menu, select Containers.
2. Select à+ Container.
3. For Name, enter root. The name can be a name of your choosing, for example Contoso, but we use root in this example for simplicity.
4. For Public access level, select Blob.
5. Select Create to create the container.
Configure Blob storage for Cross-Origin Resource Sharing by performing the following steps:
1. Navigate to your storage account.
2. In the left-hand menu, under Settings, select Resource sharing (CORS).
3. For Allowed origins, enterhttps://your-tenant-name.b2clogin.com. Replace your-tenant-name with the name of your Azure AD B2C tenant. For example, https://fabrikam.b2clogin.com. Use all lowercase letters when entering your tenant name.
4. For Allowed Methods, select both GET and OPTIONS.
5. For Allowed Headers, enter an asterisk (*).
6. For Exposed Headers, enter an asterisk (*).
7. For Max age, enter 200.
8. At the top of the page, select Save.
1. Make sure you’re using the directory that contains your Azure AD B2C tenant.
2. In the Azure portal, search for and select Azure AD B2C.
3. In the left-hand menu, select User flows, and then select the B2C_1_signinuser flow.
4. Select Page Layouts, and then under Unified select Sign-Up Or Sign-In Page; Select Yes for Use Custom Page Content.
5. In Custom Page URL, enter the URI for the custom-ui.html file that you recorded earlier.
6. At the top of the page, select Save.
Now Test the user flow.