O Olos Cognito Auth é um componente React que gerencia Tokens Cognito e gera Tokens para Aplicações Olos.
Para instalar o componente, você pode utilizar o seguinte comando:
npm install @olostecnologia/olos-cognito-auth- Importe o "provider"
OlosCognitoAuthProvidere adicione o componente como pai da sua aplicação. A única propriedade que deve ser passada para o "provider" é um objeto de configuração.
import { OlosCognitoAuthProvider, IOlosCognitoAuth } from "@olostecnologia/olos-cognito-auth";
const config: IOlosCognitoAuth = {
tenantId: conf.tenantId,
access_key_id: conf.access_key_id,
secret_access_key: conf.secret_access_key,
appName: conf.appName,
redirect_sign_in: conf.redirect_sign_in,
redirect_sign_out: conf.redirect_sign_out,
environment: conf.environment,
locale: conf.locale,
};
<OlosCognitoAuthProvider configuration={config}>
<App />
</OlosCognitoAuthProvider>Para renderizar o formulário, siga os passos abaixo:
- Importe o componente
OlosCognitoAuthForm. - Renderize o componente dentro do contexto de
OlosCognitoAuthProvider.
import { OlosCognitoAuthForm } from '@olostecnologia/olos-cognito-auth';
<OlosCognitoAuthForm />- Importe o hook
useCognitoAuthEventse aguarde os eventos de signIn, signOut e refreshToken. As informações sobre o Token Olos são retornadas nas respostas dos eventos.
import { useCognitoAuthEvents, CognitoAuthEvents } from "@olostecnologia/olos-cognito-auth";
import "@olostecnologia/olos-cognito-auth/src/Default.scss"; // Importe o SCSS aqui
useCognitoAuthEvents((response) => {
const { event, data } = response;
switch (event) {
case CognitoAuthEvents.SIGN_IN:
console.log('CognitoAuthEvents.SIGN_IN', data);
break;
case CognitoAuthEvents.SIGN_OUT:
console.log('CognitoAuthEvents.SIGN_OUT', data);
break;
case CognitoAuthEvents.TOKEN_REFRESH:
console.log('CognitoAuthEvents.TOKEN_REFRESH', data);
break;
}
});Para estilizar o componente utilizando o arquivo styles.css, siga os passos abaixo:
- Importe o arquivo
styles.scssno seu projeto.
import "@olostecnologia/olos-cognito-auth/src/styles.scss";Agora, o componente será estilizado de acordo com as definições do arquivo styles.css.
A função validatePassword foi criada para avaliar a robustez de uma senha fornecida. Ela retorna um array de mensagens de validação, cada uma contendo uma string de mensagem, um booleano indicando se é uma mensagem de erro ou sucesso, um ícone representativo e um rótulo ARIA para acessibilidade.
import { validatePassword } from './validation';
const senha = 'exemploSenha123';
const resultadosValidacao = validatePassword(senha);
// Exemplo de saída:
// [
// { message: 'A senha tem pelo menos 8 caracteres', isError: false, icon: '✅', ariaLabel: 'check' },
// { message: 'A senha contém pelo menos 1 número', isError: false, icon: '✅', ariaLabel: 'check' },
// { message: 'A senha contém pelo menos 1 caractere especial', isError: false, icon: '✅', ariaLabel: 'check' },
// { message: 'A senha contém pelo menos 1 letra maiúscula', isError: false, icon: '✅', ariaLabel: 'check' },
// { message: 'A senha contém pelo menos 1 letra minúscula', isError: false, icon: '✅', ariaLabel: 'check' },
// ]O componente OlosCognitoAuthForm possui uma propriedade chamada customPasswordValidation que permite fornecer lógica personalizada de validação de senha. Essa propriedade recebe uma função que recebe a senha como parâmetro e retorna uma matriz de mensagens de validação.
const myCustomValidation = (password: string): { message: string, isError: boolean, icon: string, ariaLabel: string }[] => {
const messages = [];
if (password.length < 10) {
messages.push({ message: "A senha precisa conter 10 letras", isError: true, icon: '❌', ariaLabel: 'error' });
} else {
messages.push({ message: "A senha contém 10 letras", isError: false, icon: '✅', ariaLabel: 'check' });
}
return messages;
}
function App() {
// ... (código existente)
return (
<div className="App">
{!!cognitoAuthProviderConfig && !!eventEmitter && (
<OlosCognitoAuthProvider configuration={cognitoAuthProviderConfig} eventEmitter={eventEmitter} >
<OlosCognitoAuthForm customPasswordValidation={myCustomValidation} useThirdParty={true}/>
</OlosCognitoAuthProvider>
)}
</div>
);
}Neste exemplo, myCustomValidation é uma função que recebe uma senha como parâmetro e retorna uma matriz de mensagens de validação. Você pode personalizar esta função de acordo com os requisitos específicos de validação de senha.
Ao utilizar o componente OlosCognitoAuthForm, passe sua função de validação personalizada como valor para a propriedade customPasswordValidation. Isso permite que você implemente uma lógica de validação de senha adaptada às necessidades específicas de sua aplicação.