Skip to content

Commit 4b7b713

Browse files
salman90salman90
committed
update sample to follow basher and zero trust
1 parent fc50768 commit 4b7b713

20 files changed

+6401
-540
lines changed

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

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,28 @@
55
*/
66
const msalConfig = {
77
auth: {
8-
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"
10-
redirectUri: "/", // You must register this URI on Azure Portal/App Registration. Defaults to window.location.href
8+
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"
10+
redirectUri: '/', // You must register this URI on Azure Portal/App Registration. Defaults to window.location.href
11+
postLogoutRedirectUri: '/', //Indicates the page to navigate after logout.
12+
clientCapabilities: ['CP1'], // this lets the resource owner know that this client is capable of handling claims challenge.
1113
},
1214
cache: {
13-
cacheLocation: "localStorage", // This configures where your cache will be stored
15+
cacheLocation: 'localStorage', // This configures where your cache will be stored
1416
storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
1517
},
1618
};
1719

1820
// Add here the endpoints for MS Graph API services you would like to use.
1921
const graphConfig = {
2022
graphMeEndpoint: {
21-
uri: "https://graph.microsoft.com/v1.0/me",
22-
scopes: ["User.Read"]
23+
uri: 'https://graph.microsoft.com/v1.0/me',
24+
scopes: ['User.Read'],
25+
},
26+
graphContactsEndpoint: {
27+
uri: 'https://graph.microsoft.com/v1.0/me/contacts',
28+
scopes: ['Contacts.Read'],
2329
},
24-
graphMailEndpoint: {
25-
uri: "https://graph.microsoft.com/v1.0/me/messages",
26-
scopes: ["Mail.Read"]
27-
}
2830
};
2931

3032
/**
@@ -41,5 +43,6 @@ const loginRequest = {
4143
if (typeof exports !== 'undefined') {
4244
module.exports = {
4345
msalConfig: msalConfig,
46+
graphConfig: graphConfig
4447
};
4548
}

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

Lines changed: 94 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,11 @@
22
// configuration parameters are located at authConfig.js
33
const myMSALObj = new msal.PublicClientApplication(msalConfig);
44

5-
let username = "";
5+
let username = '';
66

77
function selectAccount() {
8-
98
/**
10-
* See here for more info on account retrieval:
9+
* See here for more info on account retrieval:
1110
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-common/docs/Accounts.md
1211
*/
1312

@@ -17,7 +16,7 @@ function selectAccount() {
1716
return;
1817
} else if (currentAccounts.length > 1) {
1918
// Add choose account code here
20-
console.warn("Multiple accounts detected.");
19+
console.warn('Multiple accounts detected.');
2120
} else if (currentAccounts.length === 1) {
2221
username = currentAccounts[0].username;
2322
showWelcomeMessage(username);
@@ -40,57 +39,126 @@ function handleResponse(response) {
4039
}
4140

4241
function signIn() {
43-
42+
4443
/**
4544
* You can pass a custom request object below. This will override the initial configuration. For more information, visit:
4645
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
4746
*/
4847

49-
myMSALObj.loginPopup(loginRequest)
48+
myMSALObj
49+
.loginPopup(loginRequest)
5050
.then(handleResponse)
51-
.catch(error => {
51+
.catch((error) => {
5252
console.error(error);
5353
});
5454
}
5555

5656
function signOut() {
57-
5857
/**
5958
* You can pass a custom request object below. This will override the initial configuration. For more information, visit:
6059
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
6160
*/
61+
const account = myMSALObj.getAccountByUsername(username);
6262
const logoutRequest = {
63-
account: myMSALObj.getAccountByUsername(username)
63+
account: account,
64+
redirectUri: '/redirect',
65+
mainWindowRedirectUri: '/signout',
6466
};
65-
66-
myMSALObj.logout(logoutRequest);
67+
clearStorage(account);
68+
myMSALObj.logoutPopup(logoutRequest).catch((error) => {
69+
console.log(error);
70+
});
6771
}
6872

6973
function seeProfile() {
70-
74+
const account = myMSALObj.getAccountByUsername(username);
7175
getGraphClient({
72-
account: myMSALObj.getAccountByUsername(username),
76+
account: account,
7377
scopes: graphConfig.graphMeEndpoint.scopes,
74-
interactionType: msal.InteractionType.Popup
75-
}).api('/me').get()
78+
interactionType: msal.InteractionType.Popup,
79+
})
80+
.api('/me')
81+
.responseType('raw')
82+
.get()
83+
.then((response) => {
84+
return handleClaimsChallenge(account, response, graphConfig.graphMeEndpoint.uri);
85+
})
7686
.then((response) => {
87+
if (response && response.error === 'claims_challenge_occurred') throw response.error;
7788
return updateUI(response, graphConfig.graphMeEndpoint.uri);
78-
}).catch((error) => {
79-
console.log(error);
89+
})
90+
.catch((error) => {
91+
if (error === 'claims_challenge_occurred') {
92+
const resource = new URL(graphConfig.graphMeEndpoint.uri).hostname;
93+
const claims =
94+
account &&
95+
getClaimsFromStorage(`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}.${resource}`)
96+
? window.atob(
97+
getClaimsFromStorage(
98+
`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}.${resource}`
99+
)
100+
)
101+
: undefined; // e.g {"access_token":{"xms_cc":{"values":["cp1"]}}}
102+
let request = {
103+
account: account,
104+
scopes: graphConfig.graphMeEndpoint.scopes,
105+
claims: claims,
106+
redirectUri: '/redirect',
107+
};
108+
109+
myMSALObj.acquireTokenPopup(request).catch((error) => {
110+
console.log(error);
111+
});
112+
} else {
113+
console.log(error)
114+
}
80115
});
81116
}
82117

83-
function readMail() {
84-
118+
function readContacts() {
119+
const account = myMSALObj.getAccountByUsername(username);
85120
getGraphClient({
86-
account: myMSALObj.getAccountByUsername(username),
87-
scopes: graphConfig.graphMailEndpoint.scopes,
88-
interactionType: msal.InteractionType.Popup
89-
}).api('/me/messages').get()
121+
account: account,
122+
scopes: graphConfig.graphContactsEndpoint.scopes,
123+
interactionType: msal.InteractionType.Popup,
124+
})
125+
.api('/me/contacts')
126+
.responseType('raw')
127+
.get()
128+
.then((response) => {
129+
return handleClaimsChallenge(account, response, graphConfig.graphContactsEndpoint.uri);
130+
})
90131
.then((response) => {
91-
return updateUI(response, graphConfig.graphMailEndpoint.uri);
92-
}).catch((error) => {
93-
console.log(error);
132+
if (response && response.error === 'claims_challenge_occurred') throw response.error;
133+
return updateUI(response, graphConfig.graphContactsEndpoint.uri);
134+
})
135+
.catch((error) => {
136+
if (error === 'claims_challenge_occurred') {
137+
const resource = new URL(graphConfig.graphContactsEndpoint.uri).hostname;
138+
const claims =
139+
account &&
140+
getClaimsFromStorage(`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}.${resource}`)
141+
? window.atob(
142+
getClaimsFromStorage(
143+
`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}.${resource}`
144+
)
145+
)
146+
: undefined; // e.g {"access_token":{"xms_cc":{"values":["cp1"]}}}
147+
let request = {
148+
account: account,
149+
scopes: graphConfig.graphContactsEndpoint.scopes,
150+
claims: claims,
151+
redirectUri: '/redirect',
152+
};
153+
154+
myMSALObj.acquireTokenPopup(request).catch((error) => {
155+
console.log(error);
156+
});
157+
} else if (error.toString().includes('404')) {
158+
return updateUI(null, graphConfig.graphContactsEndpoint.uri);
159+
} else {
160+
console.log(error);
161+
}
94162
});
95163
}
96164

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

Lines changed: 86 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,23 @@
22
// configuration parameters are located at authConfig.js
33
const myMSALObj = new msal.PublicClientApplication(msalConfig);
44

5-
let username = "";
5+
let username = '';
66

77
/**
88
* A promise handler needs to be registered for handling the
99
* response returned from redirect flow. For more information, visit:
1010
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/acquire-token.md
1111
*/
12-
myMSALObj.handleRedirectPromise()
12+
myMSALObj
13+
.handleRedirectPromise()
1314
.then(handleResponse)
1415
.catch((error) => {
1516
console.error(error);
1617
});
1718

18-
function selectAccount () {
19-
19+
function selectAccount() {
2020
/**
21-
* See here for more info on account retrieval:
21+
* See here for more info on account retrieval:
2222
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-common/docs/Accounts.md
2323
*/
2424

@@ -28,7 +28,7 @@ function selectAccount () {
2828
return;
2929
} else if (currentAccounts.length > 1) {
3030
// Add your account choosing logic here
31-
console.warn("Multiple accounts detected.");
31+
console.warn('Multiple accounts detected.');
3232
} else if (currentAccounts.length === 1) {
3333
username = currentAccounts[0].username;
3434
showWelcomeMessage(username);
@@ -55,42 +55,106 @@ function signIn() {
5555
}
5656

5757
function signOut() {
58-
58+
5959
/**
6060
* You can pass a custom request object below. This will override the initial configuration. For more information, visit:
6161
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
6262
*/
6363

6464
// Choose which account to logout from by passing a username.
65+
const account = myMSALObj.getAccountByUsername(username);
6566
const logoutRequest = {
66-
account: myMSALObj.getAccountByUsername(username)
67+
account: account,
6768
};
6869

69-
myMSALObj.logout(logoutRequest);
70+
clearStorage(account);
71+
myMSALObj.logoutRedirect(logoutRequest);
7072
}
7173

7274
function seeProfile() {
75+
const account = myMSALObj.getAccountByUsername(username);
76+
7377
getGraphClient({
74-
account: myMSALObj.getAccountByUsername(username),
78+
account: account,
7579
scopes: graphConfig.graphMeEndpoint.scopes,
76-
interactionType: msal.InteractionType.Redirect
77-
}).api('/me').get()
80+
interactionType: msal.InteractionType.Redirect,
81+
})
82+
.api('/me')
83+
.responseType('raw')
84+
.get()
7885
.then((response) => {
86+
return handleClaimsChallenge(account, response, graphConfig.graphMeEndpoint.uri);
87+
})
88+
.then((response) => {
89+
if (response && response.error === 'claims_challenge_occurred') throw response.error;
7990
return updateUI(response, graphConfig.graphMeEndpoint.uri);
80-
}).catch((error) => {
81-
console.log(error);
91+
})
92+
.catch((error) => {
93+
if (error === 'claims_challenge_occurred') {
94+
const resource = new URL(graphConfig.graphMeEndpoint.uri).hostname;
95+
const claims =
96+
account &&
97+
getClaimsFromStorage(`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}.${resource}`)
98+
? window.atob(
99+
getClaimsFromStorage(
100+
`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}.${resource}`
101+
)
102+
)
103+
: undefined; // e.g {"access_token":{"xms_cc":{"values":["cp1"]}}}
104+
let request = {
105+
account: account,
106+
scopes: graphConfig.graphMeEndpoint.scopes,
107+
claims: claims,
108+
};
109+
110+
myMSALObj.acquireTokenRedirect(request);
111+
} else {
112+
console.log(error);
113+
}
82114
});
83115
}
84116

85-
function readMail() {
117+
function readContacts() {
118+
const account = myMSALObj.getAccountByUsername(username);
86119
getGraphClient({
87-
account: myMSALObj.getAccountByUsername(username),
88-
scopes: graphConfig.graphMailEndpoint.scopes,
89-
interactionType: msal.InteractionType.Redirect
90-
}).api('/me/messages').get()
120+
account: account,
121+
scopes: graphConfig.graphContactsEndpoint.scopes,
122+
interactionType: msal.InteractionType.Redirect,
123+
})
124+
.api('/me/contacts')
125+
.responseType('raw')
126+
.get()
127+
.then((response) => {
128+
return handleClaimsChallenge(account, response, graphConfig.graphContactsEndpoint.uri);
129+
})
91130
.then((response) => {
92-
return updateUI(response, graphConfig.graphMailEndpoint.uri);
93-
}).catch((error) => {
94-
console.log(error);
131+
if (response && response.error === 'claims_challenge_occurred') throw response.error;
132+
return updateUI(response, graphConfig.graphContactsEndpoint.uri);
133+
})
134+
.catch((error) => {
135+
if (error === 'claims_challenge_occurred') {
136+
const resource = new URL(graphConfig.graphContactsEndpoint.uri).hostname;
137+
const claims =
138+
account &&
139+
getClaimsFromStorage(`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}.${resource}`)
140+
? window.atob(
141+
getClaimsFromStorage(
142+
`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}.${resource}`
143+
)
144+
)
145+
: undefined; // e.g {"access_token":{"xms_cc":{"values":["cp1"]}}}
146+
147+
let request = {
148+
account: account,
149+
scopes: graphConfig.graphContactsEndpoint.scopes,
150+
claims: claims,
151+
};
152+
153+
myMSALObj.acquireTokenRedirect(request);
154+
} else if (error.toString().includes('404')) {
155+
return updateUI(null, graphConfig.graphContactsEndpoint.uri);
156+
} else {
157+
console.log(error);
158+
}
95159
});
96160
}

0 commit comments

Comments
 (0)