Skip to content
totp_help.html 4.28 KiB
Newer Older
Marco De Donno's avatar
Marco De Donno committed
<!DOCTYPE html>
<html>
    <head>
        {% for src in js %}
            <script type="text/javascript" src="{{ src }}"></script>
        {% endfor %}
        {% for src in css %}
            <link type="text/css" rel="stylesheet" href="{{ src }}">
        {% endfor %}
        
        <script src="https://icnml.unil.ch/cdn/otplib-browser.js"></script>
        <link type="text/css" rel="stylesheet" href="{{ url_for( 'send_app_files', path = 'app.css' ) }}">
        
        <script type="text/javascript">
            baseurl = "{{ baseurl }}";
            secret = "{{ secret }}";
        </script>
        <style type="text/css">
            #stores_links {
                display: grid;
                grid-template-columns: 1fr 1fr;
                align-items: center;
                justify-items: center;
            }
        </style>
    </head>
    <body>
    	<div class="icnml_central">
            <h1 style="margin-bottom: 0px">ICNML</h1>
            <h4 style="margin-top: 0px">International Close Non-Matches Library</h4>
            
            <div class="ui-widget-header ui-corner-top icnml_box_top">Time-based One Time Password help</div>
            <div class="ui-widget-content ui-corner-bottom icnml_box_content">
                <div>
                    A Time-based One-time Password (TOTP) algorithm is a method to
                    compute a one time password based upon a shared secret between
                    the server and the user. This password is only valid for a period
                    of 30 seconds.
                    
                    <br />
                    <br />
                    
                    The configuration of the shared secret is done via the scan
                    of a QR code generated by the server. This code is scanned
                    by a TOTP application on a smartphone.
                    
                    <br />
                    <br />
                    
                    FreeOTP or GoogleAuthenticator are two applications available
                    on the Apple App Store for Iphones or the GooglePlay for Android.
                    A lot of other applications can be used.
                    FreeOTP is downloadable here:
                    <br />
                    <br />
                    
                    <div id="stores_links">
                        <a href="https://itunes.apple.com/fr/app/freeotp-authenticator/id872559395?mt=8" target="_blank">
                            <img src="{{ url_for( 'send_static_files', path = 'googleplay.png' ) }}" height="50px">
                        </a>
                        
                        <a href="https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp" target="_blank">
                            <img src="{{ url_for( 'send_static_files', path = 'appstore.png' ) }}" height="50px">
                        </a>
                    </div>
                    
                    <br />
                    
                    Once the application is installed, you are able to scan a
                    configuration QR code related to your account.
                    Here you have an example of configuration QR code:
                    
                    <br />
                    
                    <div style="text-align: center;">
                    	<img src="{{ url_for( 'send_static_files', path = 'example_qrcode.png' ) }}">
                    </div>
                    
                    The TOTP value is a set of 6 digits, changing every 30 seconds.
                    The current TOTP value is:
                    <div style="text-align: center; margin-bottom: 10px;">
                        <h1 id="icnml_current_totp"></h1>
                        <div>Valid for <span id="icnml_totp_timeremaining"></span> second(s)</div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
    var update_data = function()
	{
		var tr = otplib.authenticator.timeRemaining();
		var h = otplib.authenticator.generate( "secretsecretsecretsecret" );
		h = h.substr( 0, 3 ) + " " + h.substr( 3, 6 );
		
		$( '#icnml_current_totp' ).text( h );
		$( '#icnml_totp_timeremaining' ).text( tr );
	}
    
    update_data();
    setInterval( update_data, 1000 );
    </script>
</html>