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.
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>