feature_showcase/4_Use_SAML_v2021_SP2.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Login Example</title>
    <script type="text/javascript" src="https://demo.microstrategy.com/MicroStrategyLibrary/javascript/embeddinglib.js"></script>
    <!-- This is for the playground button. You don't need it in your application.  -->
    <script type="text/javascript" src="js/jsfiddle.js"></script>    
  </head>

  <body>

    <div>
      <div>Server:<input type="text" id="baseURL" value="https://[Your MicroStrategy Environment]/MicroStrategyLibrary" size="100"></div>
      <div>ProjectID: <input type="text" id="projectId" value="73E53B9A11EAB363B78E0080EF8506F9" size="100"></div>
      <div>DossierID: <input type="text" id="dossierId" value="ECC26AE1584D33F0AF9B1BA7C0DC5F0B" size="100"></div>

      <div>The <input type="submit" onclick="autoLogin()" value="autoLogin()" /> function can be used to automatically show dossier if the user has already logged in.</div>
      <div>Otherwise, you can click <input type="submit" onclick="login('1048576')" value="Login with SAML" /> or <input type="submit" onclick="login('4194304')" value="Login with OIDC" /> to log in. 
      </div>
      <div>This solution works on MicroStrategy 2021 Update 2. This solution works for both SAML (loginMode=1048576) and OIDC (loginMode=4194304) authentications.</div>
    </div>

    <div id="myDossier"></div>

    <script type="text/javascript">

      //Fetch auth token
      function getAuthToken() {
        let options = {
          method: "GET",
          credentials: "include", // Including cookie
          mode: "cors", // Setting as cors mode for cross origin
          headers: { "content-type": "application/json" },
        };
        const baseURL = document.getElementById("baseURL").value;
        return fetch( baseURL + "/api/auth/token",options
        ).then((response) => {
          if (response.ok) {
            return response.headers.get("x-mstr-authtoken");
          }
          else {
            // Log the response json if it failed
            return null
          }
        }).catch((error) => {
          // Log the error if failed
          return null
        })
      }

      //This function will keep checking auth token.
      async function checkLogin(startTime, timeout, interval) {
        const currentTime = Date.now()
        let token = await getAuthToken().catch((error) => {
          return null
        })
        // If auth token is valid return it
        if (!!token) {
          if (newTab && !newTab.closed) {
            newTab.close()
          }
          showDossier()
        } else if (currentTime - startTime > timeout) {
          console.log("SAML login timed out, please try again");
          return null
        } else {
          // Check if the user logged in already every interval milliseconds
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve(checkLogin(startTime, timeout, interval))
            }, interval)
          })
        }
      }

      //This function will automatically show the dossier, if user has already logged into MicroStrategy Library. 
      function autoLogin() {

        getAuthToken().then(function(token) {
          if (!!token) {
            //If we have auth token, show dossier.
            showDossier();
          } 
        })
      }

      //This function will start the SAML/OIDC authentication workflow.
      function login(mode) {

        const baseURL = document.getElementById("baseURL").value;

        //need to store the tab. close it later.
        this.newTab = window.open(baseURL + "/auth/login-dialog.jsp?loginMode="+mode, "_blank");

        //Keep checking auth token every 2 seconds for up to 2 minutes.
        const startTime = Date.now()
        checkLogin(startTime, 120000, 2000)

      };

      // Embed the dossier
      function showDossier() {
        var baseURL = document.getElementById("baseURL").value
        var projectId = document.getElementById("projectId").value
        var dossierId = document.getElementById("dossierId").value

        var placeHolderDiv = document.getElementById("myDossier");
        var dossierUrl = baseURL + '/app/' + projectId + '/' + dossierId;
        microstrategy.dossier.create({
          placeholder: placeHolderDiv,
          url: dossierUrl,
          enableCustomAuthentication: true,
          enableResponsive: true,
          customAuthenticationType: microstrategy.dossier.CustomAuthenticationType.AUTH_TOKEN,
          getLoginToken: getAuthToken,
          containerHeight: '1000px'
        }).then(function(dossier) {
          // use the dossier instance if you need
        });
      }

      autoLogin();

    </script>

  </body>

</html>