CreatorsEartho Home

JS

Integrating Eartho into Your JavaScript App

This section describes how to integrate Eartho into a JavaScript app.

1. Install the SDK

You can install the SDK using npm or include it via a CDN.

Using npm:

npm install @eartho/one-client-js

Using a CDN:

<script src="https://cdn.jsdelivr.net/npm/@eartho/one-client-js@2.0.11/dist/one-client-js.production.js"></script>

2. Retrieve Eartho Client ID and Access ID

Go to Eartho Creator and copy your Eartho client ID and access ID from the "Developers Integration" section.

3. Initialize and Configure the SDK

Integrate Eartho into your app by configuring the SDK and handling authentication:

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Eartho Integration</title>
  <script src="https://cdn.jsdelivr.net/npm/@eartho/one-client-js@2.0.11/dist/one-client-js.production.js"></script>
  
  <script>
document.addEventListener("DOMContentLoaded", async function () {
  let earthoOne;

  const initEarthoOne = async () => {
    if (!earthoOne) {
      earthoOne = await eartho.createEarthoOne({
        clientId: "qoWhmh4vAEZnE5Naig0b",
      });
    }
  };

  const handleClickWithPopup = async (accessId) => {
    await initEarthoOne();
    return earthoOne.connectWithPopup({ accessId })
      .then(() => {
        
      }).catch((error) => {
        console.error("Error during popup connection:", error);
      });
  };

  const handleClickWithRedirect = async (accessId) => {
    await initEarthoOne();
    return earthoOne.connectWithRedirect({
      accessId,
      authorizationParams: {
        redirect_uri: window.location.href
      }
    }).catch((error) => {
      console.error("Error during redirect connection:", error);
    });
  };
  </script>
</head>
<body>
  <button id="login" onclick="connectToAccess()">Log in</button>
  <button id="logout" onclick="logout()">Log out</button>

  <script>
   
    function connectToAccess() {
      const ACCESS_ID = "YOUR_EARTHO_ACCESS_ID";
      handleClickWithPopup({ accessId: ACCESS_ID })
        .then(async () => {
          const idToken = await earthoOne.getIdToken();
          console.log("ID Token: " + idToken);
          
          const profile = earthoOne.getUser();
          console.log('ID: ' + profile.uid);
          console.log('Full Name: ' + profile.displayName);
          console.log('Email: ' + profile.email);
        })
        .catch((error) => {
          console.error("Error: ", error);
        });
    }

  
  </script>
</body>
</html>

Explanation:

  1. Include SDK: The SDK is included using a CDN link.

  2. Initialize SDK: The earthoOneConfig object is created with the necessary configuration, including the client ID and redirect URI.

  3. Connect and Authenticate: The connectToAccess function triggers the Eartho login process using the connectWithPopup method. Upon successful authentication, it retrieves and logs the user's ID token and profile information.

  4. Logout: The logout function logs the user out and redirects them to the home page.

Additional Resources

For more detailed examples and usage, visit the Eartho JS Example Repository.

PreviousReactNextVue

Last updated