Skip to main content

Authentication - UMD

Example Authentication - UMD

Details

This example focuses on performing a game client authentication using a vanilla HTML file. It does not use an SPA framework and retrieves the Haste client library via a script tag vs using a package based ecosystem. You can use http-server to server the index.html or any web server of your choosing.

Link to Github

Run Example

In order to run the example please perform the following commands:

git clone git@github.com:hastearcade/haste-sdk.git
cd haste-sdk/examples/authentication/umd-app/auth/
npx http-server

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      .App {
        text-align: center;
      }

      .App-logo {
        height: 10vmin;
        cursor: pointer;
      }

      .App-header {
        background-color: #18192f;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: calc(10px + 2vmin);
        color: white;
      }

      .App-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
      }

      .App-link {
        color: #faaf3a;
      }

      .App-button {
        cursor: pointer;
        margin-top: 20px;
        background: #faaf3a;
        border-radius: 8px;
        font-family: Roboto;
        font-style: normal;
        font-weight: bold;
        line-height: 140%;
        text-align: center;
        color: #18192f;
        font-size: 16px;
        vertical-align: middle;
        padding: 1rem 0px;
        height: 50px;
        width: 50%;
        border: medium none;
        transition: background-color 0.2s ease-in-out 0s, color 0.2s ease-in-out
            0s;
        text-transform: none;
        letter-spacing: 0px;
        line-height: 1;
      }

      .App-button:hover {
        background: rgb(205, 128, 7) none repeat scroll 0% 0%;
        color: rgb(24, 25, 47);
      }

      #welcome-tag,
      #avatar,
      #sign-out {
        display: none;
      }

      body,
      html {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div class="App-header">
      <div class="App-inner">
        <p id="welcome-tag">Welcome</p>
        <img id="avatar" src="" class="App-logo" alt="logo" />
        <button
          id="sign-out"
          type="button"
          class="App-button"
          onClick="hasteLogout()"
        >
          Sign Out
        </button>
        <img
          id="sign-in-button"
          src="./login.svg"
          class="App-logo"
          alt="logo"
          onClick="hasteLogin()"
        />
        <p id="sign-in-copy">Click the button to login.</p>
      </div>
      <a
        class="App-link"
        href="https://github.com/hastearcade/haste-sdk"
        target="_blank"
        rel="noopener noreferrer"
      >
        Learn More about Haste SDK
      </a>
    </div>
    <script src="https://unpkg.com/@hastearcade/web/dist/umd/index.js"></script>
    <script>
      function initialize() {
        // initialize the haste client
        // perform get token details
        // if the user is not authenticated
        // then show the unauthenticated version of the page
        // otherwise show the authenticated version with the
        // player's profile details
        try {
          hasteClient = haste.HasteClient.build();
          console.log(hasteClient);
          const details = hasteClient.getTokenDetails();
          console.log(details);

          if (details.isAuthenticated) {
            console.log("here");
            document.getElementById("welcome-tag").style.display = "block";
            document.getElementById(
              "welcome-tag"
            ).innerHTML = `Welcome ${details.displayName}`;
            document.getElementById("avatar").style.display = "block";
            document.getElementById("avatar").src = details.picture;
            document.getElementById("sign-out").style.display = "block";
            document.getElementById("sign-in-button").style.display = "none";
            document.getElementById("sign-in-copy").style.display = "none";
          }
        } catch (e) {
          console.log(e);
        }
      }
      initialize();

      function hasteLogin() {
        hasteClient.login();
      }

      function hasteLogout() {
        hasteClient.logout();
      }
    </script>
  </body>
</html>

© 2023 Haste, Inc.