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 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.

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 en reCAPTCHA Enterprise project aktiverad med reCAPTCHA Enterprise API.

  2. Hämta projekt-ID.

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

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

    1. Gå till Tools > General > Configuration Browser. Se Konfigurationsläsaren mer information.

    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. I konfigurationsläsaren väljer du global mapp och markera Properties.
      2. Aktivera i dialogrutan Konfigurationsegenskaper Cloud Configurations.
      3. Välj Save & Close för att spara konfigurationen och stänga dialogrutan.
    3. Välj Create.

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

    5. Välj Create för att skapa en mapp som är aktiverad för molntjänstkonfigurationer.

  5. 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 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 platsnyckel som konfigurerats i Google Cloud-projektet, till exempel Platsnyckel för kryssruta eller Poängbaserad webbplatsnyckel.

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

reCAPTCHA Enterprise

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. Se Konfigurationsläsaren mer information.

    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. I konfigurationsläsaren väljer du global mapp och markera Properties.

      2. Aktivera i dialogrutan Konfigurationsegenskaper Cloud Configurations.

      3. Välj Save & Close för att spara konfigurationen och stänga dialogrutan.

    3. Välj Create.

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

    5. Välj Create för att skapa en mapp som är aktiverad för molntjänstkonfigurationer.

  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 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 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.

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 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.
    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. 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.

  7. Om den valda konfigurationen har version reCAPTCHA Enterprise:

    1. Du kan välja molnkonfigurationen reCAPTCHA med tangenttyp as 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 molnkonfigurationen reCAPTCHA med tangenttyp as 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 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 den valda konfigurationen har version reCAPTCHA v2:

    1. Välj storlek som Normal eller Compact för widgeten reCAPTCHA. Du kan också välja Invisible om du bara vill visa CAPTCHA-utmaningen om det finns misstänkt aktivitet. The skyddat av reCAPTCHA emblemet, som visas nedan, visas på de skyddade formulären.

      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
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
  • Om du väljer reCAPTCHA v2-konfiguration med storleken Invisible eller reCAPTCHA Enterprise score based keys, så alternativet show/hide är inte tillämpligt.

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.

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

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.

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