Create Custom Login Buttons

Often times you might find yourself needing the ability to add the login buttons that are present on the sign in page, on other pages such as the Home page. A simple copy/paste of these html elements unfortunately will not work.  Trust me, I've tried.  You can however still create your own.  Below are steps to create custom login buttons for both Azure AD and Azure AD B2C.

First, Azure AD:

Here is the HTML for the button. you will need to add this to a web page in the page copy section or on a Web Template.

See Azure AD section of Attached Text File

You will notice however that you will need to provide your tenant ID.  Where is this ID located you ask?  Fortunately, if you don't know your AAD Tenant ID, you can get this on the original sign in button.  To do this, browse to your Power Pages site and click on the Sign in button.  Right click on the Azure AD button and choose inspect.  This will show you the elements of the website.  In that Sign in button element, you will see the ID of the button.  It will contain your Tenant ID.

Simply copy and paste that ID into your HTML.

Second, Azure AD B2C:

This one is more simple.  Just copy and paste to the Page Copy section of a Web Page or Web Template.

See Azure AD B2C section of Attached Text File

You will of course need to have an Azure B2C connection already created for this to work.  For reusability, you can also place this HTML into a Content Snippet and then place that snippet on the Page.  Either way should work fine.