Embedding our webapp

Hark supplies a webapp that implements smart charging for EVs.

Setup

You can easily embed our webapp in your native app. Using your preferred webview component, you inject the user's session's access token and display the embedded website.

1. Retrieve the user's access token:
   1. For external users, see user administration. The user needs to have charging permissions, which is obtained by calling addChargingPermission. The access token can be found in the payload from the addUserSession-mutation.
   2. Users that has been registered through our Ecomonitor app can obtain their access token using the payload from the login-mutation.
2. Choose a webview component that allows you to communicate the access token to the web page
3. Display the embedded website using the webview component

note

The session, and consequently the access token, is invalidated 30 days after the last registered user activity.

To illustrate, we have used react-native-webview as a webview component in our react-native app. We inject the access token on load, and keep track of whether or not the token has been injected with a state-hook:

import React, { useRef, useState } from "react";
import { WebView } from "react-native-webview";

export const ScreenWithEmbeddedWebView = ({
  accessToken,
}: {
  accessToken: string;
}): JSX.Element => {
  const ref = useRef<WebView>(null);
  const embeddedWebViewUrl = "https://embeddable.hark.eco";

  const [tokenWasInjected, setTokenWasInjected] = useState(false);

  const injectToken = async () => {
    if (tokenWasInjected) {
      return;
    }

    if (ref.current) {
      ref.current.postMessage(
        JSON.stringify({
          method: "injectToken",
          params: {
            token: accessToken,
          },
        })
      );

      setTokenWasInjected(true);
    }
  };

  return (
    <WebView
      ref={ref}
      source={{ uri: embeddedWebViewUrl }}
      onLoad={injectToken}
      style={{ backgroundColor: "transparent" }}
    />
  );
};

tip

Want to change the appearance of the embedded webapp? Try trailing the URL with /?theme=light or /?theme=dark!