Passer au contenu principal

Avant de commencer

Vous avez besoin de ce qui suit :
  • Un locataire de développement Auth0 avec la connexion universelle configurée.
  • Une application configurée de domaine personnalisé.
  • Une app de développement ou d’exemple (comme React sample) s’exécutant sur votre localhost.
  • Authentification Identifier First activée
  • Une connexion de base de données qui utilise les mots de passe.
This guide will help you add a CAPTCHA to your Identifier-First Login screen. To learn more, read the Getting Started guide and visit the SDK reference guide. For more information about Auth0 CAPTCHAs, read Customize Signup and Login Prompts.

​
Setup

Complete the Build Identifier First Login with Password guide and navigate to your local directory. In your Auth0 tenant, navigate to Dashboard > Security > Attack Protection and enable at least one challenge, then choose Auth Challenge as your CAPTCHA provider when prompted.

​
Create the CAPTCHA file

In your components folder, create a file called SimpleCaptcha.tsx and include the following code. 
interface ISimpleCaptcha {
  image: string;
}

const SimpleCaptcha = ({ image }: ISimpleCaptcha) => (
  <>
    <div>
      <Frame><img src={image} alt="captcha" /></Frame>
    </div>
    <input
      label="Enter the code shown above"
      type="text"
      name="captcha"
      id="captcha"
    />
  </>
);

export default SimpleCaptcha;

​
Add the component

Add the following code to the Login ID screen inside the form and after the identifier input. 
{screenProvider.screen.isCaptchaAvailable ?
    <SimpleCaptcha image={screenProvider.screen.captchaImage} />
}
An example of a full code block for this screen is below. 
import { ChangeEvent } from "react";
import { LoginId as ScreenProvider } from "@auth0/auth0-acul-js";
// UI Components
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Text } from "@/components/ui/text";
import { Link } from "@/components/ui/link";
import SimpleCaptcha from "@/components/ui/simple-captcha";
import {
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from "@/components/ui/card";
export default function LoginId() {
  // Initialize the SDK for this screen
  const screenProvider = new ScreenProvider();
  // Handle the submit action
  const formSubmitHandler = (event: ChangeEvent<HTMLFormElement>) => {
    event.preventDefault();
    // grab the values from the form
    const identifierInput = event.target.querySelector(
      "input#identifier"
    ) as HTMLInputElement;
    const captchaInput = event.target.querySelector(
      "input[name='captcha']"
    ) as HTMLInputElement;
    // Call the SDK
    screenProvider.login({ 
        username: identifierInput?.value,
        captcha: captchaInput?.value
    });
  };
  // Render the form
  return (
    <form noValidate onSubmit={formSubmitHandler}>
      <CardHeader>
        <CardTitle className="mb-2 text-3xl font-medium text-center">
          {screenProvider.screen.texts?.title ?? "Welcome"}
        </CardTitle>
        <CardDescription className="mb-8 text-center">
          {screenProvider.screen.texts?.description ?? "Login to continue"}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="mb-2 space-y-2">
          <Label htmlFor="identifier">
            {screenProvider.screen.texts?.emailPlaceholder ??
              "Enter your email"}
          </Label>
          <Input
            type="text"
            id="identifier"
            name="identifier"
            defaultValue={
              screenProvider.screen.data?.username ??
              screenProvider.untrustedData.submittedFormData?.username
            }
          />
        </div>
        {screenProvider.screen.isCaptchaAvailable ?
            <SimpleCaptcha image={screenProvider.screen.captchaImage} />
        }
        <Button type="submit" className="w-full">
          {screenProvider.screen.texts?.buttonText ?? "Continue"}
        </Button>
        <Text className="mb-2">
          {screenProvider.screen.texts?.footerText ??
            "Don't have an account yet?"}
          <Link className="ml-1" href={screenProvider.screen.signupLink ?? "#"}>
            {screenProvider.screen.texts?.footerLinkText ??
              "Create your account"}
          </Link>
        </Text>
        <Text>
          Need Help?
          <Link
            className="ml-1"
            href={screenProvider.screen.resetPasswordLink ?? "#"}
          >
            {screenProvider.screen.texts?.forgottenPasswordText ??
              "Forgot your Password?"}
          </Link>
        </Text>
      </CardContent>
    </form>
  );
}

​
En savoir plus

⌘I