ttchuah/ADB2CTest.html

## ADB2CTest.html
<html>
<head>
    <title>Authentication with Msal.js app</title>
    <style>
        .hidden {
            visibility: hidden
        }

        .visible {
            visibility: visible
        }

        .response {
            border: solid;
            border-width: thin;
            background-color: azure;
            padding: 2px;
        }
    </style>
</head>
<body>
    <!-- bluebird only needed if this page needs to run on Internet Explorer -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js" class="pre"></script>
    <!-- <script src="dist/msal.js" class="pre"></script> -->
    <script src="https://secure.aadcdn.microsoftonline-p.com/lib/0.2.3/js/msal.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" class="pre"></script>

    <h2>Getting an access token with Azure AD B2C and calling a Web API</h2>
    <div>
        <div id="label">Sign-in with Microsoft Azure AD B2C</div>

        <button id="auth" onclick="login()">Login</button>
        <button id="callApiButton" class="hidden" onclick="callApi()">Call Web API</button>
    </div>

    <pre class="response"></pre>

    <script class="pre">
        // The current application coordinates were pre-registered in a B2C tenant.
        var applicationConfig = {
            clientID: '4fbbddff-ad1f-4fe6-b9d6-804078c082c1',
            authority: "https://login.microsoftonline.com/tfp/dv0Dop000DevAad000.onmicrosoft.com/B2C_1_SiUpIn",
            b2cScopes: ['https://dv0Dop000DevAad000.onmicrosoft.com/api/backend_api', 'https://dv0Dop000DevAad000.onmicrosoft.com/api/user_impersonation'],
            webApi: 'https://dv0som000devweb01.azurewebsites.net/api/values',
        };
    </script>

    <script>
        "use strict";
        var logger = new Msal.Logger(loggerCallback, { level: Msal.LogLevel.Verbose });
        function loggerCallback(logLevel, message, piiEnabled) {
            console.log(message);
        }

        var clientApplication = new Msal.UserAgentApplication(applicationConfig.clientID, applicationConfig.authority, authCallback, { logger: logger, cacheLocation: 'localStorage' });

        function authCallback(errorDesc, token, error, tokenType) {
            if (token) {
                let clientApplication = this;
                clientApplication.acquireTokenSilent(applicationConfig.b2cScopes).then(function (accessToken) {
                    updateUI();
                }, function (error) {
                    clientApplication.acquireTokenPopup(applicationConfig.b2cScopes).then(function (accessToken) {
                        updateUI();
                    }, function (error) {
                        logMessage("Error acquiring the popup:\n" + error);
                    });
                });
            }
            else {
                logMessage(error + ":" + errorDesc);
            }
        }

        function updateUI() {
            var userName = clientApplication.getUser().name;
            logMessage("User '" + userName + "' logged-in");
            var authButton = document.getElementById('auth');
            authButton.innerHTML = 'logout';
            authButton.setAttribute('onclick', 'logout();');
            var label = document.getElementById('label');
            label.innerText = "Hello " + userName;
        }

        function logout() {
            // Removes all sessions, need to call AAD endpoint to do full logout
            clientApplication.logout();
        }

        function logMessage(s) {
            document.body.querySelector('.response').appendChild(document.createTextNode('\n' + s));
        }

         function login() {
            clientApplication.loginRedirect(applicationConfig.b2cScopes);
        }


    </script>
</body>
</html>
	<html>
	<head>
	<title>Authentication with Msal.js app</title>
	<style>
	.hidden {
	visibility: hidden
	}

	.visible {
	visibility: visible
	}

	.response {
	border: solid;
	border-width: thin;
	background-color: azure;
	padding: 2px;
	}
	</style>
	</head>
	<body>
	<!-- bluebird only needed if this page needs to run on Internet Explorer -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js" class="pre"></script>
	<!-- <script src="dist/msal.js" class="pre"></script> -->
	<script src="https://secure.aadcdn.microsoftonline-p.com/lib/0.2.3/js/msal.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js" class="pre"></script>

	<h2>Getting an access token with Azure AD B2C and calling a Web API</h2>
	<div>
	<div id="label">Sign-in with Microsoft Azure AD B2C</div>

	<button id="auth" onclick="login()">Login</button>
	<button id="callApiButton" class="hidden" onclick="callApi()">Call Web API</button>
	</div>

	<pre class="response"></pre>

	<script class="pre">
	// The current application coordinates were pre-registered in a B2C tenant.
	var applicationConfig = {
	clientID: '4fbbddff-ad1f-4fe6-b9d6-804078c082c1',
	authority: "https://login.microsoftonline.com/tfp/dv0Dop000DevAad000.onmicrosoft.com/B2C_1_SiUpIn",
	b2cScopes: ['https://dv0Dop000DevAad000.onmicrosoft.com/api/backend_api', 'https://dv0Dop000DevAad000.onmicrosoft.com/api/user_impersonation'],
	webApi: 'https://dv0som000devweb01.azurewebsites.net/api/values',
	};
	</script>

	<script>
	"use strict";
	var logger = new Msal.Logger(loggerCallback, { level: Msal.LogLevel.Verbose });
	function loggerCallback(logLevel, message, piiEnabled) {
	console.log(message);
	}

	var clientApplication = new Msal.UserAgentApplication(applicationConfig.clientID, applicationConfig.authority, authCallback, { logger: logger, cacheLocation: 'localStorage' });

	function authCallback(errorDesc, token, error, tokenType) {
	if (token) {
	let clientApplication = this;
	clientApplication.acquireTokenSilent(applicationConfig.b2cScopes).then(function (accessToken) {
	updateUI();
	}, function (error) {
	clientApplication.acquireTokenPopup(applicationConfig.b2cScopes).then(function (accessToken) {
	updateUI();
	}, function (error) {
	logMessage("Error acquiring the popup:\n" + error);
	});
	});
	}
	else {
	logMessage(error + ":" + errorDesc);
	}
	}

	function updateUI() {
	var userName = clientApplication.getUser().name;
	logMessage("User '" + userName + "' logged-in");
	var authButton = document.getElementById('auth');
	authButton.innerHTML = 'logout';
	authButton.setAttribute('onclick', 'logout();');
	var label = document.getElementById('label');
	label.innerText = "Hello " + userName;
	}

	function logout() {
	// Removes all sessions, need to call AAD endpoint to do full logout
	clientApplication.logout();
	}

	function logMessage(s) {
	document.body.querySelector('.response').appendChild(document.createTextNode('\n' + s));
	}

	function login() {
	clientApplication.loginRedirect(applicationConfig.b2cScopes);
	}


	</script>
	</body>
	</html>