Skip to content

Update sample call graph API to follow Basher and Zero Trust #98

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Dec 7, 2022
Merged

Update sample call graph API to follow Basher and Zero Trust #98

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4b7b713
update sample to follow basher and zero trust
salman90 Dec 2, 2022
bada91c
add account picker
salman90 Dec 4, 2022
6d6229a
minor edits
salman90 Dec 5, 2022
d5271fa
update instance name
salman90 Dec 5, 2022
b136e35
Minor edits
Dec 5, 2022
a07832f
responed to comments
salman90 Dec 7, 2022
ea37dd3
minor update in readme
salman90 Dec 7, 2022
0e6e9af
minor review changes
derisen Dec 7, 2022
3fb6462
Merge branch 'main' of https://github.com/Azure-Samples/ms-identity-j…
derisen Dec 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 42 additions & 10 deletions 2-Authorization-I/1-call-graph/App/authConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,57 @@
*/
const msalConfig = {
auth: {
clientId: "Enter_the_Application_Id_Here", // This is the ONLY mandatory field that you need to supply.
authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here", // Defaults to "https://login.microsoftonline.com/common"
redirectUri: "/", // You must register this URI on Azure Portal/App Registration. Defaults to window.location.href
clientId: 'Enter_the_Application_Id_Here', // This is the ONLY mandatory field that you need to supply.
authority: 'https://login.microsoftonline.com/Enter_the_Tenant_Info_Here', // Defaults to "https://login.microsoftonline.com/common"
redirectUri: '/', // You must register this URI on Azure Portal/App Registration. Defaults to window.location.href
postLogoutRedirectUri: '/', //Indicates the page to navigate after logout.
clientCapabilities: ['CP1'], // this lets the resource owner know that this client is capable of handling claims challenge.
},
cache: {
cacheLocation: "localStorage", // This configures where your cache will be stored
cacheLocation: 'localStorage', // This configures where your cache will be stored
storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
},
system: {
/**
* Below you can configure MSAL.js logs. For more information, visit:
* https://docs.microsoft.com/azure/active-directory/develop/msal-logging-js
*/
loggerOptions: {
loggerCallback: (level, message, containsPii) => {
if (containsPii) {
return;
}
switch (level) {
case msal.LogLevel.Error:
console.error(message);
return;
case msal.LogLevel.Info:
console.info(message);
return;
case msal.LogLevel.Verbose:
console.debug(message);
return;
case msal.LogLevel.Warning:
console.warn(message);
return;
default:
return;
}
},
},
},
};

// Add here the endpoints for MS Graph API services you would like to use.
const graphConfig = {
graphMeEndpoint: {
uri: "https://graph.microsoft.com/v1.0/me",
scopes: ["User.Read"]
uri: 'https://graph.microsoft.com/v1.0/me',
scopes: ['User.Read'],
},
graphContactsEndpoint: {
uri: 'https://graph.microsoft.com/v1.0/me/contacts',
scopes: ['Contacts.Read'],
},
graphMailEndpoint: {
uri: "https://graph.microsoft.com/v1.0/me/messages",
scopes: ["Mail.Read"]
}
};

/**
Expand All @@ -41,5 +72,6 @@ const loginRequest = {
if (typeof exports !== 'undefined') {
module.exports = {
msalConfig: msalConfig,
graphConfig: graphConfig
};
}
191 changes: 157 additions & 34 deletions 2-Authorization-I/1-call-graph/App/authPopup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,95 +2,218 @@
// configuration parameters are located at authConfig.js
const myMSALObj = new msal.PublicClientApplication(msalConfig);

let username = "";
let username = '';

myMSALObj.addEventCallback((event) => {
if (
(event.eventType === msal.EventType.LOGIN_SUCCESS || event.eventType === msal.EventType.ACQUIRE_TOKEN_SUCCESS) &&
event.payload.account
) {
const account = event.payload.account;
myMSALObj.setActiveAccount(account);
}

function selectAccount() {
if (event.eventType === msal.EventType.LOGOUT_SUCCESS) {
if (myMSALObj.getAllAccounts().length > 0) {
myMSALObj.setActiveAccount(myMSALObj.getAllAccounts()[0]);
}
}
});

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

const currentAccounts = myMSALObj.getAllAccounts();

if (currentAccounts === null) {
return;
} else if (currentAccounts.length > 1) {
} else if (currentAccounts.length >= 1) {
// Add choose account code here
console.warn("Multiple accounts detected.");
} else if (currentAccounts.length === 1) {
username = currentAccounts[0].username;
showWelcomeMessage(username);
username = myMSALObj.getActiveAccount().username;
showWelcomeMessage(username, currentAccounts);
}
}

async function addAnotherAccount(event) {
if (event.target.innerHTML.includes("@")) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this check needed here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I need to check the if the clicked list item is an email. I will keep this.

const username = event.target.innerHTML;
const account = myMSALObj.getAllAccounts().find((account) => account.username === username);
const activeAccount = myMSALObj.getActiveAccount();
if (account && activeAccount.homeAccountId != account.homeAccountId) {
try {
myMSALObj.setActiveAccount(account);
let res = await myMSALObj.ssoSilent({
...loginRequest,
account: account,
});
closeModal();
handleResponse(res);
window.location.reload();
} catch (error) {
if (error instanceof msal.InteractionRequiredAuthError) {
let res = await myMSALObj.loginPopup({
...loginRequest,
prompt: 'login',
});
handleResponse(res);
window.location.reload();
}
}
} else {
closeModal();
}
} else {
try {
myMSALObj.setActiveAccount(null);
const res = await myMSALObj.loginPopup({
...loginRequest,
prompt: 'login',
});
handleResponse(res);
closeModal();
window.location.reload();
} catch (error) {
console.log(error);
}
}
}

function handleResponse(response) {

/**
* To see the full list of response object properties, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#response
*/

if (response !== null) {
const accounts = myMSALObj.getAllAccounts();
username = response.account.username;
showWelcomeMessage(username);
showWelcomeMessage(username, accounts);
} else {
selectAccount();
}
}

function signIn() {

/**
* You can pass a custom request object below. This will override the initial configuration. For more information, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
*/

myMSALObj.loginPopup(loginRequest)
myMSALObj
.loginPopup(loginRequest)
.then(handleResponse)
.catch(error => {
.catch((error) => {
console.error(error);
});
}

function signOut() {

/**
* You can pass a custom request object below. This will override the initial configuration. For more information, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
*/
const account = myMSALObj.getAccountByUsername(username);
const logoutRequest = {
account: myMSALObj.getAccountByUsername(username)
account: account,
redirectUri: '/redirect',
mainWindowRedirectUri: '/signout',
};

myMSALObj.logout(logoutRequest);
clearStorage(account);
myMSALObj.logoutPopup(logoutRequest).catch((error) => {
console.log(error);
});
}

function seeProfile() {

const account = myMSALObj.getAccountByUsername(username);
getGraphClient({
account: myMSALObj.getAccountByUsername(username),
account: account,
scopes: graphConfig.graphMeEndpoint.scopes,
interactionType: msal.InteractionType.Popup
}).api('/me').get()
interactionType: msal.InteractionType.Popup,
})
.api('/me')
.responseType('raw')
.get()
.then((response) => {
return handleClaimsChallenge(account, response, graphConfig.graphMeEndpoint.uri);
})
.then((response) => {
if (response && response.error === 'claims_challenge_occurred') throw response.error;
return updateUI(response, graphConfig.graphMeEndpoint.uri);
}).catch((error) => {
console.log(error);
})
.catch((error) => {
if (error === 'claims_challenge_occurred') {
const resource = new URL(graphConfig.graphMeEndpoint.uri).hostname;
const claims =
account &&
getClaimsFromStorage(`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}.${resource}`)
? window.atob(
getClaimsFromStorage(
`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}.${resource}`
)
)
: undefined; // e.g {"access_token":{"xms_cc":{"values":["cp1"]}}}
let request = {
account: account,
scopes: graphConfig.graphMeEndpoint.scopes,
claims: claims,
redirectUri: '/redirect',
};

myMSALObj.acquireTokenPopup(request).catch((error) => {
console.log(error);
});
} else {
console.log(error);
}
});
}

function readMail() {

function readContacts() {
const account = myMSALObj.getAccountByUsername(username);
getGraphClient({
account: myMSALObj.getAccountByUsername(username),
scopes: graphConfig.graphMailEndpoint.scopes,
interactionType: msal.InteractionType.Popup
}).api('/me/messages').get()
account: account,
scopes: graphConfig.graphContactsEndpoint.scopes,
interactionType: msal.InteractionType.Popup,
})
.api('/me/contacts')
.responseType('raw')
.get()
.then((response) => {
return updateUI(response, graphConfig.graphMailEndpoint.uri);
}).catch((error) => {
console.log(error);
return handleClaimsChallenge(account, response, graphConfig.graphContactsEndpoint.uri);
})
.then((response) => {
if (response && response.error === 'claims_challenge_occurred') throw response.error;
return updateUI(response, graphConfig.graphContactsEndpoint.uri);
})
.catch((error) => {
if (error === 'claims_challenge_occurred') {
const resource = new URL(graphConfig.graphContactsEndpoint.uri).hostname;
const claims =
account &&
getClaimsFromStorage(`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}.${resource}`)
? window.atob(
getClaimsFromStorage(
`cc.${msalConfig.auth.clientId}.${account.idTokenClaims.oid}.${resource}`
)
)
: undefined; // e.g {"access_token":{"xms_cc":{"values":["cp1"]}}}
let request = {
account: account,
scopes: graphConfig.graphContactsEndpoint.scopes,
claims: claims,
redirectUri: '/redirect',
};

myMSALObj.acquireTokenPopup(request).catch((error) => {
console.log(error);
});
} else if (error.toString().includes('404')) {
return updateUI(null, graphConfig.graphContactsEndpoint.uri);
} else {
console.log(error);
}
});
}

Expand Down
Loading