Javascript - Logging In with SSO

This example uses MSAL.js v1.x and the Implicit Grant flow:

https://docs.microsoft.com/en-us/azure/active-directory/develop/msal-js-initializing-client-applications

Please ensure your App Registration in Azure AD has the following options configured:

Implicit Grant

[ x ] Access tokens

[ x ] ID tokens

OR in the manifest file:

"oauth2AllowIdTokenImplicitFlow": true,
"oauth2AllowImplicitFlow": true,

Redirect URIs

You will need to enter the exact url or the html page requesting the login.

Authentication → Single-page Application → Redirect URIs

OR in the manifest file:

    "replyUrlsWithType": [
        {
            "url": "https://examplesite.azurewebsites.net/index.html",
            "type": "Spa"
        }]

Please update the ClientId and CxApiUrl to suit you configuration below:

<html>
<head>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script src="https://alcdn.msftauth.net/lib/1.3.3/js/msal.js"></script>
	<script type='text/javascript'>
		const cxApiUrl = "https://au.itwocx.com/api/20.07/",
			  resourceId = "52e5f8a4-8b0e-455f-9df4-5beb7c37dd18",
			  msalConfig = {
				  auth: {
					clientId: '{ClientId}',
					authority: "https://login.microsoftonline.com/common"
				  }
			  },
			  msalInstance = new Msal.UserAgentApplication(msalConfig);
	
		function ssoLogin() {
			$("#ssoResult,#error,#cxResult").html("").hide();
			
			var request = {
				scopes: [ resourceId + "/.Default" ]
			}
	
			msalInstance.loginPopup(request)
				.then(loginResponse => {					
					var account = msalInstance.getAccount();										
					if (account) {					
						msalInstance.acquireTokenSilent(request)
							.then(response => {							
								$("#ssoResult").html("User Name: " + account.userName + "<br/>Access Token: " + response.accessToken).show();
								cxLogin(response.accessToken);													
							}).catch(error => {
								$("#error").html("Error: " + error).show();
							});
					}    
				}).catch(error => {
					$("#error").html("Error: " + error).show();
				});
		}
		
		function cxLogin(accessToken) {
			$("#cxResult").html("<div class='spinner-border' />").show();
			$.post({
				url: cxApiUrl + "Api/Login/ByUserToken",
				headers: {
					"Authorization": "Bearer " + accessToken
				}
			}).done(function(loginResponse) {
				$("#cxResult").html("Login Response: <pre>" + JSON.stringify(loginResponse, null, '\t') + "</pre>").show();					
				cxRequest(loginResponse.Key);
			}).fail(function(data) {
				$("#error").html("Error: " + data).show();
			});
		}
		
		function cxRequest(key) {
			$.ajax({
				url: cxApiUrl + "Api/Project/Get?key=" + key
			}).done(function(projectResponse) {
				$("#cxResult").append("Project Response: <pre>" + JSON.stringify(projectResponse, null, '\t') + "</pre>");
			})		
		}	
	</script>
</head>
<body>
	<div class="container mt-3">
		<h3>iTWOcx - Javascript SSO Login Example</h3>
		<button type="button" class="btn btn-primary mt-3" onclick='ssoLogin()'>SSO Login</button>
		<div id="ssoResult" class="alert alert-success mt-3 text-break" role="alert" style="display: none"></div>	
		<div id="cxResult" class="alert alert-primary mt-3 text-break" role="alert" style="display: none"></div>
		<div id="error" class="alert alert-danger mt-3 text-break" role="alert" style="display: none"></div>
	</div>
</body>
</html>