Skip to content
This repository has been archived by the owner. It is now read-only.

Commit d504aaf

Browse files
sameeragsameerag
authored
Merge pull request #26 from Azure-Samples/B2C_MsalJS_APIChanges
B2C msal js api changes
2 parents 5b4d6c4 + 88eb256 commit d504aaf

File tree

3 files changed

+523
-103
lines changed

3 files changed

+523
-103
lines changed

‎index.html‎

Lines changed: 133 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,149 @@
11
<html>
2+
23
<head>
3-
<title>Calling a Web API as a user authenticated with Msal.js app</title>
4-
<style>
5-
.hidden {
6-
visibility: hidden
7-
}
4+
<title>Calling a Web API as a user authenticated with Msal.js app</title>
5+
<style>
6+
.hidden {
7+
visibility: hidden
8+
}
89

9-
.visible {
10-
visibility: visible
11-
}
10+
.visible {
11+
visibility: visible
12+
}
1213

13-
.response {
14-
border: solid;
15-
border-width: thin;
16-
background-color: azure;
17-
padding: 2px;
18-
}
19-
</style>
14+
.response {
15+
border: solid;
16+
border-width: thin;
17+
background-color: azure;
18+
padding: 2px;
19+
}
20+
</style>
2021
</head>
22+
2123
<body>
22-
<!-- bluebird only needed if this page needs to run on Internet Explorer -->
23-
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js" class="pre"></script>
24-
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/0.1.1/js/msal.min.js"></script>
25-
<script src="https://code.jquery.com/jquery-3.2.1.min.js" class="pre"></script>
26-
27-
<h2>Getting an access token with Azure AD B2C and calling a Web API</h2>
28-
<div>
29-
<div id="label">Sign-in with Microsoft Azure AD B2C</div>
30-
<button id="auth" onclick="login()">Login</button>
31-
<button id="callApiButton" class="hidden" onclick="callApi()">Call Web API</button>
32-
</div>
33-
34-
<pre class="response"></pre>
35-
36-
<script class="pre">
37-
// The current application coordinates were pre-registered in a B2C tenant.
38-
var applicationConfig = {
39-
clientID: 'e760cab2-b9a1-4c0d-86fb-ff7084abd902',
40-
authority: "https://login.microsoftonline.com/tfp/fabrikamb2c.onmicrosoft.com/b2c_1_susi",
41-
b2cScopes: ["https://fabrikamb2c.onmicrosoft.com/helloapi/demo.read"],
42-
webApi: 'https://fabrikamb2chello.azurewebsites.net/hello',
43-
};
44-
</script>
24+
<!-- bluebird only needed if this page needs to run on Internet Explorer -->
25+
<!-- msal.min.js can be used in the place of msal.js; included msal.js to make debug easy -->
26+
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js" class="pre"></script>
27+
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.0/js/msal.js"></script>
28+
<script src="https://code.jquery.com/jquery-3.2.1.min.js" class="pre"></script>
4529

46-
<script>
47-
"use strict";
48-
var clientApplication = new Msal.UserAgentApplication(applicationConfig.clientID, applicationConfig.authority, function (errorDesc, token, error, tokenType) {
49-
// Called after loginRedirect or acquireTokenPopup
50-
});
30+
<h2>Getting an access token with Azure AD B2C and calling a Web API</h2>
31+
<div>
32+
<div id="label">Sign-in with Microsoft Azure AD B2C</div>
33+
<button id="auth" onclick="login()">Login</button>
34+
<button id="callApiButton" class="hidden" onclick="callApi()">Call Web API</button>
35+
</div>
5136

52-
function login() {
53-
clientApplication.loginPopup(applicationConfig.b2cScopes).then(function (idToken) {
54-
clientApplication.acquireTokenSilent(applicationConfig.b2cScopes).then(function (accessToken) {
55-
updateUI();
56-
}, function (error) {
57-
clientApplication.acquireTokenPopup(applicationConfig.b2cScopes).then(function (accessToken) {
58-
updateUI();
59-
}, function (error) {
60-
logMessage("Error acquiring the popup:\n" + error);
61-
});
62-
})
63-
}, function (error) {
64-
logMessage("Error during login:\n" + error);
65-
});
66-
}
37+
<pre class="response"></pre>
6738

68-
function updateUI() {
69-
var userName = clientApplication.getUser().name;
70-
logMessage("User '" + userName + "' logged-in");
71-
var authButton = document.getElementById('auth');
72-
authButton.innerHTML = 'logout';
73-
authButton.setAttribute('onclick', 'logout();');
74-
var label = document.getElementById('label');
75-
label.innerText = "Hello " + userName;
76-
var callWebApiButton = document.getElementById('callApiButton');
77-
callWebApiButton.setAttribute('class', 'visible');
78-
}
39+
<script class="pre">
7940

80-
function callApi() {
81-
clientApplication.acquireTokenSilent(applicationConfig.b2cScopes).then(function (accessToken) {
82-
callApiWithAccessToken(accessToken);
83-
}, function (error) {
84-
clientApplication.acquireTokenPopup(applicationConfig.b2cScopes).then(function (accessToken) {
85-
callApiWithAccessToken(accessToken);
86-
}, function (error) {
87-
logMessage("Error acquiring the access token to call the Web api:\n" + error);
88-
});
89-
})
90-
}
41+
// The current application coordinates were pre-registered in a B2C tenant.
42+
var appConfig = {
43+
b2cScopes: ["https://fabrikamb2c.onmicrosoft.com/helloapi/demo.read"],
44+
webApi: "https://fabrikamb2chello.azurewebsites.net/hello"
45+
};
46+
</script>
9147

92-
function callApiWithAccessToken(accessToken) {
93-
// Call the Web API with the AccessToken
94-
$.ajax({
95-
type: "GET",
96-
url: applicationConfig.webApi,
97-
headers: {
98-
'Authorization': 'Bearer ' + accessToken,
99-
},
100-
}).done(function (data) {
101-
logMessage("Web APi returned:\n" + JSON.stringify(data));
102-
})
103-
.fail(function (jqXHR, textStatus) {
104-
logMessage("Error calling the Web api:\n" + textStatus);
105-
})
106-
}
48+
<script>
49+
"use strict";
10750

108-
function logout() {
109-
// Removes all sessions, need to call AAD endpoint to do full logout
110-
clientApplication.logout();
51+
// configuration to initialize msal
52+
var msalConfig = {
53+
auth: {
54+
clientId: "e760cab2-b9a1-4c0d-86fb-ff7084abd902", //This is your client ID
55+
authority: "https://login.microsoftonline.com/tfp/fabrikamb2c.onmicrosoft.com/b2c_1_susi" //This is your tenant info
56+
},
57+
cache: {
58+
cacheLocation: "localStorage",
59+
storeAuthStateInCookie: true
11160
}
61+
};
11262

113-
function logMessage(s) {
114-
document.body.querySelector('.response').appendChild(document.createTextNode('\n' + s));
115-
}
63+
var clientApplication = new Msal.UserAgentApplication(config);
64+
65+
// Register a call back for redirect flow
66+
// myMSALObj.handleRedirectCallback(authRedirectCallback);
11667

117-
</script>
68+
function login() {
69+
70+
var loginRequest = {
71+
scopes: appConfig.b2cScopes
72+
};
73+
74+
clientApplication.loginPopup(loginRequest).then(function (loginResponse) {
75+
var tokenRequest = {
76+
scopes: appConfig.b2cScopes
77+
};
78+
79+
clientApplication.acquireTokenSilent(tokenRequest).then(function (tokenResponse) {
80+
updateUI();
81+
}).catch(function (error) {
82+
clientApplication.acquireTokenPopup(tokenRequest).then(function (tokenResponse) {
83+
updateUI();
84+
}).catch (function (error) {
85+
logMessage("Error acquiring the popup:\n" + error);
86+
});
87+
})
88+
}).catch (function (error) {
89+
logMessage("Error during login:\n" + error);
90+
});
91+
}
92+
93+
function updateUI() {
94+
var userName = clientApplication.getAccount().name;
95+
console.log(clientApplication.getAccount());
96+
logMessage("User '" + userName + "' logged-in");
97+
var authButton = document.getElementById('auth');
98+
authButton.innerHTML = 'logout';
99+
authButton.setAttribute('onclick', 'logout();');
100+
var label = document.getElementById('label');
101+
label.innerText = "Hello " + userName;
102+
var callWebApiButton = document.getElementById('callApiButton');
103+
callWebApiButton.setAttribute('class', 'visible');
104+
}
105+
106+
function callApi() {
107+
var tokenRequest = {
108+
scopes: appConfig.b2cScopes
109+
}
110+
clientApplication.acquireTokenSilent(tokenRequest).then(function (tokenResponse) {
111+
callApiWithAccessToken(tokenResponse.accessToken);
112+
}).catch(function (error) {
113+
clientApplication.acquireTokenPopup(tokenRequest).then(function (tokenResponse) {
114+
callApiWithAccessToken(tokenResponse.accessToken);
115+
}).catch(function (error) {
116+
logMessage("Error acquiring the access token to call the Web api:\n" + error);
117+
});
118+
})
119+
}
120+
121+
function callApiWithAccessToken(accessToken) {
122+
// Call the Web API with the AccessToken
123+
$.ajax({
124+
type: "GET",
125+
url: appConfig.webApi,
126+
headers: {
127+
'Authorization': 'Bearer ' + accessToken,
128+
},
129+
}).done(function (data) {
130+
logMessage("Web APi returned:\n" + JSON.stringify(data));
131+
})
132+
.fail(function (jqXHR, textStatus) {
133+
logMessage("Error calling the Web api:\n" + textStatus);
134+
})
135+
}
136+
137+
function logout() {
138+
// Removes all sessions, need to call AAD endpoint to do full logout
139+
clientApplication.logout();
140+
}
141+
142+
function logMessage(s) {
143+
document.body.querySelector('.response').appendChild(document.createTextNode('\n' + s));
144+
}
145+
146+
</script>
118147
</body>
119-
</html>
148+
149+
</html>

0 commit comments

Comments
 (0)