feature_showcase/3_Use_IdentityToken.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 playgound 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://demo.microstrategy.com/MicroStrategyLibraryInsights" size="100"></div>
      <div>ProjectID: <input type="text" id="projectId" value="EC70648611E7A2F962E90080EFD58751" size="100"></div>
      <div>DossierID: <input type="text" id="dossierId" value="4C4BB57C11EB4EFF96550080EF952010" size="100"></div>

      <div>Username: <input type="text" id="username" value="guest" /></div>
      <div>Password: <input type="password" id="password" value="" /></div>
      <div>
        <span>Auth Mode:</span>
        <select label="Auth Mode" id="loginMode">
          <option value="1">Standard</option>
          <option value="8">Guest</option>
          <option value="16">LDAP</option>
        </select>
      </div>
      <div><input type="submit" value="Show Dossier" onclick="showDossier()" /></div>

    </div>

    <div id="myDossier"></div>

    <script type="text/javascript">
      function login() {

        var baseURL = document.getElementById("baseURL").value
        var username = document.getElementById("username").value
        var password = document.getElementById("password").value
        var loginMode = parseInt(document.getElementById("loginMode").value)

        var options = {
          method: 'POST',
          credentials: 'include', // Including cookie
          mode: 'cors', // Setting as cors mode for cross origin
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            loginMode,
            username,
            password
          })
        };
        return fetch(baseURL + '/api/auth/login', options)
          .then(function(response) {
            if (response.ok) {
              const authToken = response.headers.get('x-mstr-authToken');
              var option = {
                method: 'POST',
                credentials: 'include', // Including cookie
                mode: 'cors', // Setting as cors mode for cross origin
                headers: {
                  'Content-Type': 'application/json',
                  'X-MSTR-AuthToken': authToken
                }
              }
              return fetch(baseURL + '/api/auth/identityToken', option)
                .then(function(response) {
                  if (response.ok) {
                    return response.headers.get('X-MSTR-IdentityToken')
                  }
                })

            } else {
              response.json().then(function(json) {
                console.log(json);
              });
            }
          }).catch(function(error) {
            console.log(error);
          });
      }

      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.IDENTITY_TOKEN,
          getLoginToken: login,
          containerHeight: '1000px'
        });
      }

    </script>

  </body>

</html>