Skip to content

Commit a07832f

Browse files
salman90salman90
committed
responed to comments
1 parent b136e35 commit a07832f

11 files changed

Lines changed: 114 additions & 228 deletions

File tree

‎2-Authorization-I/1-call-graph/App/authConfig.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
const msalConfig = {
77
auth: {
88
clientId: 'Enter_the_Application_Id_Here', // This is the ONLY mandatory field that you need to supply.
9-
authority: 'https://login.microsoftonline.com/Enter_the_Tenant_Info_Here', // Defaults to "https://login.microsoftonline.com/common"
9+
authority: 'https://login.microsoftonline.com/Enter_the_Tenant_Id_Here', // Defaults to "https://login.microsoftonline.com/common"
1010
redirectUri: '/', // You must register this URI on Azure Portal/App Registration. Defaults to window.location.href
1111
postLogoutRedirectUri: '/', //Indicates the page to navigate after logout.
1212
clientCapabilities: ['CP1'], // this lets the resource owner know that this client is capable of handling claims challenge.

‎2-Authorization-I/1-call-graph/App/authPopup.js‎

Lines changed: 19 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ let username = '';
66

77
myMSALObj.addEventCallback((event) => {
88
if (
9-
(event.eventType === msal.EventType.LOGIN_SUCCESS || event.eventType === msal.EventType.ACQUIRE_TOKEN_SUCCESS) &&
9+
(event.eventType === msal.EventType.LOGIN_SUCCESS ||
10+
event.eventType === msal.EventType.ACQUIRE_TOKEN_SUCCESS) &&
1011
event.payload.account
1112
) {
1213
const account = event.payload.account;
@@ -32,11 +33,11 @@ function selectAccount() {
3233
// Add choose account code here
3334
username = myMSALObj.getActiveAccount().username;
3435
showWelcomeMessage(username, currentAccounts);
35-
}
36+
}
3637
}
3738

3839
async function addAnotherAccount(event) {
39-
if (event.target.innerHTML.includes("@")) {
40+
if (event.target.innerHTML.includes('@')) {
4041
const username = event.target.innerHTML;
4142
const account = myMSALObj.getAllAccounts().find((account) => account.username === username);
4243
const activeAccount = myMSALObj.getActiveAccount();
@@ -117,7 +118,7 @@ function signOut() {
117118
const logoutRequest = {
118119
account: account,
119120
redirectUri: '/redirect',
120-
mainWindowRedirectUri: '/signout',
121+
mainWindowRedirectUri: '/',
121122
};
122123
clearStorage(account);
123124
myMSALObj.logoutPopup(logoutRequest).catch((error) => {
@@ -126,95 +127,23 @@ function signOut() {
126127
}
127128

128129
function seeProfile() {
129-
const account = myMSALObj.getAccountByUsername(username);
130-
getGraphClient({
131-
account: account,
132-
scopes: graphConfig.graphMeEndpoint.scopes,
133-
interactionType: msal.InteractionType.Popup,
134-
})
135-
.api('/me')
136-
.responseType('raw')
137-
.get()
138-
.then((response) => {
139-
return handleClaimsChallenge(account, response, graphConfig.graphMeEndpoint.uri);
140-
})
141-
.then((response) => {
142-
if (response && response.error === 'claims_challenge_occurred') throw response.error;
143-
return updateUI(response, graphConfig.graphMeEndpoint.uri);
144-
})
145-
.catch((error) => {
146-
if (error === 'claims_challenge_occurred') {
147-
const resource = new URL(graphConfig.graphMeEndpoint.uri).hostname;
148-
const claims =
149-
account &&
150-
getClaimsFromStorage(`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}.${resource}`)
151-
? window.atob(
152-
getClaimsFromStorage(
153-
`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}.${resource}`
154-
)
155-
)
156-
: undefined; // e.g {"access_token":{"xms_cc":{"values":["cp1"]}}}
157-
let request = {
158-
account: account,
159-
scopes: graphConfig.graphMeEndpoint.scopes,
160-
claims: claims,
161-
redirectUri: '/redirect',
162-
};
163-
164-
myMSALObj.acquireTokenPopup(request).catch((error) => {
165-
console.log(error);
166-
});
167-
} else {
168-
console.log(error);
169-
}
170-
});
130+
callGraph(
131+
username,
132+
graphConfig.graphMeEndpoint.scopes,
133+
graphConfig.graphMeEndpoint.uri,
134+
msal.InteractionType.Popup,
135+
myMSALObj
136+
);
171137
}
172138

173139
function readContacts() {
174-
const account = myMSALObj.getAccountByUsername(username);
175-
getGraphClient({
176-
account: account,
177-
scopes: graphConfig.graphContactsEndpoint.scopes,
178-
interactionType: msal.InteractionType.Popup,
179-
})
180-
.api('/me/contacts')
181-
.responseType('raw')
182-
.get()
183-
.then((response) => {
184-
return handleClaimsChallenge(account, response, graphConfig.graphContactsEndpoint.uri);
185-
})
186-
.then((response) => {
187-
if (response && response.error === 'claims_challenge_occurred') throw response.error;
188-
return updateUI(response, graphConfig.graphContactsEndpoint.uri);
189-
})
190-
.catch((error) => {
191-
if (error === 'claims_challenge_occurred') {
192-
const resource = new URL(graphConfig.graphContactsEndpoint.uri).hostname;
193-
const claims =
194-
account &&
195-
getClaimsFromStorage(`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}.${resource}`)
196-
? window.atob(
197-
getClaimsFromStorage(
198-
`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}.${resource}`
199-
)
200-
)
201-
: undefined; // e.g {"access_token":{"xms_cc":{"values":["cp1"]}}}
202-
let request = {
203-
account: account,
204-
scopes: graphConfig.graphContactsEndpoint.scopes,
205-
claims: claims,
206-
redirectUri: '/redirect',
207-
};
208-
209-
myMSALObj.acquireTokenPopup(request).catch((error) => {
210-
console.log(error);
211-
});
212-
} else if (error.toString().includes('404')) {
213-
return updateUI(null, graphConfig.graphContactsEndpoint.uri);
214-
} else {
215-
console.log(error);
216-
}
217-
});
140+
callGraph(
141+
username,
142+
graphConfig.graphContactsEndpoint.scopes,
143+
graphConfig.graphContactsEndpoint.uri,
144+
msal.InteractionType.Popup,
145+
myMSALObj
146+
);
218147
}
219148

220149
selectAccount();

‎2-Authorization-I/1-call-graph/App/authRedirect.js‎

Lines changed: 15 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -121,96 +121,29 @@ function signOut() {
121121
const account = myMSALObj.getAccountByUsername(username);
122122
const logoutRequest = {
123123
account: account,
124+
loginHint: account.idTokenClaims.login_hint,
124125
};
125126

126127
clearStorage(account);
127128
myMSALObj.logoutRedirect(logoutRequest);
128129
}
129130

130131
function seeProfile() {
131-
const account = myMSALObj.getAccountByUsername(username);
132-
133-
getGraphClient({
134-
account: account,
135-
scopes: graphConfig.graphMeEndpoint.scopes,
136-
interactionType: msal.InteractionType.Redirect,
137-
})
138-
.api('/me')
139-
.responseType('raw')
140-
.get()
141-
.then((response) => {
142-
return handleClaimsChallenge(account, response, graphConfig.graphMeEndpoint.uri);
143-
})
144-
.then((response) => {
145-
if (response && response.error === 'claims_challenge_occurred') throw response.error;
146-
return updateUI(response, graphConfig.graphMeEndpoint.uri);
147-
})
148-
.catch((error) => {
149-
if (error === 'claims_challenge_occurred') {
150-
const resource = new URL(graphConfig.graphMeEndpoint.uri).hostname;
151-
const claims =
152-
account &&
153-
getClaimsFromStorage(`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}.${resource}`)
154-
? window.atob(
155-
getClaimsFromStorage(
156-
`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}.${resource}`
157-
)
158-
)
159-
: undefined; // e.g {"access_token":{"xms_cc":{"values":["cp1"]}}}
160-
let request = {
161-
account: account,
162-
scopes: graphConfig.graphMeEndpoint.scopes,
163-
claims: claims,
164-
};
165-
166-
myMSALObj.acquireTokenRedirect(request);
167-
} else {
168-
console.log(error);
169-
}
170-
});
132+
callGraph(
133+
username,
134+
graphConfig.graphMeEndpoint.scopes,
135+
graphConfig.graphMeEndpoint.uri,
136+
msal.InteractionType.Redirect,
137+
myMSALObj
138+
);
171139
}
172140

173141
function readContacts() {
174-
const account = myMSALObj.getAccountByUsername(username);
175-
getGraphClient({
176-
account: account,
177-
scopes: graphConfig.graphContactsEndpoint.scopes,
178-
interactionType: msal.InteractionType.Redirect,
179-
})
180-
.api('/me/contacts')
181-
.responseType('raw')
182-
.get()
183-
.then((response) => {
184-
return handleClaimsChallenge(account, response, graphConfig.graphContactsEndpoint.uri);
185-
})
186-
.then((response) => {
187-
if (response && response.error === 'claims_challenge_occurred') throw response.error;
188-
return updateUI(response, graphConfig.graphContactsEndpoint.uri);
189-
})
190-
.catch((error) => {
191-
if (error === 'claims_challenge_occurred') {
192-
const resource = new URL(graphConfig.graphContactsEndpoint.uri).hostname;
193-
const claims =
194-
account &&
195-
getClaimsFromStorage(`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}.${resource}`)
196-
? window.atob(
197-
getClaimsFromStorage(
198-
`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}.${resource}`
199-
)
200-
)
201-
: undefined; // e.g {"access_token":{"xms_cc":{"values":["cp1"]}}}
202-
203-
let request = {
204-
account: account,
205-
scopes: graphConfig.graphContactsEndpoint.scopes,
206-
claims: claims,
207-
};
208-
209-
myMSALObj.acquireTokenRedirect(request);
210-
} else if (error.toString().includes('404')) {
211-
return updateUI(null, graphConfig.graphContactsEndpoint.uri);
212-
} else {
213-
console.log(error);
214-
}
215-
});
142+
callGraph(
143+
username,
144+
graphConfig.graphContactsEndpoint.scopes,
145+
graphConfig.graphContactsEndpoint.uri,
146+
msal.InteractionType.Redirect,
147+
myMSALObj
148+
);
216149
}

‎2-Authorization-I/1-call-graph/App/fetch.js‎

Lines changed: 70 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
* @param {object} response
1111
* @returns response
1212
*/
13-
const handleClaimsChallenge = async (account,response, apiEndpoint) => {
13+
const handleClaimsChallenge = async (account, response, apiEndpoint) => {
1414
if (response.status === 200) {
1515
return response.json();
1616
} else if (response.status === 401) {
@@ -37,10 +37,10 @@ const handleClaimsChallenge = async (account,response, apiEndpoint) => {
3737
};
3838

3939
/**
40-
* This method parses WWW-Authenticate authentication headers
41-
* @param header
42-
* @return {Object} challengeMap
43-
*/
40+
* This method parses WWW-Authenticate authentication headers
41+
* @param header
42+
* @return {Object} challengeMap
43+
*/
4444
const parseChallenges = (header) => {
4545
const schemeSeparator = header.indexOf(' ');
4646
const challenges = header.substring(schemeSeparator + 1).split(',');
@@ -52,12 +52,75 @@ const parseChallenges = (header) => {
5252
});
5353

5454
return challengeMap;
55-
}
55+
};
5656

57+
/**
58+
* This method calls the Graph API by utilizing the graph client instance.
59+
* @param {String} username
60+
* @param {Array} scopes
61+
* @param {String} uri
62+
* @param {String} interactionType
63+
* @param {Object} myMSALObj
64+
* @returns
65+
*/
66+
const callGraph = async (username, scopes, uri, interactionType, myMSALObj) => {
67+
const account = myMSALObj.getAccountByUsername(username);
68+
try {
69+
let response = await getGraphClient({
70+
account: account,
71+
scopes: scopes,
72+
interactionType: interactionType,
73+
})
74+
.api(uri)
75+
.responseType('raw')
76+
.get();
77+
response = await handleClaimsChallenge(account, response, uri);
78+
if (response && response.error === 'claims_challenge_occurred') throw response.error;
79+
updateUI(response, uri);
80+
} catch (error) {
81+
if (error === 'claims_challenge_occurred') {
82+
const resource = new URL(uri).hostname;
83+
const claims =
84+
account &&
85+
getClaimsFromStorage(`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}.${resource}`)
86+
? window.atob(
87+
getClaimsFromStorage(
88+
`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}.${resource}`
89+
)
90+
)
91+
: undefined; // e.g {"access_token":{"xms_cc":{"values":["cp1"]}}}
92+
let request = {
93+
account: account,
94+
scopes: scopes,
95+
claims: claims,
96+
};
97+
switch (interactionType) {
98+
case msal.InteractionType.Popup:
99+
100+
await myMSALObj.acquireTokenPopup({
101+
...request,
102+
redirectUri: '/redirect',
103+
});
104+
break;
105+
case msal.InteractionType.Redirect:
106+
await myMSALObj.acquireTokenRedirect(request);
107+
break;
108+
default:
109+
await myMSALObj.acquireTokenRedirect(request);
110+
break;
111+
}
112+
} else if (error.toString().includes('404')) {
113+
return updateUI(null, uri);
114+
} else {
115+
console.log(error);
116+
}
117+
}
118+
}
57119

58120
// exporting config object for jest
59121
if (typeof exports !== 'undefined') {
60122
module.exports = {
61123
handleClaimsChallenge: handleClaimsChallenge,
124+
callGraph: callGraph,
62125
};
63-
}
126+
}

‎2-Authorization-I/1-call-graph/AppCreationScripts/Configure.ps1‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -249,12 +249,14 @@ Function ConfigureApplications
249249

250250
$newClaim = CreateOptionalClaim -name "acct"
251251
$optionalClaims.IdToken += ($newClaim)
252+
$newClaim = CreateOptionalClaim -name "login_hint"
253+
$optionalClaims.IdToken += ($newClaim)
252254
Update-MgApplication -ApplicationId $currentAppObjectId -OptionalClaims $optionalClaims
253255
Write-Host "Done creating the client application (ms-identity-javascript-c2s1)"
254256

255257
# URL of the AAD application in the Azure portal
256258
# Future? $clientPortalUrl = "https://portal.azure.com/#@"+$tenantName+"/blade/Microsoft_AAD_RegisteredApps/ApplicationMenuBlade/Overview/appId/"+$currentAppId+"/objectId/"+$currentAppObjectId+"/isMSAApp/"
257-
$clientPortalUrl = "https://portal.azure.com/#view/Microsoft_AAD_RegisteredApps/ApplicationMenuBlade/~/Overview/appId/"+$currentAppId+"/isMSAApp~/false"
259+
$clientPortalUrl = "https://portal.azure.com/#blade/Microsoft_AAD_RegisteredApps/ApplicationMenuBlade/CallAnAPI/appId/"+$currentAppId+"/objectId/"+$currentAppObjectId+"/isMSAApp/"
258260

259261
Add-Content -Value "<tr><td>client</td><td>$currentAppId</td><td><a href='$clientPortalUrl'>ms-identity-javascript-c2s1</a></td></tr>" -Path createdApps.html
260262
# Declare a list to hold RRA items
@@ -282,7 +284,7 @@ Function ConfigureApplications
282284
# $configFile = $pwd.Path + "\..\App\authConfig.js"
283285
$configFile = $(Resolve-Path ($pwd.Path + "\..\App\authConfig.js"))
284286

285-
$dictionary = @{ "Enter_the_Application_Id_Here" = $clientAadApplication.AppId;"Enter_the_Tenant_Info_Here" = $tenantId };
287+
$dictionary = @{ "Enter_the_Application_Id_Here" = $clientAadApplication.AppId;"Enter_the_Tenant_Id_Here" = $tenantId };
286288

287289
Write-Host "Updating the sample config '$configFile' with the following config values:" -ForegroundColor Yellow
288290
$dictionary

0 commit comments

Comments
 (0)