Integre o Google reCAPTCHA em um aplicativo React

À medida que os aplicativos móveis e da Web se tornaram mais populares, também aumentou o risco de spam e outras atividades maliciosas. Os CAPTCHAs podem ser uma medida de segurança útil que vale a pena integrar para evitar esses tipos de ameaças à segurança.

Um CAPTCHA é um recurso de segurança mínimo, comumente integrado a formulários da Web para evitar ataques automatizados de spambots. Ele garante que o usuário que acessa um aplicativo seja realmente humano, e não um bot executando um código malicioso.

O que é CAPTCHA?

O acrônimo CAPTCHA significa teste de Turing público completamente automatizado para diferenciar computadores e humanos. Refere-se a um teste gerado por computador que verifica para determinar se um determinado usuário que interage com seu aplicativo é humano e não um bot.

Existem diferentes tipos de testes CAPTCHA que você pode integrar em seu aplicativo, como CAPTCHAs baseados em texto e baseados em áudio. No entanto, o tipo mais popular e eficaz é o Google reCAPTCHA. Ele verifica a distinção entre usuários reais e bots usando algoritmos avançados de análise de risco.

O Google reCAPTCHA vem em duas versões:

• reCAPTCHA V3: Esta versão é executada em segundo plano e determina uma pontuação geral com base no comportamento do usuário.
• reCAPTCHA V2: Esta versão coloca a caixa de seleção “Não sou um robô” no formulário de autenticação.

Este guia irá explorar o Google reCAPTCHA V2. Continue lendo para saber como integrá-lo a um aplicativo React.

Registre o aplicativo React no reCAPTCHA Admin Console

Para começar, você precisa registrar seu aplicativo no console do desenvolvedor do reCAPTCHA. Dirija-se a Console de administração reCAPTCHA do Google, faça login com sua conta do Google e preencha os detalhes do formulário necessário.

Forneça o nome do rótulo, selecione reCAPTCHA V2, e na caixa suspensa, escolha as solicitações de verificação usando a opção da caixa de seleção "Não sou um robô". Por fim, forneça o nome de domínio do seu aplicativo. Para desenvolvimento local, digite host local como o nome de domínio.

Depois de registrar seu aplicativo, o site o redirecionará para uma nova página com o segredo gerado e as chaves do site.

Criar um cliente React

Este projeto é duplo: você criará um cliente React que renderiza um formulário de login simples com o Google reCAPTCHA e um Back-end expresso que faz solicitações POST à ​​API do reCAPTCHA para verificar o token gerado depois que um usuário conclui o reCAPTCHA desafio.

Crie uma pasta de projeto localmente para hospedar seus arquivos de projeto. Próximo, criar o aplicativo React e altere o diretório atual para o do cliente. No diretório raiz da pasta do cliente, crie um arquivo .env para armazenar a chave secreta da API e a chave do site.

REACT_APP_reCAPTCHA_SITE_KEY = 'chave do site'
REACT_APP_reCAPTCHA_SECRET_KEY = 'chave secreta'

Você pode encontrar o código deste projeto em seu Repositório GitHub.

Instale os pacotes necessários

Instale o Axios, você usará esta biblioteca para fazer solicitações HTTP do navegador e React-Google-reCAPTCHA. Este pacote fornece uma implementação específica do React para a API reCAPTCHA.

npm install react-recaptcha-google axios --save

Integre o Google reCAPTCHA no aplicativo React

Abra o arquivo src/App.js, exclua o código padrão do React e adicione o código abaixo:

Este componente renderizará um formulário de login simples que inclui o widget Google reCAPTCHA.

Primeiro, importe os pacotes React, Axios e react-google-recaptcha:

importar Reagir, { useState, useRef } de'reagir';
importar Axios de'axios';
importar ReCAPTCHA de'reagir-google-recaptcha';

Em seguida, defina três variáveis ​​de estado: successMsg, errorMsg e validToken. Seu código atualizará esses estados após o envio bem-sucedido do formulário e a validação do reCAPTCHA. Além disso, obtenha o site e as chaves secretas do arquivo ENV.

funçãoAplicativo() {
const [SuccessMsg, setSuccessMsg] = useState("")
const [ErrorMsg, setErrorMsg] = useState("")
const [valid_token, setValidToken] = useState([]);
const SITE_KEY = processo.env. REACT_APP_reCAPTCHA_SITE_KEY;
const SECRET_KEY = processo.env. REACT_APP_reCAPTCHA_SECRET_KEY;

Defina um gancho useRef que faça referência ao componente reCAPTCHA para capturar o token gerado depois que um usuário concluir os desafios reCAPTCHA.

const captchaRef = useRef(nulo);

Em seguida, crie uma função handleSubmit para chamar quando um usuário enviar o formulário de login. Essa função obtém o token do componente reCAPTCHA e chama o reiniciar método para redefinir o reCAPTCHA para permitir verificações subsequentes.

Além disso, ele verifica se o token existe e chama a função VerifyToken para verificar o token. Depois de verificado o token, ele atualizará o estado validToken com os dados de resposta da API.

const handleEnviar = assíncrono (e) => {
 e.preventDefault();
deixar token = captchaRef.current.getValue();
 captchaRef.current.reset();
se (símbolo) {
deixar valid_token = aguardam verifiqueToken (token);
 setValidToken (valid_token);
se (válido_token[0].sucesso verdadeiro) {
console.registro("verificado");
 setSuccessMsg("Viva!! você enviou o formulário")
 } outro {
console.registro("não verificado");
 setErrorMsg(" Desculpe!! Verifique se você não é um bot")
 }
 }
 }

Por fim, defina a função verifyToken que enviará uma solicitação POST para um endpoint do servidor Express usando Axios, passando o token reCAPTCHA e a chave secreta no corpo da solicitação. Se a solicitação for bem-sucedida, ela enviará os dados de resposta para a matriz APIResponse e retornará a matriz como resultado.

const verificarToken = assíncrono (token) => {
deixar APIResponse = [];
tentar {
deixar resposta = aguardam Axios.post(` http://localhost: 8000/verificar-token`, {
 reCAPTCHA_TOKEN: símbolo,
 Secret_Key: SECRET_KEY,
 });
 APIResponse.push (resposta['dados']);
retornar APIResponse;
 } pegar (erro) {
console.log (erro);
 }
 };

Por fim, retorne um formulário com o componente reCAPTCHA. Este componente usa o gancho de referência e a chave do site como suportes para configurar e exibir o widget reCAPTCHA.

Quando um usuário envia o formulário, o componente renderiza uma mensagem de sucesso ou erro com base no valor do estado validToken. Se o token reCAPTCHA for válido, significando que um usuário concluiu com sucesso os desafios reCAPTCHA, ele exibirá a mensagem de sucesso, caso contrário, exibirá a mensagem de erro.

retornar (
"Aplicativo">
"Cabeçalho do aplicativo"> 
"forma de login">


 {valid_token.length > 0 && valid_token[0].sucesso verdadeiro
? <h3nome da classe="textoSucesso">{Mensagem de sucesso}h3>
: <h3nome da classe="erro de texto">{ErrorMsg} h3>}

Nome de usuário</p>
"texto" espaço reservado ="Nome de usuário..." />

Senha</p>
"senha" espaço reservado = "Senha..." />
 className="recaptcha"
 sitekey={SITE_KEY}
 ref={captchaRef}
 />
"enviar">Enviar</button>
 </form>
 </div>
 </header>
 </div>
 );
}


exportarpadrão Aplicativo

Por fim, execute o servidor de desenvolvimento e acesse seu navegador de http://localhost: 3000 para ver os resultados.

Criar o back-end expresso

Para começar, no diretório raiz de toda a pasta do projeto, criar um servidor web Express, e instale estes pacotes:

npm install express cors axios body-parser

Configurar o Express Server

Em seguida, abra o arquivo index.js na pasta do projeto do servidor e adicione este código:

const expresso = exigir('expressar')
const axios = exigir('axios');
const cors = exigir('cors');
const aplicativo = expresso();
const bodyParser = exigir('analisador de corpo');
const jsonParser = bodyParser.json();
const PORT = processo.env. PORTO || 8000;
app.use (jsonParser);
app.use (cors());
app.post("/verify-token", assíncrono (req, res) => {
const { reCAPTCHA_TOKEN, Secret_Key} = req.body;
tentar {
deixar resposta = aguardam axios.post(` https://www.google.com/recaptcha/api/siteverify? segredo=${Secret_Key}&resposta=${reCAPTCHA_TOKEN}`);
console.log (resposta.dados);
retornar res.status(200).json({
 sucesso:verdadeiro,
 mensagem: "Token verificado com sucesso",
 VERIFICAÇÃO_INFO: resposta.data
 });
 } pegar(erro) {
console.log (erro);
retornar res.status(500).json({
 sucesso:falso,
 mensagem: "Erro ao verificar token"
 })
 }
});
app.listen (PORT, () => console.registro(`App iniciado na porta ${PORTA}`));

Este código faz o seguinte:

• O servidor define uma rota Post que faz uma solicitação HTTP POST assíncrona para a API reCAPTCHA do Google para verifique o token reCAPTCHA usando Axios, passando a chave secreta para autenticação na URL de solicitação.
• Se o token reCAPTCHA for verificado com sucesso, o servidor responderá com um objeto JSON contendo uma propriedade "success" definida como true, uma propriedade "message" indicando que o token foi verificado com sucesso e uma propriedade "verification_info" contendo informações sobre a resposta de verificação do Google API.
• Se ocorrer um erro durante o processo de verificação, o servidor responde com um objeto JSON contendo um propriedade "success" definida como false e uma propriedade "message" indicando que houve um erro ao verificar o símbolo.

Por fim, execute o servidor do nó e teste a funcionalidade do recurso reCAPTCHA.

nó index.js

Os reCAPTCHAs podem garantir segurança contra spambots?

De acordo com o Google, seu serviço reCAPTCHA tem uma taxa de sucesso de mais de 99%, o que significa que apenas uma pequena porcentagem de spam pode ignorar o recurso de segurança reCAPTCHA.

O reCAPTCHA não é infalível, pois determinados atores mal-intencionados ainda podem encontrar soluções alternativas. Mas continua sendo uma ferramenta essencial que pode reduzir significativamente o risco de spambots.