authorization/authorization_code_pkce/public/index.html (75 lines of code) (raw):
<!DOCTYPE html>
<html>
<head>
<title>Example of the Authorization Code with PKCE flow with Spotify</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main"></div>
<div id="oauth"></div>
<template id="login">
<h1>Welcome to the OAuth2 PKCE Example</h1>
<button id="login-button" data-bind-onclick="loginWithSpotifyClick();"> Log in with Spotify </button>
</template>
<template id="logged-in-template">
<h1>Logged in as <span data-bind="display_name"></span></h1>
<img width="150" data-bind-src="images[0].url" data-bind-alt="display_name" />
<table>
<tr>
<td>Display name</td>
<td data-bind="display_name"></td>
</tr>
<tr>
<td>Id</td>
<td data-bind="id"></td>
</tr>
<tr>
<td>Email</td>
<td data-bind="email"></td>
</tr>
<tr>
<td>Spotify URI</td>
<td>
<a data-bind="external_urls.spotify" data-bind-href="external_urls.spotify"></a>
</td>
</tr>
<tr>
<td>Link </dt>
<td>
<a data-bind="href" data-bind-href="href"></a>
</td>
</tr>
<tr>
<td>Profile Image</td>
<td>
<a data-bind-href="images[0].url" data-bind="images[0].url"></a>
</td>
</tr>
<tr>
<td>Country</td>
<td data-bind="country"></td>
</tr>
</table>
<button id="refresh-token-button" data-bind-onclick="refreshTokenClick();">Refresh Token</button>
<button id="logout-button" data-bind-onclick="logoutClick();">Log out</button>
</template>
<template id="oauth-template">
<h2>oAuth info</h2>
<table>
<tr>
<td>Access token</td>
<td data-bind="access_token"></td>
</tr>
<tr>
<td>Refresh token</td>
<td data-bind="refresh_token"></td>
</tr>
<tr>
<td>Expiration at</td>
<td data-bind="expires">${getExpirationDate(expires_in)}</td>
</tr>
</table>
</template>
<script src="app.js" type="module"></script>
</body>
</html>