Använda CAPTCHA i anpassningsbara formulär using-captcha-in-adaptive-forms

Version
Artikellänk
AEM as a Cloud Service
Klicka här
AEM 6.5
Den här artikeln

Adobe rekommenderar att du använder den moderna och utbyggbara datainhämtningen Core Componentsför att skapa nya adaptiva Formseller att lägga till adaptiva 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.

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 CAPTCHA i anpassningsbara formulär. Du kan använda tjänsten reCAPTCHA från Google för att implementera CAPTCHA.

NOTE
  • AEM Forms support reCAPTCHA v2 and enterprise. Andra versioner stöds inte.
  • CAPTCHA i adaptiva formulär stöds inte i offlineläge i AEM Forms.

Konfigurera tjänsten reCAPTCHA från Google för Adaptive Forms google-reCAPTCHA

AEM Forms-användare kan använda tjänsten reCAPTCHA från Google för att implementera CAPTCHA i adaptiva formulär. Den har avancerade CAPTCHA-funktioner för att skydda er webbplats. Mer information om hur reCAPTCHA fungerar finns i Google reCAPTCHA. reCAPTCHA, inklusive reCAPTCHA v2 och reCAPTCHA Enterprise, är integrerat 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 ett reCAPTCHA Enterprise-projekt aktiverat med reCAPTCHA Enterprise API.

  2. Hämta projekt-ID:t.

  3. Skapa en API-nyckel och en webbplatsnyckel för webbplatser.

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

    1. Gå till Tools > General > Configuration Browser. Mer information finns i dokumentationen för Configuration Browser.

    2. Gör följande för att aktivera den globala mappen för molnkonfigurationer eller hoppa över det här steget för att skapa och konfigurera en annan mapp för molntjänstkonfigurationer.

      1. Markera mappen global i Configuration Browser och välj Properties.
      2. Aktivera Cloud Configurations i dialogrutan Konfiguration.
      3. Välj Save & Close om du vill spara konfigurationen och stänga dialogrutan.
    3. Välj Create i konfigurationsläsaren.

    4. I dialogrutan Skapa konfiguration anger du en rubrik för mappen och aktiverar Cloud Configurations.

    5. Välj Create om du vill skapa den mapp som är aktiverad för molntjänstkonfigurationer.

  5. Konfigurera molntjänsten för reCAPTCHA Enterprise.

    1. Gå till tools-1 > Cloud Services på författarinstansen av Experience Manager.

    2. Välj reCAPTCHA. Sidan Konfigurationer öppnas. Välj den konfigurationsbehållare som skapades i föregående steg och välj Create.

    3. Välj version som reCAPTCHA Enterprise och ange Namn; Projekt-ID, Webbplatsnyckel och API-nyckel (hämtas i steg 2 och 3) för reCAPTCHA Enterprise-tjänsten.

    4. Välj nyckeltyp. Nyckeltypen ska vara densamma som den webbplatsnyckel som konfigurerats i Google Cloud-projektet, till exempel Checkbox-webbplatsnyckel eller Score-baserad webbplatsnyckel.

    5. Ange ett tröskelvärde i intervallet 0-1 (Klicka för mer information om poängen). 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.

      Obs!

      • Formulärförfattare kan ange ett poängvärde i det intervall som passar för att skicka formulär utan avbrott.
    6. Välj Create om du vill skapa molntjänstkonfigurationen.

    7. I dialogrutan Redigera komponent anger du namn, projekt-ID, platsnyckel, API-nyckel (som du får i steg 2 och 3), väljer nyckeltyp och anger tröskelvärdet. Välj Save Settings och välj sedan OK för att slutföra konfigurationen.

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

reCAPTCHA Enterprise

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

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

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

    1. Gå till Tools > General > Configuration Browser. Mer information finns i dokumentationen för Configuration Browser.

    2. Gör följande för att aktivera den globala mappen för molnkonfigurationer eller hoppa över det här steget för att skapa och konfigurera en annan mapp för molntjänstkonfigurationer.

      1. Markera mappen global i Configuration Browser och välj Properties.

      2. Aktivera Cloud Configurations i dialogrutan Konfiguration.

      3. Välj Save & Close om du vill spara konfigurationen och stänga dialogrutan.

    3. Välj Create i konfigurationsläsaren.

    4. I dialogrutan Skapa konfiguration anger du en rubrik för mappen och aktiverar Cloud Configurations.

    5. Välj Create om du vill skapa den mapp som är aktiverad för molntjänstkonfigurationer.

  3. Konfigurera molntjänsten för reCAPTCHA v2.

    1. Gå till tools-1 > Cloud Service på AEM författarinstans.
    2. Välj reCAPTCHA. Sidan Konfigurationer öppnas. Välj den konfigurationsbehållare som skapades i föregående steg och välj Create.
    3. Välj version som reCAPTCHA v2, ange Namn; Platsnyckel och Hemlig nyckel för reCAPTCHA-tjänsten (hämtas i steg 1) och välj 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 välj 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 adaptiva formulär.

reCAPTCHA v2

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 Captcha -komponenten från komponentwebbläsaren till det adaptiva formuläret.

    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.
    note note
    NOTE
    Captcha är tidskänsligt och upphör om ungefär en minut. Därför rekommenderar vi att du placerar Captcha-komponenten precis före Skicka-knappen i den anpassade formen.
  3. Markera den Captcha-komponent som du har lagt till och välj cmpr för att 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 titeln ska visas.

  5. I listrutan Captcha-tjänst väljer du reCAPTCHA för att aktivera reCAPTCHA-tjänsten om du har konfigurerat den enligt beskrivningen i reCAPTCHA-tjänsten av Google.

  6. Välj en konfiguration i listrutan Inställningar.

  7. Om den valda konfigurationen har version reCAPTCHA Enterprise:

    1. Du kan välja reCAPTCHA-molnkonfiguration med nyckeltyp som kryssruta. I kryssrutenyckeltyp visas det anpassade felmeddelandet som ett textbundet meddelande om captcha-valideringen misslyckas. Du kan välja storlek som Normal och Compact.

    2. Du kan välja reCAPTCHA-molnkonfiguration med nyckeltyp som poängbaserad. I poängbaserad nyckeltyp visas det anpassade felmeddelandet som ett popup-meddelande om captcha-valideringen misslyckas.

    3. När du väljer en Bind Reference är skickade data 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 den valda konfigurationen har version reCAPTCHA v2:

    1. Välj storleken som Normal eller Compact för reCAPTCHA-widgeten. Du kan också välja alternativet Invisible om du bara vill visa CAPTCHA-utmaningen om det finns en misstänkt aktivitet. Märket protected by reCAPTCHA, som visas nedan, visas i skyddade formulär.

      Google skyddat av reCAPTCHA-märke

    Tjänsten reCAPTCHA är aktiverad i det adaptiva formuläret. Du kan förhandsgranska formuläret och se hur CAPTCHA fungerar.

  8. Spara egenskaperna.

NOTE
Välj inte Default i listrutan för Captcha-tjänster eftersom AEM CAPTCHA-tjänsten är föråldrad.

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, välj redigera regler och välj 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.

Markera fältet Currency Value i formuläret och skapa följande regler:

Visa eller dölj regler

NOTE
  • Om du väljer reCAPTCHA v2-konfiguration med storleken Invisible eller reCAPTCHA Enterprise-poängbaserade nycklar kan du inte använda alternativet för att visa/dölja.

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 välj cmpr för att visa komponentegenskaperna.
  2. Välj Validate CAPTCHA at form submission i avsnittet Validate CAPTCHA.
  3. Välj Klar om du vill 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 välj cmpr för att visa komponentegenskaperna.

  2. Välj Validate CAPTCHA on a user action i avsnittet Validate CAPTCHA.

  3. Välj Klar om du vill spara komponentegenskaperna.

    note note
    NOTE
    Om du väljer reCAPTCHA v2-konfiguration med storleken Invisible eller reCAPTCHA Enterprise-poängbaserade nycklar, gäller inte giltig Captcha för en användaråtgärd.

Experience Manager Forms tillhandahå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å ett 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 visar att API:t ValidateCAPTCHA bara validerar 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 för att validera CAPTCHA med en anpassad överföringsåtgärd

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

  1. Lägg till skriptet som innehåller ValidateCAPTCHA-API:t till en anpassad skickaåtgärd. Mer information om anpassade Skicka-åtgärder finns i Skapa en anpassad Skicka-åtgärd för anpassad Forms.
  2. Välj namnet på den anpassade skickaåtgärden i listrutan Submit Action i egenskaperna Submission för ett anpassat formulär.
  3. Välj Submit. CAPTCHA valideras baserat på villkoren som definieras i ValidateCAPTCHA API för den anpassade åtgärden Skicka.

Alternativ 2: Använd Experience Manager Forms ValidateCAPTCHA 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-knapp 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 anpassade 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.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2