PingOne DaVinci

Integration example

This example is a simple hello-world application that shows you how to specify the DaVinci API domain, your company ID, flow policy ID, and DaVinci access token, which then integrates your single-page app with the DaVinci application and associated flow policy.

The following example won’t work unless you add your region-specific information. Replace any instances of <region> with your regional top-level domain:

  • Use .com for North America.

  • Use .ca for Canada.

  • Use .eu for EMEA.

  • Use .asia for APAC.

  • Use .com.au for Australia.

 
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8" />

  <head>
    <title>Simple HTML/JS widget sample</title>
  </head>

  <body>
    <h3>Simple HTML/JS widget sample</h3>
    <br />
    <p>Widget will be displayed below</p>
    <br />
    <div id="widget" class="skWidget">Widget should appear here</div>

    <script
      type="text/javascript"
      src="https://assets.pingone.<region>/davinci/latest/davinci.js"
    ></script>
    <script>
      //*** Populate the parameters below from your DaVinci environment ***/
      const companyId = "<companyId>";
      const skApiKey = "<apiKey>";

      //*** Build the get SK Token URL. ***/
      const skGetTokenUrl =
        "https://orchestrate-api.pingone.<region>/v1/company/<companyId>/sdktoken";

      //*** Add the API Key from your DaVinci application. ***/
      var headers = new Headers();
      headers.append("X-SK-API-KEY", skApiKey);

      var requestOptions = {
        method: "GET",
        headers: headers,
        redirect: "follow",
      };

      //*** Retrieve SK Token ***/
      fetch(skGetTokenUrl, requestOptions)
        .then((response) => response.json())
        .then((responseData) => {
          var props = {
            config: {
              method: "runFlow",
              apiRoot: "https://auth.pingone.<region>/",
              accessToken: responseData.access_token,
              companyId: companyId,
              policyId: "<policyId>",
            },
            useModal: false,
            successCallback,
            errorCallback,
            onCloseModal,
          };
          /*** Invoke the Widget ****/
          console.log(props);
          davinci.skRenderScreen(
            document.getElementsByClassName("skWidget")[0],
            props
          );
        })
        .catch((error) => console.log("error", error));

      function successCallback(response) {
        console.log(response);
      }

      function errorCallback(error) {
        console.log(error);
      }

      function onCloseModal() {
        console.log("onCloseModal");
      }
    </script>
  </body>
</html>