Balajiprasad's useful codes

Friday, June 14, 2024

Azure AD B2C App Registration

To Create Azure AD B2C App, please follow the below simple steps,

Prerequisites:

- You need login account for https://portal.azure.com/

- You need Directory to create Azure AD B2C Tenant

- You need Azure AD B2C Tenant under Directory Created

Steps to create Azure AD B2C App:

- Go to "App Registration" and Create "New Registration"

Give some unique name
Choose option for "Account with any identity provider...."
Redirect URI can be Web & give your application URL (For ex: https://localhost:5000 and also add https://jwt.ms for testing)
Grant consent enabled

- Go to "Authentication" tab of registration page once created

Set both Access Token & ID token
Public client flow to No

- Go to "Certificates & Secret" tab

Add new client secret with some name and store the secret details for later

- Go to "Api Permissions" tab

Client "Add Permission", select Microsoft Graph
Add Delegated permission, all available
Add Application permission, Directory.read.all, Directory.readwrite.all, User.read.all, User.readwrite.all (include as required)
Grand Admin Consent checkbox for every permissions added, make sure all set to true

Login pages:

In previous steps, we created Azure AD B2C App registration to use in our web applications. But we need Login, Registration, Password Reset pages required to add. There are two ways we can do it, Microsoft providing by default pages to use or we can customize our pages. Ref: User flows and custom policies in Azure Active Directory B2C - Azure AD B2C | Microsoft Learn

Default Pages: (User Flows)

- Using Microsoft provided default pages called User Flows, On Azure AD B2C page, you can see the tab "User Flow" to add these pages.

- We can add different flows in here for SignIn, SignUp, Signup_SignIn, PasswordReset

- Any policy xml file name referred as B2C_1_{...} it is user flow policy

- Ref: User Flow Tutorial

Customized Pages: (Identity Experience Framework)

- Using our customized pages called Identity Experience Framework or Custom policies. On Azure AD B2C page, you can see the tab "Identity Experience Framework" to add custom policies which is nothing but manually created xml policy files. Don't worry about xml files steps, all are provided in Microsoft starter pack to reuse.

- Any policy xml file name referred as B2C_1A_{...} it is custom policy

- Ref: Custom Policies Tutorial

Test:

- Once user flow or custom policies are added, you can click go and search for the SignUpSignin or SignIn policy file and click to "Run flow" then choose the app registered with one of URL to test

- These details we can configure in our Web Application as well. There are samples available to use these web application code. Ref: Web App Samples

Thursday, April 25, 2024

Html JS - Handle Browser Back Button on SPA

In Single page applications, we will not have dedicated URLs. So on click of Browser Back button it will navigate us to previous page and we lost our current page changes. We can handle this with native JavaScript functions,

Create Html Page as below to mimic SPA,

On click of each Page button, it can switch the content,

On Each Page navigation we can set the hash URL something like below using history.pushstate or location.hash

Now on click of back button use the hashchange event to detect and open the page accordingly

Here is full code:

<html>

<head>

</head>

<body>

<div id="page1" class="page">Page 1 Content</div>

<div id="page2" class="page">Page 2 Content</div>

<div id="page3" class="page">Page 3 Content</div>

</body>

$(document).ready(function () {

hideAllPages();

});

$(window).on('popstate', (e) => {

e.preventDefault();

var currentLocation = window.location.pathname;

history.push(currentLocation)

});

window.onbeforeunload = function () {

return "Are you sure you want to leave this page?";

};

addEventListener("hashchange", (event) => {

alert("New" + event.newURL);

alert("Old" + event.oldURL);

var currentHash = event.currentTarget.location.hash;

openPage(currentHash.replace("#", ""), true);

});

function hideAllPages() {

$(".page").hide();

}

function openPage(pageId, ignoreHistoryPush = false) {

hideAllPages();

$("#page" + pageId).show();

if (!ignoreHistoryPush) //This is to not add history on everytime

history.pushState({ page: pageId }, pageId, '#' + pageId);
//location.hash = pageId //This way also can set it

}

</script>

</html>