embedding-sdk-samples/feature_showcase/4_Use_SAML.html at master · MicroStrategy/embedding-sdk-samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!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>

      <p>The <input type="submit" onclick="autoLogin()" value="autoLogin()" /> function can be used to automatically show dossier if the user has already logged in.</p>
      <p>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.
      </p>
      <p>This solution works on MicroStrategy 2021+, except Update 2. See another example for Update 2. This solution works for both SAML (loginMode=1048576) and OIDC (loginMode=4194304) authentications. Just need to change the loginMode parameter.</p>
      <p>
        If you need this for MicroStrategy 2020, you need to add login-dialog.jsp to your library server under auth directory. You can find a copy in MicroStrategy 2021 Library Server.
      </p>
    </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 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();
          }
        })
      }

      function login(mode) {

        //listen to the message will be sent from MicroStrategy Library login page
        window.addEventListener("message", messageEventListener);

        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+"&callback-origin="
        + encodeURIComponent(location.origin), "_blank");
      };

      function messageEventListener() {

        //SAML auth is complete
        window.removeEventListener("message", messageEventListener);

        showDossier();

          //close tab
          if (this.newTab) {
            this.newTab.close();
            this.newTab = null;
        };
      }

      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>