Single Sign On

link - docs.microsoft.com/en-us/office/dev/add-ins/quickstarts/sso-quickstart
link - docs.microsoft.com/en-us/office/dev/add-ins/quickstarts/sso-quickstart-customize
link - docs.microsoft.com/en-us/office/dev/add-ins/develop/auth-with-office-dialog-api
link - docs.microsoft.com/en-us/office/dev/add-ins/develop/create-sso-office-add-ins-nodejs
link - docs.microsoft.com/en-us/office/dev/add-ins/develop/sso-in-office-add-ins
link - aka.ms/officeaddinsso

iFrame

When you are running Office on the web and using a task pane, this task pane uses an iFrame.
A lot of the Identity Authorities (or Secure Token Services STS) do not allow there login page to open in an iFrame.
These include Google, Facebook including Microsoft Identity Platform (msal).
The Office Dialog API, specifically the displayDialogAsync method was created to get around this problem.
The displayDialogAsync method can be launched from a task pane and opens an entirely separate browser instance which allows the login pages to run.

Passing Access Token

The dialog window can send the access token to the task pane using messageParent.

Office.context.ui.messageParent 

Silent vs Interactive

There are two ways you can acquire a token

MSAL.acquireTokenSilent 
MSAL.acquireTokenInteractive 

authConfig.js

const c_msalConfig = { 
   auth: { 
      clientId: 
      authority: 
      redirectUri: "http://localhost:3000" 
      postLogoutRedirectUri: "http://localhost:3000"  // only for redirect, not popup 
   }, 
   cache: { 
      cacheLocation: "sessionStorage",  // where the cache will be stored 
      storeAuthStateInCookie: false 
   } 
}; 

// id tokens for MS Identity Platform endpoints 
const c_loginRequest = { 
   scopes: [""] 
}; 

// access tokens for MS Graph API endpoints 
const c_tokenRequest = { 
   scopes: [""], 
   forceRefresh: true 
}; 

authPopup.js

const myMSALObj = new msal.PublicClientApplication(c_msalConfig) 

function f_signIn() { 
   myMSALObj.loginPopup(c_loginRequest) 
      .then(response => { 

         console.log('id_token acquired at: ' new Date().toString()); 

         if (myMSALObj.getAccount()) { 
            showWelcomeMessage(myMSALObj.getAccount()); 
         } 

      }).catch(error => { 
         console.error(error); 
      }); 
} 

function f_signOut() { 
   myMSALObj.logout(); 
} 

function f_seeProfile() { 
   if (myMSALObj.getAccount()) { 

      f_getTokenPopup(c_loginRequest) 
         .then(response => { 

            callMSGraph(graphConfig.graphMeEndpoint, response.accessToken, updateUI); 

            profileButton.classList.add('d-none');  

            mailButton.classList.remove('d-none');  

         }).catch(error => { 
            console.error(error); 
         }); 
   } 
} 

function f_readMail() { 
   if (myMSALObj.getAccount()) { 
  
      f_getTokenPopup(c_tokenRequest) 
         .then(response => { 

            callMSGraph(graphConfig.graphMeEndpoint, response.accessToken, updateUI); 

         }).catch(error => { 
            console.error(error); 
         }); 
   } 
} 

function f_getTokenPopup(request) { 
   return myMSALObj.acquireTokenSilent(request) 
      .catch(error => { 
         console.warn(error); 

         console.warn("silent token acquisition fails, acquiring token using popup"); 
         return myMSALObj.acquireTokenPopup(request) 
            .then(response => { 
               return response; 
            }).catch(error => { 
               console.error(error); 
            }); 
      }); 
} 

authRedirect.js

const myMSALObj = new msal.PublicClientApplication(c_msalConfig) 

let accessToken; 

// Register callbacks for Redirect Flow 
myMSALObj.handleRedirectCallback(f_authRedirectCallBack); 

function f_authRedirectCallBack(error, response) 
   if (error) { 
      console.error(error); 
   } else { 
      if (myMSALObj.getAccount()) { 
         console.log("id_token acquired at: " + new Date().toString()); 
  
         showWelcomeMessage(myMSALObj.getAccount()); 

         f_getTokenRedirect(c_loginRequest); 

      } else if (response.tokenType === "Bearer") { { 
         console.log("access_token acquired at: " + new Date().toString()); 
      } else { 
         console.log("token type is: " + response.tokenType); 
      } 
   } 
} 

if (myMSALObj.getAccount()) { 
   showWelcomeMessage(myMSALObj.getAccount()); 
} 

function f_signIn() { 
   myMSALObj.loginRedirect(loginRequest); 
} 

function f_signOut() { 
   myMSALObj.logout(); 
} 

function f_seeProfile() { 
   f_getTokenRedirect(loginRequest); 
} 

function f_readMail() { 
   f_getTokenRedirect(tokenRequest); 
} 

function f_getTokenRedirect(request)