github-mirrors/oauth-playground-server
1
0
Fork 0
mirror of https://github.com/ysoftdevs/oauth-playground-server.git synced 2026-01-17 00:57:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

Passwordless login redesign

Browse Source
This commit is contained in:
Dusan Jakub
2023-09-26 15:56:33 +02:00
parent 3ca1bde61b
commit 4af7230e5d
1 changed files with 76 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/main/resources/templates/OAuthResource/loginPasswordless.html
View File

@@ -17,37 +17,89 @@
{/add-header}
<div class="container">
<input id="userName" placeholder="User name"/><br/>
<button class="nextBtn" id="login">Login</button>
<button class="nextBtn" id="register">Register</button>
</div>
<div class="section">
<div class="col s12 m7">
<div class="card horizontal">
<div class="card-stacked">
<div class="card-content">
<h6>Create a new credential or use an existing one</h6>
<p>In Webauthn, a single user will have multiple credentials, tied to the devices they are using.</p>
<p>First the user enters their username:</p>
<input id="userName" placeholder="User name"/><br/>
<div class="container step" id="server1-request">
The interaction starts with an AJAX call.
<div class="code">POST <span id="server1-url"></span>
<div id="server1-call"></div>
<p>If they are a new user, they need to generate a new credential and register it with the application</p>
<button class="nextBtn waves-effect waves-light btn full-width" id="register">Register</button>
<p>If they are a returning user, their authenticator must prove they own the credential.</p>
<button class="nextBtn waves-effect waves-light btn full-width" id="login">Login</button>
</div>
</div>
</div>
</div>
<button class="nextBtn">Request challenge</button>
</div>
<div class="container step" id="server1-response">
The server prepares a challenge for the browser to sign.
<div class="code" id="server1-response-body"></div>
<button class="nextBtn">Continue</button>
<div class="section step" id="server1-request">
<div class="col s12 m7">
<div class="card horizontal">
<div class="card-stacked">
<div class="card-content">
<h6>Request a challenge</h6>
<p>The interaction starts with an AJAX call.</p>
<div class="code">POST <span id="server1-url"></span>
<div id="server1-call"></div>
</div>
<button class="nextBtn waves-effect waves-light btn full-width">Request challenge</button>
</div>
</div>
</div>
</div>
</div>
<div class="container step" id="navigator-request">
The challenge is passed to the browser call:
<div class="code" id="navigator-call"></div>
<button class="nextBtn">Call Webauthn API</button>
<div class="section step" id="server1-response">
<div class="col s12 m7">
<div class="card horizontal">
<div class="card-stacked">
<div class="card-content">
<h6>The challenge</h6>
<p>The server prepares a challenge for the browser to sign.</p>
<div class="code" id="server1-response-body"></div>
<button class="nextBtn waves-effect waves-light btn full-width">Continue</button>
</div>
</div>
</div>
</div>
</div>
<div class="container step" id="navigator-response">
Which responds:
<div class="code" id="navigator-response-body"></div>
The <strong>response.clientDataJSON</strong> are base64 encoded:
<div class="code" id="navigator-clientDataJSON"></div>
<button class="nextBtn">Finish the interaction</button>
<div class="section step" id="navigator-request">
<div class="col s12 m7">
<div class="card horizontal">
<div class="card-stacked">
<div class="card-content">
<h6>WebAuthn API</h6>
<p>The challenge is passed to the browser call:</p>
<div class="code" id="navigator-call"></div>
<button class="nextBtn waves-effect waves-light btn full-width">Call Webauthn API</button>
</div>
</div>
</div>
</div>
</div>
<div class="section step" id="navigator-response">
<div class="col s12 m7">
<div class="card horizontal">
<div class="card-stacked">
<div class="card-content">
<h6>Attestation</h6>
Which responds:
<div class="code" id="navigator-response-body"></div>
The <strong>response.clientDataJSON</strong> are base64 encoded:
<div class="code" id="navigator-clientDataJSON"></div>
<button class="nextBtn waves-effect waves-light btn full-width">Finish the interaction</button>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -58,6 +110,7 @@
<input name="sessionId" type="hidden" value="somesessionid">
<div id="form-generated"></div>
</form>
</div>
<script type="text/javascript">
function tryDecodeBase64(str) {