Passkeys/Resource/template/default/passkey.twig

{#
This file is part of EC-CUBE

Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.

http://www.ec-cube.co.jp/

For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends 'default_frame.twig' %}

{% set body_class = 'mypage' %}

{% block stylesheet %}
    <style>
        .ec-login-header {
            background: #FFFFFF;
        }

        .ec-login-header > p {
            text-align: center;
            font: var(--unnamed-font-style-normal) normal medium 16px/22px YuGothic;
            letter-spacing: var(--unnamed-character-spacing-0);
            text-align: center;
            font: normal normal medium 16px/22px YuGothic;
            letter-spacing: 0px;
            color: #525263;
            opacity: 1;
        }
    </style>
{% endblock %}

{% block javascript %}
    <script src="{{ asset('passkeys/assets/dfido2-lib.js', 'plugin') }}"></script>
    <script>
    setFidoServerURL('https://fido2.amipro.me');//'https://mac-air-m2.dqj-home.com');
    var rp, full_uid, domain;
    window.onload = async function() {
        domain = window.location.hostname
        rp = domain + '.ec-cube.service';
        full_uid = "{{ Customer.username }}_"+domain;

        if(!isWebAuthnSupported()){            
            alert("パスキーをサポートしないブラウザを利用しているため、パスキー認証を無効にします。");
            $('#mode').val('no_webauthn');
            $('#passkey_form').submit();
            return;
        }

        setTimeout(function(){
            $('#auto_message').hide();
            $('#login_form').show();
            $('#login_email').val("{{ Customer.username }}");
            $('#login_email').focus();
        }, 6000);

        /*const sessionOk = await validSession(rp);
        if(sessionOk){
            alert("sessionOk: {{ url(succ_route) }}");
            window.location.href = "{{ url(succ_route) }}";
            return;
        }*/

        //Try auth first
        await logoutFido2UserSession();

        if(canTryAutoAuthentication()){    
            if(await authenticate(full_uid)){
                const session = getSessionId();
                $('#mode').val('login_succ');
                $('#pk_session').val(session);
                $('#rp').val(rp);
                
                //alert("{{ succ_route }}"+"|"+full_uid+"|"+session);
                $('#passkey_form').submit();
                return;
            }
        }

        //Try register
        alert("生体認証を有効するために、次の画面で生体認証を行ってください。");
        await register(full_uid);        
    };

    async function clickedAuthenticate(){
        var uid = $('#login_email').val()
        if(uid && 0==uid.length)uid=full_uid
        else uid = uid+'_'+domain;

        if(await authenticate(uid)){
            const session = getSessionId();
            $('#mode').val('login_succ');
            $('#pk_session').val(session);
            $('#rp').val(rp);
            
            //alert("{{ succ_route }}"+"|"+uid+"|"+session);
            $('#passkey_form').submit();
            return;
        }
    }

    async function authenticate(uid_full){
        const result = await authenticateFido2(uid_full, rp);

        if(result.status === 'ok'){          
            return true;
        }else{
            errProcessFido2(result)
            return false;
        }
    }

    async function clickedRegister(){
        var uid = $('#login_email').val()
        if(uid && 0==uid.length)uid=full_uid;
        else uid = uid+'_'+domain;

        await register(uid);
    }

    async function register(uid_full){   
        const result = await registerFido2(uid_full, 'dis_'+uid_full, rp);

        if(result.status === 'ok'){
            const session = getSessionId();
            $('#mode').val('login_succ');
            $('#pk_session').val(session);
            $('#rp').val(rp);

            //alert("Reg succ:{{ succ_route }}"+"|"+uid_full+"|"+session);
            $('#passkey_form').submit();
            return;            
        }else{
            const msg = errMessageFido2(result);
            //alert('reg err:'+msg);
            if(msg && msg.startsWith('Fido2LibErr105')){
                //alert('retry auth:'+msg);
                if(await authenticate(rp)){
                    const session = getSessionId();
                    $('#mode').val('login_succ');
                    $('#pk_session').val(session);
                    $('#rp').val(rp);
                    
                    //alert("{{ succ_route }}"+"|"+uid+"|"+session);
                    $('#passkey_form').submit();
                    return;
                }
            }else alert(msg)
        }
    }

    </script>
{% endblock javascript %}

{% block main %}
    <div class="ec-role">
        <div class="ec-pageHeader">
            <h1>{{ 'front.passkeys.title'|trans }}</h1>
        </div>
        <div class="ec-off2Grid">
            <div class="ec-off2Grid__cell">
                <form name="passkey_form" id="passkey_form" method="post"
                      action="{{ url('plg_customer_passkey_page') }}">
                    <input type="hidden" name="mode" id="mode" value="login">
                    <input type="hidden" name="pk_session" id="pk_session" value="">
                    <input type="hidden" name="rp" id="rp" value="">
                    
                    <div class="ec-login ec-login-header" id='auto_message'>
                        <p>{{ 'front.passkeys.message'|trans|nl2br }}</p>
                    </div>
                    <div class="ec-login" id='login_form' style='display:none;'>
                        <!-- div class="ec-login__icon">
                            <div class="ec-icon"><img src="{{ asset('assets/icon/user.svg') }}" alt=""></div>
                        </div -->
                        <div class="ec-login__input">
                            <div class="ec-input">
                                <input type="text" name="login_email" id="login_email" class="ec-input__field"
                                       placeholder="{{ 'front.passkeys.email'|trans }}" value="{{ Customer.username }}">
                            </div>
                        </div>
                        <div class="ec-cartNaviIsset__action">
                            <a class="ec-blockBtn--primary" href="javascript:clickedAuthenticate();">{{ 'front.passkeys.auth'|trans }}</a>
                            <br><br>
                            <a class="ec-blockBtn--action" href="javascript:clickedRegister();">{{ 'front.passkeys.register'|trans }}</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}