123 lines
4.8 KiB
HTML
123 lines
4.8 KiB
HTML
<html>
|
|
<head>
|
|
<title>Calling a Web API as a user authenticated 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="https://secure.aadcdn.microsoftonline-p.com/lib/0.1.1/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: 'CDA53D17-6683-4EA7-B6D7-B6DB23E60DED',
|
|
redirectUri: "https://localhost:44324/Spa.html",
|
|
authority: "https://localhost:44324/tfp/Identity/signinsignup",
|
|
b2cScopes: ["https://localhost/DFC7191F-FF74-42B9-A292-08FEA80F5B20/v2.0/ProtectedApi/read"], // <<issuer>>/<<resourceAppName>>/<<resourceAppScope>>.
|
|
webApi: 'https://localhost:44324/Home/Contact',
|
|
};
|
|
</script>
|
|
|
|
<script>
|
|
"use strict";
|
|
var clientApplication = new Msal.UserAgentApplication(
|
|
applicationConfig.clientID,
|
|
applicationConfig.authority,
|
|
function (errorDesc, token, error, tokenType) {
|
|
// Called after loginRedirect or acquireTokenPopup
|
|
}, { redirectUri: applicationConfig.redirectUri });
|
|
|
|
function login() {
|
|
clientApplication.loginPopup(applicationConfig.b2cScopes).then(function (idToken) {
|
|
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);
|
|
});
|
|
})
|
|
}, function (error) {
|
|
logMessage("Error during login:\n" + error);
|
|
});
|
|
}
|
|
|
|
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;
|
|
var callWebApiButton = document.getElementById('callApiButton');
|
|
callWebApiButton.setAttribute('class', 'visible');
|
|
}
|
|
|
|
function callApi() {
|
|
clientApplication.acquireTokenSilent(applicationConfig.b2cScopes).then(function (accessToken) {
|
|
callApiWithAccessToken(accessToken);
|
|
}, function (error) {
|
|
clientApplication.acquireTokenPopup(applicationConfig.b2cScopes).then(function (accessToken) {
|
|
callApiWithAccessToken(accessToken);
|
|
}, function (error) {
|
|
logMessage("Error acquiring the access token to call the Web api:\n" + error);
|
|
});
|
|
})
|
|
}
|
|
|
|
function callApiWithAccessToken(accessToken) {
|
|
// Call the Web API with the AccessToken
|
|
$.ajax({
|
|
type: "GET",
|
|
url: applicationConfig.webApi,
|
|
headers: {
|
|
'Authorization': 'Bearer ' + accessToken,
|
|
},
|
|
}).done(function (data) {
|
|
logMessage("Web APi returned:\n" + JSON.stringify(data));
|
|
})
|
|
.fail(function (jqXHR, textStatus) {
|
|
logMessage("Error calling the Web api:\n" + textStatus);
|
|
})
|
|
}
|
|
|
|
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));
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html> |