Utilizzare reCAPTCHA in Adaptive Forms using-reCAPTCHA-in-adaptive-forms

L’Adobe consiglia di utilizzare l’acquisizione dati moderna ed estensibile Componenti coreper creazione di un nuovo Forms adattivoo aggiunta di Forms adattivo alle pagine AEM Sites. Questi componenti rappresentano un progresso significativo nella creazione di Forms adattivi, garantendo esperienze utente straordinarie. Questo articolo descrive un approccio precedente all’authoring di Forms adattivi utilizzando i componenti di base.

Versione
Collegamento articolo
AEM 6.5
Fai clic qui
AEM as a Cloud Service
Questo articolo
Applicabile a
Modulo adattivo basato su componenti di base.
Per i moduli adattivi basati su componenti core, Fai clic qui.

Il CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) è un programma comunemente utilizzato nelle transazioni online per distinguere tra esseri umani e programmi o bot automatizzati. Rappresenta una sfida e valuta la risposta dell’utente per determinare se si tratta di un essere umano o di un bot che interagisce con il sito. Impedisce all’utente di procedere se il test non riesce e contribuisce a rendere sicure le transazioni online impedendo ai bot di pubblicare spam o avere scopi dannosi.

AEM Forms supporta reCAPTCHA in Adaptive Forms. Puoi utilizzare il servizio reCAPTCHA di Google per implementare CAPTCHA.

NOTE
  • AEM Forms supporta reCaptcha v2 e reCaptcha Enterprise. Qualsiasi altra versione non è supportata.
  • reCAPTCHA in Adaptive Forms non è supportato in modalità offline su AEM Forms app.

Configurare il servizio reCAPTCHA con Google google-reCAPTCHA

Gli autori di moduli possono utilizzare il servizio reCAPTCHA di Google per implementare reCAPTCHA in Adaptive Forms. Offre funzionalità CAPTCHA avanzate per proteggere il sito. Per ulteriori informazioni sul funzionamento di reCAPTCHA, consulta Google reCAPTCHA. Il servizio reCAPTCHA include reCAPTCHA v2 e reCAPTCHA Enterprise che puoi integrare in AEM Forms. In base alle tue esigenze puoi configurare il servizio reCAPTCHA per abilitare:

reCAPTCHA

Configurare reCAPTCHA Enterprise steps-to-implement-reCAPTCHA-enterprise-in-forms

  1. Crea o seleziona un elemento Progetto Google Cloud e abilita API di reCAPTCHA Enterprise.

  2. Ottenere il ID Progetto e creare un Chiave API e un chiave del sito per i siti web.

  3. Crea un contenitore di configurazione per i servizi cloud.

    1. Vai a Strumenti > Generale > Browser configurazioni.

    2. Seleziona una cartella o creane una e abilitala per le configurazioni cloud, come descritto di seguito:

      1. Nel browser configurazioni, seleziona la cartella e fai clic su Proprietà.
      2. Nella finestra di dialogo Proprietà di configurazione, abilita Configurazioni cloud.
      3. Seleziona Salva e chiudi per salvare la configurazione e uscire dalla finestra di dialogo.
  4. Configurare il servizio cloud per reCAPTCHA Enterprise.

    1. Nell’istanza Autore dell’Experience Manager, vai a tools-1 > Cloud Service.
    2. Seleziona reCAPTCHA. Viene visualizzata la pagina Configurazioni. Seleziona il contenitore di configurazione creato e fai clic su Crea.
    3. Seleziona versione come reCAPTCHA Enterprise e specifica Nome, ID progetto, Chiave sito e Chiave API (ottenuta nel passaggio 2) per il servizio reCAPTCHA Enterprise.
    4. Seleziona il tipo di chiave; il tipo di chiave deve essere uguale alla chiave del sito configurata in Progetto Google Cloudad esempio: Casella di selezione chiave sito o Chiave del sito basata su punteggio.
    5. Specifica un punteggio di soglia nell’intervallo da 0 a 1. I punteggi superiori o uguali ai punteggi di soglia identificano l’interazione umana, altrimenti considerata interazione da bot.
    6. Seleziona Crea per creare la configurazione del servizio cloud.

Una volta abilitato, il servizio reCAPTCHA Enterprise è disponibile per l’utilizzo in moduli adattivi. Consulta utilizzo del CAPTCHA nei moduli adattivi.

Configurare Google reCAPTCHA v2 steps-to-implement-reCAPTCHA-v2-in-forms

  1. Ottenere coppia di chiavi API reCAPTCHA da Google. Include un chiave del sito e un chiave segreta.

  2. Crea un contenitore di configurazione per i servizi cloud.

    1. Vai a Strumenti > Generale > Browser configurazioni.

    2. Seleziona una cartella o creane una e abilitala per le configurazioni cloud, come descritto di seguito:

      1. Nel browser configurazioni, seleziona la cartella e fai clic su Proprietà.
      2. Nella finestra di dialogo Proprietà di configurazione, abilita Configurazioni cloud.
      3. Seleziona Salva e chiudi per salvare la configurazione e uscire dalla finestra di dialogo.
  3. Configura il servizio cloud per reCAPTCHA v2.

    1. Nell’istanza di authoring dell’AEM, vai a tools-1 > Cloud Service.
    2. Seleziona reCAPTCHA. Viene visualizzata la pagina Configurazioni. Seleziona il contenitore di configurazione creato e fai clic su Crea.
    3. Seleziona versione come reCAPTCHA v2 , specifica Nome, Chiave sito e Chiave segreta per il servizio reCAPTCHA (ottenuti nel passaggio 1) e seleziona Crea per creare la configurazione del servizio cloud.
    4. Nella finestra di dialogo Modifica componente, specifica il sito e le chiavi segrete ottenuti nel passaggio 1. Seleziona Salva impostazioni e quindi seleziona OK per completare la configurazione.

    Una volta configurato, il servizio reCAPTCHA è disponibile per l’utilizzo nei moduli adattivi. Per ulteriori informazioni, consulta utilizzo del CAPTCHA nei moduli adattivi.

Utilizzare reCAPTCHA nei moduli adattivi using-reCAPTCHA

Per utilizzare reCAPTCHA nei moduli adattivi:

  1. Apri un modulo adattivo in modalità di modifica.

    note note
    NOTE
    Assicurati che il contenitore di configurazione selezionato durante la creazione del modulo adattivo contenga il servizio cloud reCAPTCHA. Puoi anche modificare le proprietà dei moduli adattivi per cambiare il contenitore di configurazione associato al modulo.
  2. Dal browser Componenti, trascina Captcha nel modulo adattivo.

    note note
    NOTE
    • L’utilizzo di più componenti Captcha in un modulo adattivo non è supportato. Inoltre, si sconsiglia di utilizzare il CAPTCHA in un pannello contrassegnato per il caricamento lento o in un frammento.
    • reCaptcha è sensibile al tempo e scade tra circa un paio di minuti. Pertanto, si consiglia di inserire il componente Captcha subito prima del pulsante Invia nel modulo adattivo.
  3. Seleziona il componente Captcha aggiunto e fai clic su cmppr per modificarne le proprietà.

  4. Specificate un titolo per il widget CAPTCHA. Il valore predefinito è Captcha. Seleziona Nascondi titolo se non desideri che il titolo venga visualizzato.

  5. Dalla sezione Servizio Captcha a discesa, seleziona reCAPTCHA per abilitare il servizio reCAPTCHA se è stato configurato come descritto in Servizio reCAPTCHA di Google.

  6. Seleziona una configurazione dal menu a discesa Impostazioni per reCAPTCHA Enterprise o reCAPTCHA v2

    1. Se si seleziona reCAPTCHA Enterprise versione, il tipo di chiave può essere di casella di controllo o basato su punteggio, si basa sulla selezione effettuata al momento della configurazione chiave del sito per i siti web:
    note note
    NOTE
    • Nella configurazione cloud con tipo di chiave as casella di controllo, se la convalida captcha non riesce, il messaggio di errore personalizzato viene visualizzato come messaggio in linea.
    • Nella configurazione cloud con tipo di chiave as basato su punteggio, il messaggio di errore personalizzato viene visualizzato come messaggio a comparsa se la convalida captcha non riesce.
    1. È possibile selezionare le dimensioni come Normale e Compatto.
    2. È possibile selezionare una Riferimento binding, In Riferimento binding i dati inviati sono dati associati, altrimenti si tratta di dati non associati. Di seguito sono riportati alcuni esempi XML di dati non associati e dati associati (con riferimento di associazione come SSN) rispettivamente, quando un modulo viene inviato.
    code language-xml
            <?xml version="1.0" encoding="UTF-8" standalone="no"?>
            <afData>
            <afUnboundData>
                <data>
                    <captcha16820607953761>
                        <captchaType>reCaptchaEnterprise</captchaType>
                        <captchaScore>0.9</captchaScore>
                    </captcha16820607953761>
                </data>
            </afUnboundData>
            <afBoundData>
                <Root
                    xmlns:xfa="http://www.xfa.org/schema/xfa-data/1.0/"
                    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
                    <PersonalDetails>
                        <SSN>371237912</SSN>
                        <FirstName>Sarah </FirstName>
                        <LastName>Smith</LastName>
                    </PersonalDetails>
                    <OtherInfo>
                        <City>California</City>
                        <Address>54 Residency</Address>
                        <State>USA</State>
                        <Zip>123112</Zip>
                    </OtherInfo>
                </Root>
            </afBoundData>
            <afSubmissionInfo>
                <stateOverrides/>
                <signers/>
                <afPath>/content/dam/formsanddocuments/captcha-form</afPath>
                <afSubmissionTime>20230608034928</afSubmissionTime>
            </afSubmissionInfo>
            </afData>
    
    code language-xml
            <?xml version="1.0" encoding="UTF-8" standalone="no"?>
            <afData>
            <afUnboundData>
                <data/>
            </afUnboundData>
            <afBoundData>
                <Root
                    xmlns:xfa="http://www.xfa.org/schema/xfa-data/1.0/"
                    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
                    <PersonalDetails>
                        <SSN>
                            <captchaType>reCaptchaEnterprise</captchaType>
                            <captchaScore>0.9</captchaScore>
                        </SSN>
                        <FirstName>Sarah</FirstName>
                        <LastName>Smith</LastName>
                    </PersonalDetails>
                    <OtherInfo>
                        <City>California</City>
                        <Address>54 Residency</Address>
                        <State>USA</State>
                        <Zip>123112</Zip>
                    </OtherInfo>
                </Root>
            </afBoundData>
            <afSubmissionInfo>
                <stateOverrides/>
                <signers/>
                <afPath>/content/dam/formsanddocuments/captcha-form</afPath>
                <afSubmissionTime>20230608035111</afSubmissionTime>
            </afSubmissionInfo>
            </afData>
    

    Se si seleziona reCAPTCHA v2 versione:

    1. Puoi selezionare la dimensione come Normale o Compatto per il widget reCAPTCHA.
    2. È possibile selezionare Invisibile per mostrare la richiesta CAPTCHA solo nel caso di attività sospetta.

    Il servizio reCAPTCHA è abilitato nel modulo adattivo. Puoi visualizzare l’anteprima del modulo e vedere il CAPTCHA che funziona. Il protetto da reCAPTCHA nei moduli protetti viene visualizzato il contrassegno riportato di seguito.
    Google protetto da badge reCAPTCHA

  7. Salva le proprietà.

NOTE
Non selezionare Predefinito dall’elenco a discesa del servizio Captcha poiché il servizio AEM CAPTCHA predefinito è obsoleto.

Mostrare o nascondere il componente CAPTCHA in base alle regole show-hide-captcha

Puoi scegliere di mostrare o nascondere il componente CAPTCHA in base alle regole applicate a un componente in un modulo adattivo. Seleziona il componente e fai clic su modifica regole , e seleziona Crea per creare una regola. Per ulteriori informazioni sulla creazione delle regole, consulta Editor regole.

Ad esempio, il componente CAPTCHA deve essere visualizzato in un modulo adattivo solo se il campo Valore valuta nel modulo ha un valore superiore a 25000.

Seleziona la Valore valuta nel modulo e creare le regole seguenti:

Mostra o nascondi regole

NOTE
Quando selezioni una configurazione reCAPTCHA v2 e la dimensione è impostata su Invisibile, l'opzione mostra/nascondi rimane disattivata.

Convalida CAPTCHA validate-captcha

È possibile convalidare il CAPTCHA in un modulo adattivo quando si invia il modulo oppure basare la convalida CAPTCHA sulle azioni e condizioni dell’utente.

Convalida CAPTCHA all’invio del modulo validation-form-submission

Per convalidare automaticamente un CAPTCHA quando si invia un modulo adattivo:

  1. Seleziona il componente CAPTCHA e fai clic su cmppr per visualizzare le proprietà del componente.
  2. In Convalida CAPTCHA sezione, seleziona Convalida CAPTCHA all’invio del modulo.
  3. Seleziona Fine per salvare le proprietà del componente.

Convalida CAPTCHA per azioni e condizioni dell’utente validate-captcha-user-action

Per convalidare un CAPTCHA in base a condizioni e azioni dell’utente:

  1. Seleziona il componente CAPTCHA e fai clic su cmppr per visualizzare le proprietà del componente.
  2. In Convalida CAPTCHA sezione, seleziona Convalida CAPTCHA per azione dell’utente.
  3. Seleziona Fine per salvare le proprietà del componente.

Experience Manager Forms fornisce ValidateCAPTCHA API per convalidare CAPTCHA utilizzando condizioni predefinite. Puoi richiamare l’API utilizzando un’azione di invio personalizzata o definendo regole sui componenti in un modulo adattivo.

Di seguito è riportato un esempio di ValidateCAPTCHA API per convalidare CAPTCHA utilizzando condizioni predefinite:

if (slingRequest.getParameter("numericbox1614079614831").length() >= 5) {
     GuideCaptchaValidatorProvider apiProvider = sling.getService(GuideCaptchaValidatorProvider.class);
        String formPath = slingRequest.getResource().getPath();
        String captchaData = slingRequest.getParameter(GuideConstants.GUIDE_CAPTCHA_DATA);
        if (!apiProvider.validateCAPTCHA(formPath, captchaData).isCaptchaValid()){
            response.setStatus(400);
            return;
        }
    }

L'esempio indica che ValidateCAPTCHA L’API convalida il CAPTCHA nel modulo solo se il numero di cifre nella casella numerica specificata dall’utente durante la compilazione del modulo è maggiore di 5.

Opzione 1: utilizzo Experience Manager Forms API ValidateCAPTCHA per convalidare CAPTCHA tramite un’azione di invio personalizzata

Per utilizzare il ValidateCAPTCHA API per convalidare CAPTCHA tramite un’azione di invio personalizzata:

  1. Aggiungi lo script che include ValidateCAPTCHA API per personalizzare l’azione di invio. Per ulteriori informazioni sulle azioni di invio personalizzate, consulta Creare un’azione di invio personalizzata per Adaptive Forms.
  2. Selezionare il nome dell'azione di invio personalizzata dalla Azione di invio elenco a discesa in Invio proprietà di un modulo adattivo.
  3. Seleziona Invia. Il CAPTCHA viene convalidato in base alle condizioni definite in ValidateCAPTCHA API dell’azione di invio personalizzata.

Opzione 2: utilizzo Experience Manager Forms API ValidateCAPTCHA per convalidare CAPTCHA su un’azione dell’utente prima di inviare il modulo

Puoi anche richiamare ValidateCAPTCHA tramite l’applicazione di regole su un componente in un modulo adattivo.

Ad esempio, puoi aggiungere un’ Convalida CAPTCHA in un modulo adattivo e crea una regola per richiamare un servizio facendo clic su un pulsante.

Nella figura seguente viene illustrato come richiamare un servizio facendo clic su un Convalida CAPTCHA pulsante:

Convalida CAPTCHA

Puoi richiamare il servlet personalizzato che include ValidateCAPTCHA tramite l’editor di regole e abilita o disabilita il pulsante di invio del modulo adattivo in base al risultato della convalida.

Allo stesso modo, puoi utilizzare l’editor di regole per includere un metodo personalizzato per convalidare il CAPTCHA in un modulo adattivo.

Modifica dominio del servizio reCAPTCHA reCAPTCHA-service-domain

Il servizio reCAPTCHA utilizza https://www.recaptcha.net/ come dominio predefinito. È possibile modificare le impostazioni da impostare https://www.google.com/ o qualsiasi nome di dominio personalizzato per il caricamento, il rendering e la convalida del servizio reCAPTCHA.

Imposta il af.cloudservices.recaptcha.domain proprietà del Configurazione di un modulo adattivo e di un canale web di comunicazione interattiva configurazione da specificare https://www.google.com/ o qualsiasi altro nome di dominio personalizzato. Il seguente file JSON mostra un esempio:

{
  "af.cloudservices.recaptcha.domain": "https://www.google.com/"
}

Per impostare i valori di una configurazione: Generare configurazioni OSGi utilizzando l’SDK per AEM, e distribuire la configurazione all’istanza di Cloud Service.

Consulta anche see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab