Primefaces：验证码不可见但显示验证消息

Question

我正在使用 Primefaces captcha 来加强我的身份验证过程，我遵循了所有步骤以使其正常工作，包括 public 和私钥的生成，但仍然没有成功'没用。

问题是 captcha 不可见 但它通过同时显示验证消息来阻止身份验证。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    lang="#{languageSwitcher.locale}"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">

<ui:define name="title">
    <h:outputText value="Please Sign In" />
</ui:define>
<ui:define name="header">
    <h:outputText value="Please Sign In" />
</ui:define>

<h:head>
    <title>Connexion</title>

    <!--     <meta charset="utf-8" /> -->
    <link rel="shortcut icon" type="image/x-icon"
        href="${request.contextPath}/resources/images/icons/dataprotect.ico" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="Thu, 19 Nov 1900 08:52:00 GMT" />
    <!--Loading bootstrap css-->

    <link type="text/css" rel="stylesheet"
        href="${request.contextPath}/resources/css/file3.css" />

    <link type="text/css" rel="stylesheet"
        href="${request.contextPath}/resources/css/file1.css" />
    <link type="text/css" rel="stylesheet"
        href="${request.contextPath}/resources/vendors/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.css" />
    <link type="text/css" rel="stylesheet"
        href="${request.contextPath}/resources/vendors/font-awesome/css/font-awesome.min.css" />
    <link type="text/css" rel="stylesheet"
        href="${request.contextPath}/resources/vendors/bootstrap/css/bootstrap.min.css" />
    <!--Loading style vendors-->
    <link type="text/css" rel="stylesheet"
        href="${request.contextPath}/resources/vendors/animate.css/animate.css" />
    <link type="text/css" rel="stylesheet"
        href="${request.contextPath}/resources/vendors/iCheck/skins/all.css" />
    <!--Loading style-->
    <link type="text/css" rel="stylesheet"
        href="${request.contextPath}/resources/css/themes/style1/pink-blue.css"
        class="default-style" />
    <link type="text/css" rel="stylesheet"
        href="${request.contextPath}/resources/css/themes/style1/pink-blue.css"
        id="theme-change" class="style-change color-change" />
    <link type="text/css" rel="stylesheet"
        href="${request.contextPath}/resources/css/style-responsive.css" />
    <link rel="shortcut icon"
        href="${request.contextPath}/resources/images/favicon.ico" />
<!-- background:#eeeeee !important; -->
<style>
#signin-page{
background:white !important;
}

/* .header-content{ */
/* background:#eeeeee !important; */
/* } */


</style>
</h:head>

<body id="signin-page">

    <h:form style="float: right;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
    background: transparent;
    padding-top: 17px;
    margin-left: 0px;">
        <p:commandLink action="#{languageSwitcher.changeLanguage2('en')}" ajax="false" onclick="PF('enCours2').show();" oncomplete="PF('enCours2').hide();" >
            <img src="${request.contextPath}/resources/images/imgs/en.png" />

        </p:commandLink>
        <p:commandLink ajax="false" onclick="PF('enCours2').show();" oncomplete="PF('enCours2').hide();" action="#{languageSwitcher.changeLanguage2('fr')}">
            <img src="${request.contextPath}/resources/images/imgs/fr.png" />

        </p:commandLink>
        <p:commandLink ajax="false" onclick="PF('enCours2').show();" oncomplete="PF('enCours2').hide();" action="#{languageSwitcher.changeLanguage2('ar')}">
            <img src="${request.contextPath}/resources/images/imgs/ma.png" />

        </p:commandLink>


    </h:form>
    <div class="page-form">

        <h:form id="loginForm">
            <div class="header-content">
                <h1>
                 <p:graphicImage style="width:45%;"
                value="/resources/images/sensipro_dp.png" />
                </h1>
            </div>
            <p:focus />
            <p:messages id="messages" />
            <div class="body-content">
                <div class="form-group">
                    <div class="input-icon right">
                        <i class="fa fa-user"></i>
                        <h:inputText id="email" value="#{user.email}" required="true"
                            label="Email" placeholder="Identifiant" name="email"
                            requiredMessage="Identifiant ou email est requis"
                            styleClass="form-control" title="Enter your Email!" >
                            <f:validator binding="#{sizeValidator}" />
                            </h:inputText>
                        <p:message for="email" display="icon" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-icon right">
                        <i class="fa fa-key"></i>
                        <h:inputSecret id="pass" placeholder="Mot de passe"
                            name="password" styleClass="form-control"
                            value="#{user.password}" required="true"
                            requiredMessage="Mot de passe est requis" label="Password"
                            title="Please enter a password!" >
                            <f:validator binding="#{sizeValidator}" />
                            </h:inputSecret>

                    </div>
                </div>

                <p:captcha label="Captcha" rendered="true" />


                <div class="form-group pull-left">
                    <div class="checkbox-list">
                        <label> <input type="checkbox" name="remember-me" />&nbsp;
                            Se souvenir de moi
                        </label>
                    </div>
                </div>
                <div class="form-group pull-right">
                    <p:commandLink id="submitButton" styleClass="btn btn-success" ajax="false"
                        action="confirmSignIn" onsuccess="PF('enCours').hide();" onclick="PF('enCours').show();" update="messages @all">#{msg['signin']} &nbsp;<i
                            class="fa fa-sign-in"></i>

                    </p:commandLink>
                </div>
                <div class="clearfix"></div>
                <div class="forget-password">
                    <h6>Mot de passe oublié ?</h6>

                    <p>
                        Veuillez cliquer <a
                            href="${facesContext.externalContext.requestContextPath}/forgottenPwd.jsf"
                            class='btn-forgot-pwd'><b>ici</b></a> pour rénitialiser votre mot de
                        passe.
                    </p>
                </div>
                <hr />
            </div>

        </h:form>
    </div>

    <p:dialog modal="true" id="guns" widgetVar="enCours" header="En cours" 
            style="position:fixed;" draggable="false" width="350px"
            height="120px" closable="false"> 
            <center>
            <p:outputPanel id="mark">
        <h:outputLabel value="Authentification en cours..."> </h:outputLabel>
             </p:outputPanel>
    <p:graphicImage
                value="/resources/vendors/pageloader/images/loader100.gif" />
                </center>
        </p:dialog>

        <p:dialog modal="true" id="guns2" widgetVar="enCours2" header="En cours" 
            style="position:fixed;" draggable="false" width="350px"
            height="120px" closable="false"> 
            <center>
            <p:outputPanel id="mark2">
        <h:outputLabel value="Changement du langue en cours..."> </h:outputLabel>
             </p:outputPanel>
    <p:graphicImage
                value="/resources/vendors/pageloader/images/loader100.gif" />
                </center>
        </p:dialog>

</body>

</html>

-- 已编辑 --

我正在使用 spring 安全实现的 https。

如果有人理解这个问题，请不要犹豫，谢谢。

Answer 1

您的验证码标签未设置任何 div 这就是为什么它不显示以供使用 primefaces 组件应设置在 div 或 panelgrid inside form 标签中。所以应该使用 div 标签并根据您的要求设置 div 位置。要么也使用主题，您没有使用主题并设置 secure="true"。它对我有用我希望它对你有用

<div height="50px" width="130px">
     <p:captcha label="Captcha" rendered="true" secure="true"  theme="white" > 
</div>

Answer 2

解决方案是在验证码标签中添加 secure="true"。

   <div height="50px" width="130px">
        <p:captcha label="Captcha" rendered="true" secure="true" theme="white"/>
    </div>

Primefaces：验证码不可见但显示验证消息

Primefaces : Captcha id not visible but displays validation message

captcha

recaptcha

primefaces