QuickStart: Vue Integration

Make sure you take a look at the Web Guide, Start a user session, and Retrieve User Access Token in order to learn the steps that need to be taken to set up Human API Connect.

Vue Component example

This Vue Component can be dropped in as-is, or customized as you see fit.

Notice the use of <p class="hapi__token-container"> where the hapi__token-container class allows the Connect Client to find the data-hapi-token attribute in elements that are children of this container class.

You may also specify optional attributes data-hapi-mode, data-hapi-segment, and data-hapi-pinned-providers, for more information, take a look at Customize your Connect Integration .

<template>
  <div id="app">
    <div class="box connect-container">
      <template v-if="!connectionClosed">
        <h3>Connect your Health Data</h3>
        <p class="hapi__token-container">
          <button class="button is-link"
            :data-hapi-token="computedToken"
            data-hapi-mode="auth"
            data-hapi-segment="<optional alphanumeric identifier>"
            data-hapi-pinned-providers="<optional comma-separated provider IDs>"
          >
            Continue
          </button>
        </p>
      </template>
      <template v-else>
        <h3>
          <p v-if="!successMessage">Thank you for connecting your Health Data.</p>
          <p v-else>{{successMessage}}</p>
        </h3>
      </template>
    </div>
  </div>
</template>

<script>
const { HumanConnect } = window;
export default {
  name: 'HumanapiConnectWidget',
  props: {
    // Event hooks
    connectCallback: {
      required: false,
      type: Function,
    },
    disconnectCallback: {
      required: false,
      type: Function,
    },
    closeCallback: {
      required: false,
      type: Function,
    },
    // `humanAPIToken` or `fetchTokenEndpoint` needs to be defined
    humanAPIToken: {
      required: false,
      type: String,
    },
    fetchTokenEndpoint: {
      required: false,
      type: String,
    },
    // Optional
    clientUserId: String,
    successMessage: {
      required: false,
      type: String,
    },
  },
  data: () => {
    return {
      connectionClosed: false,
      fetchedToken: '',
    };
  },
  computed: {
    computedToken: function() {
      return this.humanAPIToken || this.fetchedToken;
    },
  },
  mounted: function() {
    if ( ! this.humanAPIToken && ! this.fetchTokenEndpoint ) {
      console.error('Either humanAPIToken needs to be a defined, or fetchTokenEndpoint needs to be defined');
    }

    if ( HumanConnect ) {
      HumanConnect.on('connect', response => {
        if ( this.connectionCallback ) {
          this.connectionCallback( response );
        }
      });
      HumanConnect.on('disconnect', response => {
        if ( this.disconnectCallback ) {
          this.disconnectCallback( response );
        }
      });
      HumanConnect.on('close', response => {
        this.connectionClosed = true;
        if ( this.closeCallback ) {
          this.closeCallback( response );
        }
      });
    }

    if ( ! this.humanAPIToken ) {
      this.fetchHumanAPIToken();
    }
  },
  methods: {
    fetchHumanAPIToken: function() {
      // create an XHR object
      const xhr = new XMLHttpRequest();

      // listen for `onload` event
      xhr.onload = () => {
        let resp =  JSON.parse( xhr.response );

        // process response
        if (xhr.status === 200) {
          // parse JSON data
          this.fetchedToken = resp.token || resp;
        } else {
          console.error('Error!');
        }
      };

      // create a `GET` request
      xhr.open('GET', this.fetchTokenEndpoint);

      // send request
      xhr.send();
    },
  }
}
</script>

Troubleshooting

In the event where you have issues with launching Connect, it may be helpful to manually trigger a window load event. We listen to this event (amongst other DOM changes) in order to know when the page is ready for Connect to be bound to your element.

If you find you aren't able to get connect to launch when clicking on your button, and you are sure your session token is valid, try adding the following code:

var event = document.createEvent('Event');
event.initEvent('load', true, true);
window.dispatchEvent(event);

This code should be added after you have fetched and added the token to the DOM. In this example, it would be best to add it into the fetchHumanAPIToken method.

fetchHumanAPIToken: function() {
  // create an XHR object
  const xhr = new XMLHttpRequest();

  // listen for `onload` event
  xhr.onload = () => {
    let resp =  JSON.parse( xhr.response );

    // process response
    if (xhr.status === 200) {
      // parse JSON data
      this.fetchedToken = resp.token || resp;
      setTimeout(() => {
        const event = document.createEvent('Event');
        event.initEvent('load', true, true);
        window.dispatchEvent(event);
      }, 0);
    } else {
      console.error('Error!');
    }
  };

  // create a `GET` request
  xhr.open('GET', this.fetchTokenEndpoint);

  // send request
  xhr.send();
},