Använd reCAPTCHA i Adaptiv Forms using-reCAPTCHA-in-adaptive-forms

Adobe rekommenderar att man använder modern och utbyggbar datainhämtning Kärnkomponenterfor skapa ny Adaptive Formseller lägga till adaptiv Forms på AEM Sites-sidor. De här komponenterna utgör ett betydande framsteg när det gäller att skapa adaptiva Forms-filer, vilket ger imponerande användarupplevelser. I den här artikeln beskrivs det äldre sättet att skapa Adaptiv Forms med baskomponenter.

Version
Artikellänk
AEM 6.5
Klicka här
AEM as a Cloud Service
Den här artikeln
Gäller för
Adaptiv form baserad på grundläggande komponenter.
För adaptiva formulär baserade på kärnkomponenter, Klicka här.

CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) är ett program som ofta används vid onlinetransaktioner för att skilja mellan människor och automatiserade program eller organ. Det utgör en utmaning och utvärderar användarens svar för att avgöra om det är en människa eller en robot som interagerar med webbplatsen. Det förhindrar användaren att fortsätta om testet misslyckas och gör onlinetransaktionerna säkra genom att förhindra att skräppost eller skadliga syften publiceras.

AEM Forms har stöd för reCAPTCHA i Adaptive Forms. Du kan använda tjänsten reCAPTCHA från Google för att implementera CAPTCHA.

NOTE
  • AEM Forms support reCaptcha v2 och reCaptcha Enterprise. Andra versioner stöds inte.
  • reCAPTCHA i Adaptive Forms stöds inte i offlineläge i AEM Forms app.

Konfigurera tjänsten reCAPTCHA från Google google-reCAPTCHA

Formulärförfattare kan använda tjänsten reCAPTCHA från Google för att implementera reCAPTCHA i Adaptiv Forms. Den erbjuder avancerade CAPTCHA-funktioner för att skydda er webbplats. Mer information om hur reCAPTCHA fungerar finns i Google reCAPTCHA. reCAPTCHA-tjänsten innehåller reCAPTCHA v2 och reCAPTCHA Enterprise som ni kan integrera i AEM Forms. Beroende på dina behov kan du konfigurera tjänsten reCAPTCHA för att aktivera:

reCAPTCHA

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

  1. Skapa eller markera en Google Cloud-projekt och aktivera reCAPTCHA Enterprise API.

  2. Hämta Projekt-ID och skapa API-nyckel och webbplatsnyckel för webbplatser.

  3. Skapa konfigurationsbehållare för molntjänster.

    1. Gå till Tools > General > Configuration Browser.

    2. Välj en mapp eller skapa en mapp och aktivera mappen för molnkonfigurationer med följande steg:

      1. Markera mappen och välj Properties.
      2. Aktivera i dialogrutan Konfigurationsegenskaper Cloud Configurations.
      3. Välj Save & Close för att spara konfigurationen och stänga dialogrutan.
  4. Konfigurera molntjänsten för reCAPTCHA Enterprise.

    1. Gå till Experience Manager verktyg-1 > Cloud Services.
    2. Välj reCAPTCHA. Sidan Konfigurationer öppnas. Välj den konfigurationsbehållare som du skapade och välj Create.
    3. Välj version som reCAPTCHA Enterprise och ange namn, projekt-ID, platsnyckel och API-nyckel (hämtas i steg 2) för reCAPTCHA Enterprise-tjänsten.
    4. Välj nyckeltyp. Nyckeltypen ska vara densamma som platsnyckeln som du konfigurerade i Google Cloud-projekt, till exempel Platsnyckel för kryssruta eller Poängbaserad webbplatsnyckel.
    5. Ange en tröskelpoäng i intervallet 0 till 1. Poängvärden som är större än eller lika med tröskelvärdena identifierar mänsklig interaktion, vilket i annat fall omfattar båda interaktioner.
    6. Välj Create för att skapa molntjänstkonfigurationen.

När du har aktiverat tjänsten reCAPTCHA Enterprise kan den användas i anpassningsbara formulär. Se använda CAPTCHA i anpassningsbara formulär.

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

  1. Hämta API-nyckelpar för reCAPTCHA från Google. Den innehåller webbplatsnyckel och hemlig nyckel.

  2. Skapa konfigurationsbehållare för molntjänster.

    1. Gå till Tools > General > Configuration Browser.

    2. Välj en mapp eller skapa en mapp och aktivera mappen för molnkonfigurationer med följande steg:

      1. Markera mappen och välj Properties.
      2. Aktivera i dialogrutan Konfigurationsegenskaper Cloud Configurations.
      3. Välj Save & Close för att spara konfigurationen och stänga dialogrutan.
  3. Konfigurera molntjänsten för reCAPTCHA v2.

    1. Gå till AEM verktyg-1 > Cloud Service.
    2. Välj reCAPTCHA. Sidan Konfigurationer öppnas. Välj den konfigurationsbehållare som du skapade och välj Create.
    3. Välj version som reCAPTCHA v2 , anger namn, platsnyckel och hemlig nyckel för reCAPTCHA-tjänsten (hämtas i steg 1) och väljer Create för att skapa molntjänstkonfigurationen.
    4. I dialogrutan Redigera komponent anger du platsen och de hemliga nycklarna som fås i steg 1. Välj Save Settings och sedan OK för att slutföra konfigurationen.

    När reCAPTCHA-tjänsten har konfigurerats är den tillgänglig för användning i adaptiva formulär. Mer information finns i använda CAPTCHA i anpassningsbara formulär.

Använd reCAPTCHA i anpassningsbara formulär using-reCAPTCHA

Så här använder du reCAPTCHA i adaptiva former:

  1. Öppna ett anpassat formulär i redigeringsläge.

    note note
    NOTE
    Kontrollera att den konfigurationsbehållare som valts när du skapar det adaptiva formuläret innehåller molntjänsten reCAPTCHA. Du kan också redigera adaptiva formuläregenskaper för att ändra konfigurationsbehållaren som är kopplad till formuläret.
  2. Dra från komponentwebbläsaren och släpp Captcha på den adaptiva formen.

    note note
    NOTE
    • Det går inte att använda mer än en Captcha-komponent i ett adaptivt formulär. Du bör inte heller använda CAPTCHA i en panel som är markerad för lazy loading eller i ett fragment.
    • reCaptcha är tidskänsligt och upphör om cirka ett par minuter. Därför rekommenderar vi att du placerar Captcha-komponenten precis före Skicka-knappen i den anpassade formen.
  3. Välj den Captcha-komponent som du har lagt till och välj cmppr om du vill redigera dess egenskaper.

  4. Ange en titel för CAPTCHA-widgeten. Standardvärdet är Captcha. Välj Dölj titel om du inte vill att rubriken ska visas.

  5. Från Captcha-tjänst nedrullningsbar meny, välja reCAPTCHA för att aktivera tjänsten reCAPTCHA om du har konfigurerat den enligt beskrivningen i reCAPTCHA-tjänst från Google.

  6. Välj en konfiguration i listrutan Inställningar för reCAPTCHA Enterprise eller reCAPTCHA v2

    1. Om du väljer reCAPTCHA Enterprise version, nyckeltypen kan vara av kryssruta eller poängbaserad, baseras på ditt val när du konfigurerar webbplatsnyckel för webbplatser:
    note note
    NOTE
    • I molnkonfigurationen med tangenttyp as kryssruta visas det anpassade felmeddelandet som ett textbundet meddelande om captcha-valideringen misslyckas.
    • I molnkonfigurationen med tangenttyp as poängbaserad visas det anpassade felmeddelandet som ett popup-meddelande om captcha-valideringen misslyckas.
    1. Du kan välja storlek som Normal och Compact.
    2. Du kan välja en Bind Reference, in Bind Reference de data som skickas är bundna, annars är de obundna data. Nedan finns XML-exempel på obundna data och bundna data (med bind referens som SSN) när ett formulär skickas.
    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>
    

    Om du väljer reCAPTCHA v2 version:

    1. Du kan välja storleken som Normal eller Compact för widgeten reCAPTCHA.
    2. Du kan välja Invisible möjlighet att visa CAPTCHA-utmaningen endast i händelse av en misstänkt aktivitet.

    Tjänsten reCAPTCHA är aktiverad i det adaptiva formuläret. Du kan förhandsgranska formuläret och se hur CAPTCHA fungerar. The skyddat av reCAPTCHA emblemet, som visas nedan, visas på de skyddade formulären.
    Google skyddat av reCAPTCHA-märke

  7. Spara egenskaperna.

NOTE
Markera inte Default från listrutan Captcha-tjänst eftersom AEM CAPTCHA-tjänsten är inaktuell.

Visa eller dölj CAPTCHA-komponent baserat på regler show-hide-captcha

Du kan välja att visa eller dölja CAPTCHA-komponenten baserat på regler som du tillämpar på en komponent i ett adaptivt formulär. Markera komponenten, markera redigera regler och markera Create för att skapa en regel. Mer information om hur du skapar regler finns i Regelredigeraren.

CAPTCHA-komponenten måste till exempel bara visas i ett adaptivt formulär om fältet Valutavärde i formuläret har ett värde över 25000.

Välj Currency Value i formuläret och skapa följande regler:

Visa eller dölja regler

NOTE
När du väljer en reCAPTCHA v2-konfiguration och storleken är inställd på Invisibleär alternativet för att visa/dölja fortfarande inaktiverat.

Validera CAPTCHA validate-captcha

Du kan validera CAPTCHA i ett adaptivt formulär antingen när du skickar formuläret eller baserar CAPTCHA-valideringen på användaråtgärder och villkor.

Validera CAPTCHA när formulär skickas validation-form-submission

Så här validerar du en CAPTCHA automatiskt när du skickar in ett adaptivt formulär:

  1. Markera CAPTCHA-komponenten och markera cmppr för att visa komponentegenskaperna.
  2. I Validate CAPTCHA avsnitt, markera Validate CAPTCHA at form submission.
  3. Välj Klar för att spara komponentegenskaperna.

Validera CAPTCHA på användaråtgärder och villkor validate-captcha-user-action

Så här validerar du en CAPTCHA baserat på villkor och användaråtgärder:

  1. Markera CAPTCHA-komponenten och markera cmppr för att visa komponentegenskaperna.
  2. I Validate CAPTCHA avsnitt, markera Validate CAPTCHA on a user action.
  3. Välj Klar för att spara komponentegenskaperna.

Experience Manager Forms innehåller ValidateCAPTCHA API för att validera CAPTCHA med fördefinierade villkor. Du kan anropa API:t med en anpassad skickaåtgärd eller genom att definiera regler för komponenter i ett anpassat formulär.

Följande är ett exempel på en ValidateCAPTCHA API för att validera CAPTCHA med fördefinierade villkor:

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;
        }
    }

Exemplet anger att ValidateCAPTCHA API validerar bara CAPTCHA i formuläret om antalet siffror i den numeriska rutan som användaren anger när formuläret fylls i är större än 5.

Alternativ 1: Använd Experience Manager Forms ValidateCAPTCHA API to validate CAPTCHA using a custom Submit Action

Utför följande steg för att använda ValidateCAPTCHA API för att validera CAPTCHA med en anpassad överföringsåtgärd:

  1. Lägg till skriptet som innehåller ValidateCAPTCHA API till anpassad skickaåtgärd. Mer information om anpassade överföringsåtgärder finns i Skapa en anpassad inskickningsåtgärd för Adaptiv Forms.
  2. Välj namnet på den anpassade Skicka-åtgärden på menyn Submit Action nedrullningsbar lista i Submission egenskaper för ett adaptivt formulär.
  3. Välj Submit. CAPTCHA valideras baserat på de villkor som definieras i ValidateCAPTCHA API för den anpassade åtgärden Skicka.

Alternativ 2: Använd Experience Manager Forms Validera CAPTCHA API för att validera CAPTCHA på en användaråtgärd innan formuläret skickas

Du kan också anropa ValidateCAPTCHA API genom att tillämpa regler på en komponent i ett adaptivt formulär.

Du kan till exempel lägga till en Validate CAPTCHA i ett adaptivt formulär och skapa en regel som anropar en tjänst genom att klicka på en knapp.

Följande bild visar hur du kan anropa en tjänst genom att klicka på en Validate CAPTCHA knapp:

Validera CAPTCHA

Du kan anropa den anpassade servern som innehåller ValidateCAPTCHA API med regelredigeraren och aktivera eller inaktivera skicka-knappen för det adaptiva formuläret baserat på valideringsresultatet.

På samma sätt kan du använda regelredigeraren för att inkludera en anpassad metod för att validera CAPTCHA i ett adaptivt formulär.

Redigera reCAPTCHA-tjänstdomän reCAPTCHA-service-domain

reCAPTCHA-tjänsten använder https://www.recaptcha.net/ som standarddomän. Du kan ändra inställningarna för att ange https://www.google.com/ eller ett anpassat domännamn för inläsning, återgivning och validering av reCAPTCHA-tjänsten.

Ange af.cloudservices.recaptcha.domain egenskapen för Adaptive Form and Interactive Communication Web Channel Configuration konfiguration som ska anges https://www.google.com/ eller något annat anpassat domännamn. I följande JSON-fil visas ett exempel:

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

Så här anger du värden för en konfiguration: Generera OSGi-konfigurationer med AEM SDKoch distribuera konfigurationen till din Cloud Service.

Se även see-also

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