14 Replies Latest reply on Jan 19, 2018 7:44 AM by Archan Bhatt

    Authenticate and embed a tableau report

    Shashank Karam

      Hi everyone.

      I am trying to embed/display a tableau report inside SharePoint online(cloud). I would like my code to authenticate the user and then display the report, so that the user doesn't need to enter his/her credentials.

      I got it working if the report is hosted on a dev tableau server, but it is not working for a report hosted on production tableau server.

       

      I have added the web data connector (cors_rest_client.html) mentioned in the below article to both the dev and prod tableau servers,

       

      CORS-proxying without Server Headers - In-response to Chris Toomey -Databoss

       

      I have the  below code running on my SharePoint Online page, (I also attached a text file with the same code for easier reading)

       

      <iframe src="http://dev/webdataconnectors/cors_rest_host.html" id="frame"></iframe>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>

      <script type="text/javascript" src="https://public.tableausoftware.com/javascripts/api/tableau_v8.js"></script>

      <script type="text/javascript">

        var SERVERURL = 'http://dev';

        var USER = 'username';

        var PASS = 'password';

         var viz, workbook;

       

        function receiveMessage(event)

        { 

        console.log(event);

        }

         window.addEventListener("message", receiveMessage, false);

       

        var logon = function(){

         // logon to Tableau

          $('#frame')[0].contentWindow.postMessage(

               JSON.stringify(

                 {"url": SERVERURL + "/api/2.0/auth/signin",

                  "dataType": "xml",

                  "type": "POST",

                  "data":  "<tsRequest><credentials name=\"" + USER + "\" password=\"" + PASS + "\" ><site contentUrl=\"\" /></credentials></tsRequest>"

                 }),

               SERVERURL +"/");

        }

       

        function loadReport(){

        var vizDiv = document.getElementById('viz');

        var vizURL = 'http://dev/t/CMDev/views/SharepointDash12152015/BISharepoint';

        var options = {

        width: '1180px',

        height: '836px',

        hideToolbar: true,

        hideTabs: true

        }

        viz = new tableau.Viz(vizDiv,vizURL, options);

        return false;

        }

      </script>

      <p>

              <button onclick="logon();return false;">Click me to logon</button>

        <div id='viz'></div>

        <button onclick="loadReport(); return false;">Load Report</button>

      </p>

       

       

      The code is run from pages on the same SharePoint site. There is no difference in where the code is run.

      When I click the logon button, it returns the same data for both dev and prod tableau reports. I see the creadentials token, siteid, userid and other details.

       

      But when I click the 'Load Report' button, I get the below error for report hosted on production tableau server.

       

      Refused to display 'https://production.tableauserver.com/en/embeddedAuth.html?path=%2Ft…me%3Dn%26%3Atabs%3Dn%26%3Atoolbar%3Dn%26%3AapiID%3Dhandler0&siteUrlName=CM' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

       

      I do not get this error for dev tableau report. It shows up fine.

       

      The dev tableau server has a http URL and the prod server has a https URL. I do not have any experience with tableau.

      Any ideas on what might be the issue?