Two- / Multi- Factor Authenication (2FA / MFA / OTP) for browser JavaScript
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

108 lines
4.7 KiB

<!DOCTYPE html>
<html>
<head>
<title>Authenticator</title>
<meta charset="UTF-8">
<!--meta name="viewport" content="width=device-width, user-scalable=no" /-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' https://camo.githubusercontent.com/ https://chart.googleapis.com/ data:; child-src 'self'; object-src 'none'">
<link rel="stylesheet" type="text/css" href="demo/bootstrap-v3.3.5.min.css">
<link rel="stylesheet" type="text/css" href="demo/style.css">
</head>
<body class="fade">
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 left">
<h1 class="authenticator">Authenticator Test</h1>
<img alt="qrcode" class="js-qrcode qrcode" width="166" height="166" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
<div class="scan">
Scan with <a href="https://www.authy.com/personal/mobile/" target="_blank">Authy App</a>
</div>
<div class="verify">
<label class="token-label">Enter Verification Token:</label>
<br />
<input class="js-token token-input" type="text" placeholder="i.e. 123 456" />
<button class="js-verify btn">Verify</button>
</div>
</div>
<div class="col-xs-6 right">
<img class="iPhone" src="demo/iPhoneMockup.png" />
<div class="iframe-container">
<iframe class="js-otp-iframe iframe" src="demo/phone.html"></iframe>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 bottom">
<form class="form-horizontal">
<h1 class="console"> Console </h1>
<hr />
<div class="form-group">
<label class="col-sm-3 control-label">Issuer:</label>
<div class="col-sm-9">
<input type="text" class="js-company-name issuer-input wide" placeholder="Company Name">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Account:</label>
<div class="col-sm-9">
<input type="text" class="js-user-account issuer-input wide" placeholder="User Account">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Key:</label>
<div class="col-sm-9">
<input type="text" class="js-key base-key-input wide">
</div>
</div>
<!-- TODO add options to interface -->
<input type="hidden" class="js-totp-algo" value="SHA1">
<input type="hidden" class="js-totp-digits" value="6">
<input type="hidden" class="js-totp-period" value="30">
<div class="form-group">
<div class="col-sm-offset-6 col-xs-6">
<button type="button" class="btn btn-default js-generate regenerate">Regenerate</button>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">URI:</label>
<div class="col-sm-9">
<a class="js-otpauth">otpauth://totp/company:user?secret=xxxx&amp;issuer=company</a>
</div>
</div>
</form>
</div>
<div class="col-md-3"></div>
</div>
</div>
<!-- github banner -->
<a href="https://git.coolaj86.com/coolaj86/browser-authenticator.js"><img class="github-banner" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me with Git" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
<!-- extremely lightweight shim for hex conversion -->
<script src="demo/bower_components/unibabel/index.js"></script>
<script src="demo/bower_components/unibabel/unibabel.hex.js"></script>
<!-- base32 conversion (and binary string for forge) (works standalone from the above) -->
<script src="demo/bower_components/unibabel/unibabel.base32.js"></script>
<!-- forge.* -->
<!--[if lt IE 11]>
<script src="demo/bower_components/forge/dist/forge.min.js"></script>
<![endif]-->
<!-- botp.totp -->
<script src="demo/bower_components/botp/sha1-hmac.js"></script>
<script src="demo/bower_components/botp/index.js"></script>
<!-- Authenticator -->
<script src="authenticator.js"></script>
<script src="demo/demo.js"></script>
</body>
</html>