Włączanie funkcji CAPTCHA w usłudze Azure Active Directory B2C

• Utwórz przepływ użytkownika, aby użytkownicy mogli zarejestrować się i zalogować do aplikacji.
• Rejestrowanie aplikacji internetowej.

• Wykonaj kroki opisane w Jak rozpocząć z zasadami niestandardowymi w usłudze Active Directory B2C. W tym samouczku przedstawiono sposób aktualizowania niestandardowych plików zasad, aby korzystać z konfiguracji kont usługi Azure AD B2C.
• Rejestrowanie aplikacji internetowej.

1. Zaloguj się do witryny Azure Portal.

2. Jeśli masz dostęp do wielu dzierżaw, wybierz ikonę Ustawienia w górnym menu, aby przełączyć się na dzierżawę Azure AD B2C z menu Katalogi + subskrypcje.

3. W menu po lewej stronie wybierz pozycję Azure AD B2C. Możesz też wybrać pozycję Wszystkie usługi i wyszukać i wybrać pozycję Azure AD B2C.

4. Wybierz pozycję Przepływy użytkownika.

5. Wybierz przepływ użytkownika, dla którego chcesz włączyć capTCHA. Na przykład B2C_1_signinsignup.

6. Wybierz Właściwości.

7. W obszarze CAPTCHA (wersja zapoznawcza) wybierz przepływ, dla którego ma być włączona funkcja CAPTCHA, na przykład Włącz capTCHA — rejestracja.

8. Wybierz Zapisz.

Testowanie przepływu użytkownika

Wykonaj kroki opisane w artykule Testowanie przepływu użytkownika, aby przetestować i potwierdzić, że dla wybranego przepływu włączono funkcję CAPTCHA. Powinien zostać wyświetlony monit o wprowadzenie wyświetlanych lub usłyszanych znaków w zależności od typu CAPTCHA, wizualizacji lub dźwięku.

Aby włączyć funkcję CAPTCHA w zasadach niestandardowych, należy zaktualizować istniejące pliki zasad niestandardowych. Jeśli nie masz żadnych istniejących plików zasad niestandardowych, pobierz plik .zip lub sklonuj repozytorium z witryny https://github.com/Azure-Samples/active-directory-b2c-custom-policy-starterpack. W tym artykule zaktualizujemy pliki XML w folderze /Display Controls Starterpack/LocalAccounts/ .

Deklarowanie oświadczeń

Potrzebujesz więcej oświadczeń, aby włączyć funkcję CAPTCHA w zasadach niestandardowych:

1. W programie VS Code otwórz plik TrustFrameworkBase.XML .

2. W sekcji ClaimsSchema zadeklaruj roszczenia przy użyciu następującego kodu:

    <!--<ClaimsSchema>-->
     ...
     <ClaimType Id="inputSolution">
       <DataType>string</DataType>
     </ClaimType>
   
     <ClaimType Id="solved">
       <DataType>boolean</DataType>
     </ClaimType>
   
     <ClaimType Id="reason">
       <DataType>string</DataType>
     </ClaimType>
   
     <ClaimType Id="azureregion">
       <DataType>string</DataType>
     </ClaimType>
   
     <ClaimType Id="challengeId">
       <DisplayName>The ID of the generated captcha</DisplayName>
       <DataType>string</DataType>
       <UserHelpText>Captcha challenge identifier</UserHelpText>
       <UserInputType>Paragraph</UserInputType>
     </ClaimType>
   
     <ClaimType Id="challengeType">
       <DisplayName>Type of captcha (visual / audio)</DisplayName>
       <DataType>string</DataType>
       <UserHelpText>Captcha challenge type</UserHelpText>
       <UserInputType>Paragraph</UserInputType>
     </ClaimType>
   
     <ClaimType Id="challengeString">
       <DisplayName>Captcha challenge code</DisplayName>
       <DataType>string</DataType>
       <UserHelpText>Captcha challenge code</UserHelpText>
       <UserInputType>Paragraph</UserInputType>
     </ClaimType>
   
     <ClaimType Id="captchaEntered">
       <DisplayName>Captcha entered by the user</DisplayName>
       <DataType>string</DataType>
       <UserHelpText>Enter the characters you see</UserHelpText>
       <UserInputType>TextBox</UserInputType>
     </ClaimType>
   
     <ClaimType Id="isCaptchaSolved">
       <DisplayName>Flag indicating that the captcha was successfully solved</DisplayName>
       <DataType>boolean</DataType>
     </ClaimType>
   
     <ClaimType Id="mfaCaptchaEnabled">
       <DisplayName>flag used to control captcha enabled in MFA</DisplayName>
       <DataType>string</DataType>
     </ClaimType>
   
     <ClaimType Id="signupCaptchaEnabled">
       <DisplayName>flag used to control captcha enabled during signup</DisplayName>
       <DataType>string</DataType>
     </ClaimType>
   
     <ClaimType Id="signinCaptchaEnabled">
       <DisplayName>flag used to control captcha enabled during signin</DisplayName>
       <DataType>string</DataType>
     </ClaimType>
     ...
    <!--<ClaimsSchema>-->
   

Konfigurowanie kontrolki wyświetlania

Aby włączyć funkcję CAPTCHA dla zasad niestandardowych, należy użyć kontrolki wyświetlania CAPTCHA. Kontrolka wyświetlania CAPTCHA generuje i renderuje obraz CAPTCHA.

W pliku TrustFrameworkBase.XML znajdź DisplayControls element, a następnie dodaj następującą kontrolkę wyświetlania jako element podrzędny. Jeśli jeszcze nie masz DisplayControls elementu, dodaj go.

<!--<DisplayControls>-->
...    
<DisplayControl Id="captchaControlChallengeCode" UserInterfaceControlType="CaptchaControl" DisplayName="Help us beat the bots">    
    <InputClaims>
        <InputClaim ClaimTypeReferenceId="challengeType" />
        <InputClaim ClaimTypeReferenceId="challengeId" />
    </InputClaims>

    <DisplayClaims>
        <DisplayClaim ClaimTypeReferenceId="challengeType" ControlClaimType="ChallengeType" />
        <DisplayClaim ClaimTypeReferenceId="challengeId" ControlClaimType="ChallengeId" />
        <DisplayClaim ClaimTypeReferenceId="challengeString" ControlClaimType="ChallengeString" />
        <DisplayClaim ClaimTypeReferenceId="captchaEntered" ControlClaimType="CaptchaEntered" />
    </DisplayClaims>

    <Actions>
    <Action Id="GetChallenge">
        <ValidationClaimsExchange>
        <ValidationClaimsExchangeTechnicalProfile
            TechnicalProfileReferenceId="HIP-GetChallenge" />
        </ValidationClaimsExchange>
    </Action>

    <Action Id="VerifyChallenge">
        <ValidationClaimsExchange>
        <ValidationClaimsExchangeTechnicalProfile
            TechnicalProfileReferenceId="HIP-VerifyChallenge" />
        </ValidationClaimsExchange>
    </Action>
    </Actions>
</DisplayControl> 
...
<!--</DisplayControls>-->

Konfigurowanie profilu technicznego CAPTCHA

Techniczny profil CAPTCHA usługi Azure AD B2C weryfikuje zadanie CAPTCHA. Ten profil techniczny może wygenerować kod CAPTCHA lub zweryfikować go w zależności od sposobu jego konfigurowania.

W pliku TrustFrameworkBase.XML znajdź ClaimsProviders element i dodaj dostawcę oświadczeń przy użyciu następującego kodu:

<!--<ClaimsProvider>-->
...
<ClaimsProvider>

    <DisplayName>HIPChallenge</DisplayName>

    <TechnicalProfiles>

    <TechnicalProfile Id="HIP-GetChallenge">
        <DisplayName>GetChallenge</DisplayName>
        <Protocol Name="Proprietary" Handler="Web.TPEngine.Providers.CaptchaProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
        <Metadata>
            <Item Key="Operation">GetChallenge</Item>
            <Item Key="Brand">HIP</Item>
        </Metadata>
        <InputClaims>
            <InputClaim ClaimTypeReferenceId="challengeType" />
        </InputClaims>
        <DisplayClaims>
            <DisplayClaim ClaimTypeReferenceId="challengeString" />
        </DisplayClaims>
        <OutputClaims>
            <OutputClaim ClaimTypeReferenceId="challengeId" />
            <OutputClaim ClaimTypeReferenceId="challengeString" PartnerClaimType="ChallengeString" />
            <OutputClaim ClaimTypeReferenceId="azureregion" />
        </OutputClaims>
    </TechnicalProfile>
    <TechnicalProfile Id="HIP-VerifyChallenge">
        <DisplayName>Verify Code</DisplayName>
        <Protocol Name="Proprietary" Handler="Web.TPEngine.Providers.CaptchaProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
        <Metadata>
        <Item Key="Brand">HIP</Item>
            <Item Key="Operation">VerifyChallenge</Item>
        </Metadata>
        <InputClaims>
            <InputClaim ClaimTypeReferenceId="challengeType" DefaultValue="Visual" />
            <InputClaim ClaimTypeReferenceId="challengeId" />
            <InputClaim ClaimTypeReferenceId="captchaEntered" PartnerClaimType="inputSolution" Required="true" />
            <InputClaim ClaimTypeReferenceId="azureregion" />
        </InputClaims>
        <DisplayClaims>
            <DisplayClaim ClaimTypeReferenceId="captchaEntered" />
        </DisplayClaims>
        <OutputClaims>
            <OutputClaim ClaimTypeReferenceId="challengeId" />
            <OutputClaim ClaimTypeReferenceId="isCaptchaSolved" PartnerClaimType="solved" />
            <OutputClaim ClaimTypeReferenceId="reason" PartnerClaimType="reason" />
        </OutputClaims>
    </TechnicalProfile>
    </TechnicalProfiles>
</ClaimsProvider>    
...
<!--<ClaimsProviders>-->

Profil techniczny CAPTCHA skonfigurowany za pomocą operacji GetChallenge generuje i wyświetla ciąg wyzwania CAPTCHA. Profil techniczny CAPTCHA skonfigurowany za pomocą polecenia VerifyChallenge weryfikuje ciąg wyzwania, który wprowadza użytkownik.

Zaktualizuj układy stron definicji treści

W przypadku różnych układów stron użyj następujących wersji układu strony:

Przykład:

W pliku TrustFrameworkBase.XML w ramach elementu ContentDefinitions znajdź definicję zawartości o Id="api.localaccountsignup", a następnie zaktualizuj jej atrybut DataUri, jak pokazano w poniższym kodzie.

<!---<ContentDefinitions>-->
...
<ContentDefinition Id="api.localaccountsignup">
    ...
    <!--Update this DataUri-->
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.27</DataUri>
    ...
</ContentDefinition>
...
<!---</ContentDefinitions>-->

Określamy wersję układu strony jako samopotwierdzoną 2.1.27.

Po skonfigurowaniu profilów technicznych i kontrolek wyświetlania można określić przepływ, dla którego chcesz włączyć funkcję CAPTCHA.

Włącz CAPTCHA dla procesu rejestracji lub logowania

Aby włączyć funkcję CAPTCHA dla przepływu rejestracji lub logowania, wykonaj następujące kroki:

1. Sprawdź ścieżkę użytkownika podczas rejestracji lub logowania, na przykład SignUpOrSignIn, aby zidentyfikować profil techniczny, który wyświetla środowisko rejestracji lub logowania.

2. W profilu technicznym, takim jak LocalAccountSignUpWithLogonEmail, dodaj klucz metadanych i wpis oświadczenia wyświetlania, jak pokazano w poniższym kodzie:

<TechnicalProfile Id="LocalAccountSignUpWithLogonEmail">
    ...
  <Metadata>
    ...
    <!--Add this metadata entry. Set value to true to activate CAPTCHA-->
    <Item Key="setting.enableCaptchaChallenge">true</Item>
    ...
  </Metadata>
    ...
  <DisplayClaims>
    ...
    <!--Add this display claim, which is a reference to the captcha display control-->
    <DisplayClaim DisplayControlReferenceId="captchaControlChallengeCode" /> 
    ...
  </DisplayClaims>
    ...
</TechnicalProfile>

Wpis oświadczenia wyświetlania odwołuje się do skonfigurowanej wcześniej kontrolki wyświetlania.

Włączanie funkcji CAPTCHA w przepływie uwierzytelniania wieloskładnikowego

Aby włączyć CAPTCHA w przepływie MFA, należy wprowadzić aktualizację w dwóch profilach technicznych: w profilu technicznym samo-powiązanym oraz w profilu technicznym czynnika telefonu.

1. Sprawdź ścieżkę użytkownika rejestracji i logowania, taką jak SignUpOrSignIn, aby zidentyfikować samooceniane profile techniczne oraz profile techniczne związane z uwierzytelnianiem telefonicznym, które są odpowiedzialne za przepływ rejestracji lub logowania.

2. W obu profilach technicznych dodaj klucz metadanych i wpis roszczenia o wyświetlanie, jak pokazano w poniższym kodzie.

<TechnicalProfile Id="PhoneFactor-InputOrVerify">
    ...
  <Metadata>
    ...
    <!--Add this metadata entry. Value set to true-->
    <Item Key="setting.enableCaptchaChallenge">true</Item>
    ...
  </Metadata>
    ...
  <DisplayClaims>
    ...
    <!--Add this display claim-->
    <DisplayClaim DisplayControlReferenceId="captchaControlChallengeCode" /> 
    ...
  </DisplayClaims>
    ...
</TechnicalProfile>

Włącz flagę funkcji CAPTCHA

Aby wymusić CAPTCHA podczas rejestracji, logowania lub uwierzytelniania wieloskładnikowego, należy dodać profil techniczny, który umożliwia znacznik funkcji dla każdego scenariusza, a następnie wywołać profil techniczny w ścieżce użytkownika.

1. W pliku TrustFrameworkBase.XML znajdź ClaimsProviders element i dodaj dostawcę oświadczeń przy użyciu następującego kodu:

<!--<ClaimsProvider>-->
...
<ClaimsProvider>

    <DisplayName>Set Feature Flags</DisplayName>

    <TechnicalProfiles>

    <TechnicalProfile Id="SetFeatureDefaultValue">
        <DisplayName>Set Feature Flags</DisplayName>
        <Protocol Name="Proprietary" Handler="Web.TPEngine.Providers.ClaimsTransformationProtocolProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
        <OutputClaims>
            <OutputClaim ClaimTypeReferenceId="signupCaptchaEnabled" DefaultValue="true" />
            <OutputClaim ClaimTypeReferenceId="signinCaptchaEnabled" DefaultValue="true" />
            <OutputClaim ClaimTypeReferenceId="mfaCaptchaEnabled" DefaultValue="true" />
        </OutputClaims>
    </TechnicalProfile>
    </TechnicalProfiles>
</ClaimsProvider>
...
<!--<ClaimsProviders>-->

2. Ustaw DefaultValue wartość true lub false w zależności od scenariusza CAPTCHA

3. Dodaj profil techniczny flag funkcji do podróży użytkownika, a następnie zaktualizuj kolejność pozostałych kroków aranżacji.

<!--<UserJourneys>-->
...
<UserJourney Id="SignUpOrSignIn">
    <OrchestrationSteps>

        <!--Add this orchestration step-->
        <OrchestrationStep Order="1" Type="ClaimsExchange">
          <ClaimsExchanges>
            <ClaimsExchange Id="SetFeatureDefaultValue" TechnicalProfileReferenceId="SetFeatureDefaultValue" />
          </ClaimsExchanges>
        </OrchestrationStep>
...
<!--<UserJourneys>-->

Prześlij niestandardowe pliki zasad

Wykonaj kroki opisane w temacie Przekazywanie zasad , aby przekazać pliki zasad niestandardowych.

Przetestuj politykę niestandardową

Wykonaj kroki opisane w artykule Testowanie zasad niestandardowych , aby przetestować i potwierdzić, że dla wybranego przepływu włączono funkcję CAPTCHA. Powinien zostać wyświetlony monit o wprowadzenie wyświetlanych lub usłyszanych znaków w zależności od typu CAPTCHA, wizualizacji lub dźwięku.