Pular para o conteúdo principal

Altcha

Alternativa open-source equivalente ao reCaptcha.

Introdução​

A implementação do mecanismo de segurança com captcha é de extrema importância, segue alguns motivos pertinentes:

  • Evitar que os robôs fiquem fazendo acessos automáticos aos endereços da API.
  • Garantir que o acesso é feito por uma pessoa real.
  • Também garante que o acesso foi feito com um navegador.

Durante muito tempo o mecanismo de captcha oferecia um desafio para o usuário preencher.

Hoje em dia isso é desnecessário, porque é utilizado um mecanismo de chaves encriptadas combinado com desafio que precisa ser resolvido por algoritmo que utiliza a interação no navegador, assim detecta se é uma interação humana ou robotizada.

Esse método é engenhoso e fiável, com apenas um click é detectado se é humano ou robô.

O Altcha é um projeto open-source que implementa esse processo de segurança, com um widget de frontend que também integra com o React, e recurso de backend que o Netuno oferece.

Limitações​

O Altcha utiliza a Web Crypto API, apenas funciona em endereços HTTPS seguros com certificado SSL, ou localmente.

No frontend caso o domínio não seja localhost a URL obrigatoriamente precisa ser HTTPS segura com certificado SSL.

Quando o frontend é acessado localmente os navegadores permitem utilizar a Web Crypto API apenas no endereço local, obrigatoriamente localhost, portanto caso contrário exige HTTPS seguro com certificado SSL.

Backoffice​

Para ativar a autenticação com Altcha no backoffice da sua aplicação Netuno, utilize a seguinte configuração na aplicação:

config/_[AMBIENTE].json
{
  ...
  "auth": {
    "altcha": {
      "admin": {
        "enabled": true
      }
    }
  },
  ...
}

Pronto, agora basta acessar a tela de login do backoffice e já vai ver a checkbox do Altcha em pleno funcionamento.

Como Funciona​

O Netuno fornece na API REST um serviço padrão que fornecer os parâmetros do Altcha para o frontend, normalmente o endereço deste serviço é:

  • http://localhost:9000/services/_altcha

Com os parâmetros o widget do Altcha no frontend gera o resultado do desafio assinado digitalmente, o que é enviado para o backend no campo oculto altcha do formulário.

No backend é validado se o resultado e a assinatura digital estão realmente corretos.

Widget no HTML​

Exemplo de como o widget é integrado no HTML de login do backoffice:

login.html
<script type="text/javascript" src="/scripts/plugins/altcha/altcha.i18n.umd.min.cjs"></script>
<form ...>
  <input id="inputAltcha" type="hidden" name="altcha" value="">
  <altcha-widget id="widgetAltcha"
    challenge="/services/_altcha" language="pt"
    hideLogo hideFooter></altcha-widget>
  <script>
    document.getElementById("widgetAltcha").addEventListener("statechange", function (e) {
      if (e.detail.state === "verified") {
        document.getElementById("inputAltcha").value = e.detail.payload;
      }
    }, false);
  </script>
  ...
</form>

Repare que a URL utilizada no atributo challenge do widget, é o serviço autogerado pelo Netuno com a parametrização do desafio.

Autenticação Externa​

Para ativar o Altcha na autenticação, que normalmente é implementada e segura com JWT, utiliza-se o serviço padrão da API REST para autenticação, o qual costuma ser:

  • http://localhost:9000/services/_auth

Este serviço autogerado pelo Netuno permite garantir a segurança para autenticação externa com JWT nativo, mas também faz a validação do resultado de desafio do widget de captcha.

Para ativar o Altcha na autenticação, adicione a configuração:

config/_[AMBIENTE].json
{
  ...
  "auth": {
    "altcha": {
      "enabled": true
    }
  },
  ...
}

Assim apenas os pedidos de autenticação, ou seja, os logins que enviem a chave do resultado do desafio gerado pelo Altcha e que seja válida é que poderão autenticar com sucesso, caso contrário o login será barrado.

Deve ser integrado no frontend o widget do Altcha e enviar a chave do resultado de desafio no campo altcha.

Widget no React​

Veja abaixo como fazer a integração do widget no React:

Adicione a dependência do Altcha:

  • bun add altcha

Importe o Altcha no código:

website/src/pages/Login/index.jsx
import "altcha/i18n";

Crie o estado para armazenar a chave do resultado de desafio:

website/src/pages/Login/index.jsx
const [altchaPayload, setAltchaPayload] = useState(null);

Crie uma referência interna no componente React para o widget:

website/src/pages/Login/index.jsx
const altcha = useRef(null);

Adicione o efeito de carregamento do componente que utiliza a referência do widget, com evento que observa quando a checkbox do widget for clicada para carregar a chave do resultado de desafio no estado:

website/src/pages/Login/index.jsx
useEffect(() => {
  if (altcha && altcha.current) {
    function altchaVerified(ev) {
      if (ev.detail.state === "verified") {
        setAltchaPayload(ev.detail.payload);
      }
    }
    altcha.current.addEventListener("statechange", altchaVerified, false);
    return () => {
      if (altcha.current != null) {
        altcha.current.removeEventListener("statechange", altchaVerified, false);
      }
    }
  }
}, [altcha]);

Exemplo do widget no "HTML" do componente React:

website/src/pages/Login/index.jsx
<altcha-widget
    ref={altcha}
    challenge={_service.url('/_altcha')}
    language="pt"
    delay={1}
    hideLogo={true}
    hideFooter={true}
></altcha-widget>

Auth Client​

Veja como integrar o Altcha no Auth Client.

Utilize o código abaixo no evento que envia os dados do formulário de login para o backend, como os eventos de onSubmit, onClick, ou o onFinish dos formulários do Ant.Design:

website/src/pages/Login/index.jsx
_auth.login({
  username,
  password,
  data: (data) => {
    data.altcha = altchaPayload;
    return data;
  },
  success: ({json}) => {
    ...
  },
  fail: (data) => {
    ...
  }
});

Repare que o altchaPayload é o estado que tem a chave do resultado de desafio do captcha.

Exemplo completo na página de Login do ReAuthKit:

Integração em Serviços​

Além da autenticação como vimos acima, em qualquer outro tipo de serviço pode ser integrado o mecanismo de captcha com o Altcha.

É recomendado fazer a integração do captcha em qualquer serviço público que possa ser alvo de ataques, como a automação exaustiva de robôs para o registro massivo de dados.

No frontend, na tela em que o serviço da API REST é integrado também o widget de segurança do Altcha deve ser implementado, ou seja, onde o serviço é chamado deve ser utilizado o widget.

Service Client​

Veja a seguir como integrar o Altcha no Service Client.

A integração do widget no frontend é semelhante como já foi explicado acima em:

Precisamos obter o payload do widget, exatamente como já foi exemplificado acima, segue o mesmo processo da autenticação de login.

O payload é enviado para o backend através de um parâmetro na URL, campo do Form, ou ainda como uma propriedade no JSON, depende do método HTTP e como é feita a implementação do serviço.

Exemplo de como enviar o payload para o serviço de registro, ou cadastro de uma nova conta de usuário:

pages/Register/index.jsx
_service({
  method: 'POST',
  url: 'register',
  data: {
    name,
    email,
    password,
    altcha: altchaPayload
  },
  success: (response) => {
    ...
  },
  fail: (e) => {
    ...
  }
});

Repare que o altchaPayload é o estado que tem a chave do resultado de desafio do captcha.

Exemplo completo na página de Registro do ReAuthKit:

Backend​

Com o payload sendo enviado para o serviço da API REST, então no código do serviço, no lado do backend temos que validá-lo, veja como:

server/services/register/post.js
const altchaPayload = _req.getString("altcha");

if (_auth.altchaEnabled() && !_altcha.verifySolution(altchaPayload)) {
    _header.status(409);
    _out.json(
        _val.map()
            .set("error", `invalid-altcha-payload`)
    );
    _exec.stop();
}

Exemplo completo do serviço de Registro do ReAuthKit:

Veja mais sobre os recursos de programação low-code e poliglota:

Conclusão​

De forma bastante simplificada podemos criar um mecanismo de segurança nos serviços da API para evitar robôs e garantir a interação por humanos no navegador.

É recomendado utilizar o mecanismo de captcha com o Altcha nos serviços públicos mais sensíveis, como os serviços de registro e autenticação.

Com a implementação nativa que o Netuno oferece torna-se muito simples ativar e utilizar este mecanismo em qualquer serviço da API REST.

Recomenda-se que o backoffice autogerado do Netuno sempre tenha a autenticação com Altcha ativada em produção, e com HTTPS e certificado SSL.

Sempre que possível utilize o Altcha para garantir segurança e robustez aos serviços públicos da sua API.