Skip to content

W
webauthn-demo
Commit d2c789f0 authored by Josh Ji's avatar Josh Ji
Browse files
Options

11/05 資服競賽

parent b4bf7202
Show whitespace changes
Inline Side-by-side
Showing with 373 additions and 341 deletions
.idea/codeStyles/codeStyleConfig.xml 0 → 100644
View file @ d2c789f0
<component name="ProjectCodeStyleConfiguration">
<state>
<option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
</state>
</component>
\ No newline at end of file
.idea/jsLibraryMappings.xml 0 → 100644
View file @ d2c789f0
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptLibraryMappings">
<file url="file://$PROJECT_DIR$" libraries="{bootstrap, material, material.teal-pink, web-animations}" />
</component>
</project>
\ No newline at end of file
.idea/webContexts.xml 0 → 100644
View file @ d2c789f0
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="WebContextManager">
<option name="state">
<map>
<entry key="file://$PROJECT_DIR$/src/main/webapp/index.jsp" value="file://$PROJECT_DIR$/src/main/webapp" />
</map>
</option>
</component>
</project>
\ No newline at end of file
src/main/java/com/google/webauthn/gaedemo/servlets/FinishGetAssertion.java
View file @ d2c789f0
...@@ -144,8 +144,8 @@ public class FinishGetAssertion extends HttpServlet { ...@@ -144,8 +144,8 @@ public class FinishGetAssertion extends HttpServlet {
} catch (ResponseException e) { } catch (ResponseException e) {
throw new ServletException("Unable to validate assertion", e); throw new ServletException("Unable to validate assertion", e);
} }
/* josh ji , by pass verify*/
Server.verifyAssertion(cred, currentUser, session, savedCredential); // Server.verifyAssertion(cred, currentUser, session, savedCredential);
savedCredential.setUserVerificationMethod(uvm); savedCredential.setUserVerificationMethod(uvm);
savedCredential.save(currentUser); savedCredential.save(currentUser);
......
src/main/java/com/google/webauthn/gaedemo/servlets/FinishMakeCredential.java
View file @ d2c789f0
...@@ -87,7 +87,7 @@ public class FinishMakeCredential extends HttpServlet { ...@@ -87,7 +87,7 @@ public class FinishMakeCredential extends HttpServlet {
if (data == null) { if (data == null) {
data = ""; data = "";
} }
System.out.println(data); // System.out.println(data);
String session = request.getParameter("session"); String session = request.getParameter("session");
if (session == null) { if (session == null) {
session = ""; session = "";
...@@ -160,7 +160,8 @@ public class FinishMakeCredential extends HttpServlet { ...@@ -160,7 +160,8 @@ public class FinishMakeCredential extends HttpServlet {
} }
/* josh start */ /* josh start */
if(1==1) { String IDfromIDP = "";
if(1==0) {
String attestationObjectBase64 = makeCredentialResponse.getAsJsonObject().get("attestationObject").getAsString(); String attestationObjectBase64 = makeCredentialResponse.getAsJsonObject().get("attestationObject").getAsString();
System.out.println("attestationObject base64: " + attestationObjectBase64); System.out.println("attestationObject base64: " + attestationObjectBase64);
byte[] attestationObject = BaseEncoding.base64().decode(attestationObjectBase64); byte[] attestationObject = BaseEncoding.base64().decode(attestationObjectBase64);
...@@ -192,7 +193,8 @@ public class FinishMakeCredential extends HttpServlet { ...@@ -192,7 +193,8 @@ public class FinishMakeCredential extends HttpServlet {
.body("{\"p1\":\"" + p1 + "\",\"p2\":\"" + p2 + "\"}") .body("{\"p1\":\"" + p1 + "\",\"p2\":\"" + p2 + "\"}")
.asString(); .asString();
System.out.println(httpResponse.getBody()); IDfromIDP = httpResponse.getBody();
System.out.println("the identity returned from IDP : " + IDfromIDP);
} catch (CborException e) { } catch (CborException e) {
e.printStackTrace(); e.printStackTrace();
} }
...@@ -230,7 +232,7 @@ public class FinishMakeCredential extends HttpServlet { ...@@ -230,7 +232,7 @@ public class FinishMakeCredential extends HttpServlet {
credential.save(currentUser); credential.save(currentUser);
PublicKeyCredentialResponse rsp = PublicKeyCredentialResponse rsp =
new PublicKeyCredentialResponse(true, "Successfully created credential"); new PublicKeyCredentialResponse(true, "Successfully created credential, Hi "+IDfromIDP);
response.setContentType("application/json"); response.setContentType("application/json");
response.getWriter().println(rsp.toJson()); response.getWriter().println(rsp.toJson());
......
src/main/webapp/WEB-INF/appengine-web.xml
View file @ d2c789f0
...@@ -4,6 +4,9 @@ ...@@ -4,6 +4,9 @@
<version>${appengine.app.version}</version> <version>${appengine.app.version}</version>
<threadsafe>true</threadsafe> <threadsafe>true</threadsafe>
<runtime>java8</runtime> <runtime>java8</runtime>
<static-files>
<include path="/**" expiration="0d 0h" />
</static-files>
<system-properties> <system-properties>
<property name="java.util.logging.config.file" value="WEB-INF/logging.properties" /> <property name="java.util.logging.config.file" value="WEB-INF/logging.properties" />
</system-properties> </system-properties>
......
src/main/webapp/WEB-INF/web.xml
View file @ d2c789f0
...@@ -56,6 +56,16 @@ ...@@ -56,6 +56,16 @@
<!-- </user-data-constraint>--> <!-- </user-data-constraint>-->
<!-- </security-constraint>--> <!-- </security-constraint>-->
<security-constraint>
<web-resource-collection>
<web-resource-name>/*</web-resource-name>
<url-pattern>/*</url-pattern>
</web-resource-collection>
<user-data-constraint>
<transport-guarantee>CONFIDENTIAL</transport-guarantee>
</user-data-constraint>
</security-constraint>
<context-param> <context-param>
<param-name>name</param-name> <param-name>name</param-name>
<param-value>webauthn-demo</param-value> <param-value>webauthn-demo</param-value>
......
src/main/webapp/index.jsp
View file @ d2c789f0
<%@ page language="java" pageEncoding="UTF-8"%> <%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico"> <link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.teal-pink.min.css" />
href="https://code.getmdl.io/1.3.0/material.teal-pink.min.css" /> <script src="//code.getmdl.io/1.3.0/material.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" <!-- CSS only -->
rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link href="stylesheets/webauthn.css" rel="stylesheet"> <!-- Web Animations polyfill for Edge. -->
<script src="//code.getmdl.io/1.3.0/material.min.js"></script> <script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"></script>
<!-- Web Animations polyfill for Edge. --> <title>Webauthn Demo</title>
<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"></script>
<title>Thanks PL</title> <!-- css -->
</head> <style>
<body> .btn-color {
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> background-image: linear-gradient(60deg, #64b3f4 0%, #c2e59c 100%);
<header class="mdl-layout__header"> border-radius: 50px;
<div class="mdl-layout__header-row"> color:white;
<span class="mdl-layout__title">WebAuthn Demo</span> height: 50px;
</div> border: 0px;
font-size: 16px;
text-align: center;
}
.ipt-text {
border: none;
border-bottom: 2px solid gray;
height: 30px;
width: 100%;
}
<div id="header-buttons" class="mdl-layout__header-row"> label {
<div id="username-input" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> color: #718598;
<input class="mdl-textfield__input" id="username"/> cursor: default;
<label class="mdl-textfield__label" for="username">Username</label> font-weight: bold;
</div> font-size: 14px;
<button id="credential-button" }
class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect make-button" </style>
title="Calls MakeCredential to register a new credential from a FIDO device"
>
Register</button>
<button id="authenticate-button"
class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect auth-button"
title="Calls GetAssertion to request an assertion from a previously-registered FIDO device"
>
Login</button>
<%-- <button id="isuvpaa-button"--%>
<%-- class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect make-button"--%>
<%-- title="Calls IsUserVerifyingPlatformAuthenticatorAvailable. Returns &quot;true&quot; if the device supports an internal authenticator, and &quot;false&quot; if the device does not. (E.g., fingerprints on Android or TouchID on MacOS)"--%>
<%-- >--%>
<%-- isUVPAA</button>--%>
<%-- <button id="platform-button"--%>
<%-- class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect make-button"--%>
<%-- title="A convenience method to register an internal authenticator. This is equivalent to calling MakeCredential with AttachmentType=Platform"--%>
<%-- >--%>
<%-- Register platform authenticator</button>--%>
<%-- <button id="credential-button"--%>
<%-- class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect make-button"--%>
<%-- title="Calls MakeCredential to register a new credential from a FIDO device"--%>
<%-- >--%>
<%-- Register new credential</button>--%>
<%-- <button id="authenticate-button"--%>
<%-- class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect auth-button"--%>
<%-- title="Calls GetAssertion to request an assertion from a previously-registered FIDO device"--%>
<%-- >--%>
<%-- Authenticate</button>--%>
</div>
</header>
<div class="mdl-layout__drawer"> </head>
<span class="mdl-layout-title">Advanced Options</span> <body>
<div class="mdl-list">
<div class="mdl-list__item"> <%-- navbar --%>
<label class="mdl-checkbox mdl-js-checkbox" for="switch-rr"> <nav class="navbar bg-light navbar-light">
<input type="checkbox" id="switch-rr" class="mdl-checkbox__input"> <div class="container-fluid">
<span class="mdl-checkbox__label">Prevent Reregistration</span> <%-- <a href="#" class="navbar-brand"><img src="img/logo1.png" alt="Taiwan Tech Logo" class="navbar-brand" style="height: 40pt"></a>--%>
</label> <a href="#" class="navbar-brand">FIDO DEMO</a>
</div> <button class="navbar-toggler"
<div class="mdl-list__item"> type="button"
<label for="attachment" class="attachment">Attachment Type</label> data-bs-toggle="collapse"
data-bs-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav">
<li class="nav-item">
<label for="switch-rk" class="nav-link">Resident Key</label>
<input type="checkbox" id="switch-rk">
</li>
<li class="nav-item">
<label for="switch-rr" class="nav-link">Prevent Registration</label>
<input type="checkbox" id="switch-rr">
</li>
<li class="nav-item">
<label for="switch-uvm" class="nav-link">User Verification Method</label>
<input type="checkbox" id="switch-uvm">
</li>
<li class="nav-item">
<label for="attachment" class="nav-link">Attachment Type</label>
<select id="attachment" class="attachment"> <select id="attachment" class="attachment">
<option value="none">N/A</option> <option value="none">N/A</option>
<option value="platform">Platform</option>
<option value="cross-platform">Cross-Platform</option> <option value="cross-platform">Cross-Platform</option>
<option value="platform">Platform</option>
</select> </select>
</div> </li>
<div class="mdl-list__item"> <li class="nav-item">
<label for="conveyance" class="attachment">Conveyance Preference</label> <label for="userVerification" class="nav-link">User Verification</label>
<select id="conveyance" class="attachment">
<option value="NA">N/A</option>
<option value="none">None</option>
<option value="indirect">Indirect</option>
<option value="direct">Direct</option>
</select>
</div>
<div class="mdl-list__item">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="switch-rk">
<input type="checkbox" id="switch-rk" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">Require resident key</span>
</label>
</div>
<div class="mdl-list__item">
<label for="userVerification" class="attachment">User Verification</label>
<select id="userVerification" class="attachment"> <select id="userVerification" class="attachment">
<option value="none">None</option> <option value="none">None</option>
<option value="required">Required</option> <option value="required">Required</option>
<option value="preferred">Preferred</option> <option value="preferred">Preferred</option>
<option value="discouraged">Discouraged</option> <option value="discouraged">Discouraged</option>
</select> </select>
</div> </li>
<div class="mdl-list__item"> <li class="nav-item">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="switch-uvm"> <label for="conveyance" class="nav-link">Conveyance Preference</label>
<input type="checkbox" id="switch-uvm" class="mdl-checkbox__input"> <select id="conveyance" class="attachment">
<span class="mdl-checkbox__label">User Verification Method</span> <option value="NA">N/A</option>
</label> <option value="none">None</option>
</div> <option value="indirect">Indirect</option>
<div class="mdl-list__item"> <option value="direct">Direct</option>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> </select>
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="customTimeout"> </li>
<label class="mdl-textfield__label" for="customTimeout">Timeout (milliseconds)</label> <li class="nav-item">
<span class="mdl-textfield__error">Input is not a number!</span> <label class="nav-link" for="customTimeout">Timeout (milliseconds)</label>
</div> <input type="number" id="customTimeout">
</div> </li>
<div class="mdl-list__item"> <li class="nav-item">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <label class="nav-link" for="abortTimeout">AbortTimeout (milliseconds)</label>
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="abortTimeout"> <input type="number" id="abortTimeout">
<label class="mdl-textfield__label" for="abortTimeout">AbortTimeout (milliseconds)</label> </li>
<span class="mdl-textfield__error">Input is not a number!</span> </ul>
</div>
</div>
<div class="mdl-list__item">
<a href="${logoutUrl}">Logout</a>
</div> </div>
</div> </div>
</nav>
<%-- body--%>
<div class="container">
<div class="row justify-content-center">
<div class="col-4" style="width: 400px; padding-top: 150px;">
<div class="card shadow-lg p-5" style="border: 0px;">
<div class="row justify-content-start">
<%-- <div style="padding-top: 50px; padding-bottom: 40px;">--%>
<%-- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="293px" height="50px" viewBox="0 0 293 75"><title>iThome</title><desc>Created with Sketch.</desc><defs><polygon id="path-1" points="0.111529282 0.0703 47.097518 0.0703 47.097518 41 0.111529282 41"></polygon></defs><g id="&#x9996;&#x9801;" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Group-86" transform="translate(-833.000000, -138.500000)"></g><g id="Group-14" transform="translate(2.000000, 7.000000)"><polygon id="Fill-1" fill="#1686C2" points="6.2046 21.6725 -0.0004 60.8355 19.0246 60.8355 25.2256 21.6725"></polygon><polygon id="Fill-2" fill="#1686C2" points="9.7605 1.0004 6.7825 17.5474 25.8105 17.5474 28.7855 1.0004"></polygon><polygon id="Fill-3" fill="#1686C2" points="33.5124 1.0292 30.6464 19.0962 41.8674 18.5822 35.1934 60.5512 55.4024 60.5512 62.0764 18.5822 73.1314 19.0962 75.9924 1.0292"></polygon><g id="Group-13" transform="translate(71.000000, 0.721600)"><path d="M10.0831,0.3033 L29.1111,0.3033 L26.4931,16.8223 L23.8891,27.6613 L24.1861,27.6613 C28.3911,23.4613 32.5441,20.0703 38.0021,20.0703 C47.7331,20.0703 50.0341,27.4433 48.6641,36.0673 L44.8591,60.1133 L26.2721,60.1133 L29.4751,39.9063 C29.8001,37.8423 29.9141,35.2593 27.1851,35.2593 C24.2351,35.2593 23.2221,37.4723 22.8411,39.9063 L19.6361,60.1133 L0.6101,60.1133 L10.0831,0.3033 Z" id="Fill-4" fill="#1686C2"></path><path d="M97.8838,41.0147 C95.8298,53.9927 83.2098,60.9997 70.9708,60.9997 C58.7298,60.9997 48.3368,53.9927 50.3918,41.0147 C52.5618,27.2967 64.5498,20.0707 77.4538,20.0707 C90.3638,20.0707 100.0588,27.2967 97.8838,41.0147 M68.8758,40.7177 C68.3848,43.8127 70.3808,46.1017 73.3298,46.1017 C76.2828,46.1017 79.0028,43.8127 79.4968,40.7177 C79.9978,37.5487 78.2688,34.9657 75.0958,34.9657 C71.9218,34.9657 69.3768,37.5487 68.8758,40.7177" id="Fill-6" fill="#1686C2"></path><path d="M120.3907,27.8829 L120.9847,27.8829 C123.2877,23.0929 128.5607,20.0669 133.5767,20.0669 C139.1847,20.0669 142.6157,23.0929 143.4707,28.4019 L143.9067,28.4019 C146.9907,22.9429 151.0577,20.0669 157.0997,20.0669 C166.4677,20.0669 169.4537,27.2969 168.1097,35.7779 L164.2607,60.1159 L145.8207,60.1159 L148.8937,40.7149 C149.2507,38.4359 149.7227,35.4809 146.9187,35.4809 C144.1897,35.4809 143.7207,38.4359 143.3637,40.7149 L140.2867,60.1159 L121.8497,60.1159 L124.9227,40.7149 C125.2847,38.4359 125.7487,35.4809 122.9527,35.4809 C120.2227,35.4809 119.7577,38.4359 119.3887,40.7149 L116.3207,60.1159 L97.8837,60.1159 L104.0857,20.9539 L122.0787,20.9539 L120.3907,27.8829 Z" id="Fill-8" fill="#1686C2"></path><g id="Group-12" transform="translate(169.000000, 20.000000)"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><g id="Clip-11"></g><path d="M18.7911,23.7403 C18.2901,26.9133 18.2471,30.4553 22.2291,30.4553 C24.2181,30.4553 25.9161,29.0523 26.5821,27.2103 L45.0901,27.2103 C41.0841,36.6503 29.8541,41.0003 20.8541,41.0003 C8.5391,41.0003 -1.7419,34.6583 0.3941,21.1583 C2.4501,8.1763 13.7691,0.0703 26.2311,0.0703 C40.1681,0.0703 49.7331,9.0633 46.4491,23.7403 L18.7911,23.7403 Z M29.0001,15.6273 C29.4221,12.9723 27.8881,10.5413 25.1651,10.5413 C22.2821,10.5413 20.5081,12.8983 20.0791,15.6273 L29.0001,15.6273 Z" id="Fill-10" fill="#1686C2" mask="url(#mask-2)"></path></g></g></g></g></svg>--%>
<%-- <p style="padding-top: 10px; text-align: center; color: gray;"> For Demo</p>--%>
<%-- </div>--%>
<div >
<img src="img/logo4.png" style="width: 250px;display:block; margin:auto;" alt="logo2">
<h1 style="text-align: center">FIDO DEMO</h1>
</div>
<%-- <div class="col">--%>
<%-- <label for="username" class="form-label">Name</label>--%>
<%-- </div>--%>
</div>
<div class="row">
<div class="col">
<%-- <input type="text" class="form-control" id="username" required>--%>
</div>
</div>
<%-- <div class="row" style="padding-top: 60px;">--%>
<div class="col py-3">
<button class="btn-color" id="credential-button" style="width: 100%">Login</button>
</div>
<%-- <div class="col py-3">--%>
<%-- <button class="btn-color" id="authenticate-button" style="width: 100%">Login</button>--%>
<%-- </div>--%>
<%-- </div>--%>
<div>
<input type="hidden" id="active">
<input type="hidden" id="username" value="Josh Ji">
<%-- <input type="hidden" id="credential-button">--%>
<%-- <input type="hidden" id="switch-rk" >--%>
<%-- <input type="hidden" id="switch-rr" >--%>
<%-- <input type="hidden" id="switch-uvm">--%>
<%-- <input type="hidden" id="userVerification" value="none">--%>
<%-- <input type="hidden" id="attachment" value="none">--%>
<%-- <input type="hidden" id="conveyance" value="NA">--%>
<%-- <input type="hidden" id="customTimeout">--%>
<%-- <input type="hidden" id="abortTimeout">--%>
</div>
</div>
</div>
</div>
<div id="credentials" class="row">
</div> </div>
<main class="flex-layout"> <div id="snack-bar" class="mdl-js-snackbar mdl-snackbar">
<div class="mdl-layout__content mdl-color--grey-100 flex-content"> <div class="mdl-snackbar__text"></div>
<div id="active" class="hidden activity-bar"> <button class="mdl-snackbar__action" type="button"></button>
<h3 class="active-text">Waiting for user touch</h3>
<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate page-width"></div>
</div> </div>
<div id="credentials" class="mdl-grid mdl-grid--no-spacing"></div>
</div> </div>
<footer id="github" class="mdl-mini-footer"> <%-- toast--%>
<div class="mdl-mini-footer__left-section">
<ul class="mdl-mini-footer__link-list"> <div class="toast-container position-fixed top-50 start-50 translate-middle p-3" >
<%-- <li>${nickname}</li>--%> <div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="5000">
</ul> <div class="toast-header">
Message
</div> </div>
<div class="mdl-mini-footer__right-section"> <div id="toast-body" class="toast-body">
<ul class="mdl-mini-footer__link-list"> Toast Body
<li>
<a href="https://github.com/google/webauthndemo">GitHub</a>
</li>
</ul>
</div> </div>
</footer>
<div id="snack-bar" class="mdl-js-snackbar mdl-snackbar">
<div class="mdl-snackbar__text"></div>
<button class="mdl-snackbar__action" type="button"></button>
</div> </div>
</main>
</div> </div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<script src="js/webauthn.js"></script> <script src="js/webauthn.js"></script>
</body> <script>
// override fetchCredentials in "js/webauthn.js"
function fetchCredentials(){
}
</script>
</body>
</html> </html>
src/main/webapp/index_.jsp deleted 100644 → 0
View file @ b4bf7202
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet"
href="https://code.getmdl.io/1.3.0/material.teal-pink.min.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link href="stylesheets/webauthn.css" rel="stylesheet">
<script src="//code.getmdl.io/1.3.0/material.min.js"></script>
<!-- Web Animations polyfill for Edge. -->
<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"></script>
<title>Thanks PL</title>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout__title">WebAuthn Demo</span>
</div>
<div id="header-buttons" class="mdl-layout__header-row">
<div id="username-input" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" id="username"/>
<label class="mdl-textfield__label" for="username">Username</label>
</div>
<button id="credential-button"
class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect make-button"
title="Calls MakeCredential to register a new credential from a FIDO device"
>
Register</button>
<button id="authenticate-button"
class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect auth-button"
title="Calls GetAssertion to request an assertion from a previously-registered FIDO device"
>
Login</button>
<%-- <button id="isuvpaa-button"--%>
<%-- class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect make-button"--%>
<%-- title="Calls IsUserVerifyingPlatformAuthenticatorAvailable. Returns &quot;true&quot; if the device supports an internal authenticator, and &quot;false&quot; if the device does not. (E.g., fingerprints on Android or TouchID on MacOS)"--%>
<%-- >--%>
<%-- isUVPAA</button>--%>
<%-- <button id="platform-button"--%>
<%-- class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect make-button"--%>
<%-- title="A convenience method to register an internal authenticator. This is equivalent to calling MakeCredential with AttachmentType=Platform"--%>
<%-- >--%>
<%-- Register platform authenticator</button>--%>
<%-- <button id="credential-button"--%>
<%-- class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect make-button"--%>
<%-- title="Calls MakeCredential to register a new credential from a FIDO device"--%>
<%-- >--%>
<%-- Register new credential</button>--%>
<%-- <button id="authenticate-button"--%>
<%-- class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect auth-button"--%>
<%-- title="Calls GetAssertion to request an assertion from a previously-registered FIDO device"--%>
<%-- >--%>
<%-- Authenticate</button>--%>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Advanced Options</span>
<div class="mdl-list">
<div class="mdl-list__item">
<label class="mdl-checkbox mdl-js-checkbox" for="switch-rr">
<input type="checkbox" id="switch-rr" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">Prevent Reregistration</span>
</label>
</div>
<div class="mdl-list__item">
<label for="attachment" class="attachment">Attachment Type</label>
<select id="attachment" class="attachment">
<option value="none">N/A</option>
<option value="platform">Platform</option>
<option value="cross-platform">Cross-Platform</option>
</select>
</div>
<div class="mdl-list__item">
<label for="conveyance" class="attachment">Conveyance Preference</label>
<select id="conveyance" class="attachment">
<option value="NA">N/A</option>
<option value="none">None</option>
<option value="indirect">Indirect</option>
<option value="direct">Direct</option>
</select>
</div>
<div class="mdl-list__item">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="switch-rk">
<input type="checkbox" id="switch-rk" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">Require resident key</span>
</label>
</div>
<div class="mdl-list__item">
<label for="userVerification" class="attachment">User Verification</label>
<select id="userVerification" class="attachment">
<option value="none">None</option>
<option value="required">Required</option>
<option value="preferred">Preferred</option>
<option value="discouraged">Discouraged</option>
</select>
</div>
<div class="mdl-list__item">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="switch-uvm">
<input type="checkbox" id="switch-uvm" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">User Verification Method</span>
</label>
</div>
<div class="mdl-list__item">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="customTimeout">
<label class="mdl-textfield__label" for="customTimeout">Timeout (milliseconds)</label>
<span class="mdl-textfield__error">Input is not a number!</span>
</div>
</div>
<div class="mdl-list__item">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="abortTimeout">
<label class="mdl-textfield__label" for="abortTimeout">AbortTimeout (milliseconds)</label>
<span class="mdl-textfield__error">Input is not a number!</span>
</div>
</div>
<div class="mdl-list__item">
<a href="${logoutUrl}">Logout</a>
</div>
</div>
</div>
<main class="flex-layout">
<div class="mdl-layout__content mdl-color--grey-100 flex-content">
<div id="active" class="hidden activity-bar">
<h3 class="active-text">Waiting for user touch</h3>
<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate page-width"></div>
</div>
<div id="credentials" class="mdl-grid mdl-grid--no-spacing"></div>
</div>
<footer id="github" class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<ul class="mdl-mini-footer__link-list">
<%-- <li>${nickname}</li>--%>
</ul>
</div>
<div class="mdl-mini-footer__right-section">
<ul class="mdl-mini-footer__link-list">
<li>
<a href="https://github.com/google/webauthndemo">GitHub</a>
</li>
</ul>
</div>
</footer>
<div id="snack-bar" class="mdl-js-snackbar mdl-snackbar">
<div class="mdl-snackbar__text"></div>
<button class="mdl-snackbar__action" type="button"></button>
</div>
</main>
</div>
<script src="js/webauthn.js"></script>
</body>
</html>
src/main/webapp/js/webauthn.js
View file @ d2c789f0
...@@ -46,17 +46,21 @@ const onCheck = (q, on, off) => { ...@@ -46,17 +46,21 @@ const onCheck = (q, on, off) => {
} }
function showErrorMsg(msg) { function showErrorMsg(msg) {
$('#snack-bar').MaterialSnackbar.showSnackbar({ // $('#snack-bar').MaterialSnackbar.showSnackbar({
message: msg, // message: msg,
timeout: 5000 // timeout: 5000
}); // });
document.querySelector('#toast-body').textContent=msg;
new bootstrap.Toast(document.querySelector('#toast')).show();
}; };
function showSuccessMsg(msg) { function showSuccessMsg(msg) {
$('#snack-bar').MaterialSnackbar.showSnackbar({ // $('#snack-bar').MaterialSnackbar.showSnackbar({
message: msg, // message: msg,
timeout: 5000 // timeout: 5000
}); // });
document.querySelector('#toast-body').textContent=msg.replace('assertion','Authentication');
new bootstrap.Toast(document.querySelector('#toast')).show();
}; };
function _fetch(url, obj) { function _fetch(url, obj) {
...@@ -266,6 +270,9 @@ function registerNewCredential() { ...@@ -266,6 +270,9 @@ function registerNewCredential() {
} }
if ($('#attachment').value != "none") { if ($('#attachment').value != "none") {
advancedOptions.authenticatorAttachment = $('#attachment').value; advancedOptions.authenticatorAttachment = $('#attachment').value;
}else{
// override attachment type fixed to cross-platfrom
advancedOptions.authenticatorAttachment = 'cross-platform';
} }
if ($('#conveyance').value != "NA") { if ($('#conveyance').value != "NA") {
advancedOptions.attestationConveyancePreference = $('#conveyance').value; advancedOptions.attestationConveyancePreference = $('#conveyance').value;
...@@ -295,7 +302,7 @@ function makeCredential(advancedOptions) { ...@@ -295,7 +302,7 @@ function makeCredential(advancedOptions) {
let _options; let _options;
// Tyler ----------------- // Tyler -----------------
let username = document.querySelector('.mdl-textfield__input').value; let username = document.querySelector('#username').value;
return _fetch('/BeginMakeCredential', { return _fetch('/BeginMakeCredential', {
advanced: true, advanced: true,
...@@ -405,6 +412,7 @@ function makeCredential(advancedOptions) { ...@@ -405,6 +412,7 @@ function makeCredential(advancedOptions) {
if (parameters && parameters.success) { if (parameters && parameters.success) {
showSuccessMsg(parameters.message); showSuccessMsg(parameters.message);
location.assign('profile.jsp')
fetchCredentials(); fetchCredentials();
} else { } else {
throw 'Unexpected response received.'; throw 'Unexpected response received.';
...@@ -444,7 +452,7 @@ function getAssertion() { ...@@ -444,7 +452,7 @@ function getAssertion() {
show('#active'); show('#active');
let _parameters; let _parameters;
let username = document.querySelector('.mdl-textfield__input').value; let username = document.querySelector('#username').value;
_fetch('/BeginGetAssertion', {username:username}).then(parameters => { _fetch('/BeginGetAssertion', {username:username}).then(parameters => {
const requestOptions = {}; const requestOptions = {};
_parameters = parameters; _parameters = parameters;
...@@ -553,21 +561,22 @@ function getAssertion() { ...@@ -553,21 +561,22 @@ function getAssertion() {
console.log(result); console.log(result);
if (result && result.success) { if (result && result.success) {
showSuccessMsg(result.message); showSuccessMsg(result.message)
if ('handle' in result) { location.assign('profile.jsp')
setTimeout(function(){ fetchCredentials(); }, 2000); // if ('handle' in result) {
let card = document.getElementById(result.handle); // setTimeout(function(){ fetchCredentials(); }, 2000);
let prevColor = // let card = document.getElementById(result.handle);
getComputedStyle(card).backgroundColor; // let prevColor =
card.animate([{ // getComputedStyle(card).backgroundColor;
backgroundColor: '#009688' // card.animate([{
},{ // backgroundColor: '#009688'
backgroundColor: prevColor // },{
}], { // backgroundColor: prevColor
duration: 2000, // }], {
easing: 'ease-out' // duration: 2000,
}); // easing: 'ease-out'
} // });
// }
} }
}).catch(err => { }).catch(err => {
hide('#active'); hide('#active');
......
src/main/webapp/profile.jsp 0 → 100644
View file @ d2c789f0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Profile</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>
<body>
<!--navbar-->
<nav class="navbar bg-light navbar-light">
<div class="container-fluid">
<a href="#" class="navbar-brand">
<%-- <img src="img/logo1.png" alt="Taiwan Tech Logo" class="navbar-brand" style="height: 40pt">--%>
FIDO DEMO
</a>
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav">
<li class="nav-item">
<label for="switch-rk" class="nav-link">Resident Key</label>
<input type="checkbox" id="switch-rk">
</li>
<li class="nav-item">
<label for="switch-rr" class="nav-link">Prevent Registration</label>
<input type="checkbox" id="switch-rr">
</li>
<li class="nav-item">
<label for="switch-uvm" class="nav-link">User Verification Method</label>
<input type="checkbox" id="switch-uvm">
</li>
<li class="nav-item">
<label for="attachment" class="nav-link">Attachment Type</label>
<select id="attachment" class="attachment">
<option value="none">N/A</option>
<option value="cross-platform">Cross-Platform</option>
<option value="platform">Platform</option>
</select>
</li>
<li class="nav-item">
<label for="userVerification" class="nav-link">User Verification</label>
<select id="userVerification" class="attachment">
<option value="none">None</option>
<option value="required">Required</option>
<option value="preferred">Preferred</option>
<option value="discouraged">Discouraged</option>
</select>
</li>
<li class="nav-item">
<label for="conveyance" class="nav-link">Conveyance Preference</label>
<select id="conveyance" class="attachment">
<option value="NA">N/A</option>
<option value="none">None</option>
<option value="indirect">Indirect</option>
<option value="direct">Direct</option>
</select>
</li>
<li class="nav-item">
<label class="nav-link" for="customTimeout">Timeout (milliseconds)</label>
<input type="number" id="customTimeout">
</li>
<li class="nav-item">
<label class="nav-link" for="abortTimeout">AbortTimeout (milliseconds)</label>
<input type="number" id="abortTimeout">
</li>
</ul>
</div>
</div>
</nav>
<%-- body--%>
<div class="container">
<div class="row justify-content-center">
<div class="col-4" style="width: 400px; padding-top: 150px;">
<div class="card shadow-lg p-5" style="border: 0px;">
<div class="row justify-content-start">
<h2>
Welcome!
</h2>
<hr>
<img src="img/avatar1.jpg" alt="Avatar1">
<h3 class="p-3">Name: Josh Ji</h3>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</body>
</html>
\ No newline at end of file
webauthn-demo-josh.iml 0 → 100644
View file @ d2c789f0
<?xml version="1.0" encoding="UTF-8"?>
<module version="4">
<component name="FacetManager">
<facet type="app-engine-standard" name="Google App Engine Standard">
<configuration />
</facet>
</component>
</module>
\ No newline at end of file
webauthn.iml 0 → 100644
View file @ d2c789f0
<?xml version="1.0" encoding="UTF-8"?>
<module version="4">
<component name="FacetManager">
<facet type="app-engine-standard" name="Google App Engine Standard">
<configuration />
</facet>
</component>
</module>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment