@olostecnologia/olos-cognito-auth v1.2.3-beta1
Olos Cognito Auth
O Olos Cognito Auth é um componente React que gerencia Tokens Cognito e gera Tokens para Aplicações Olos.
Como Instalar
Para instalar o componente, você pode utilizar o seguinte comando:
npm install @olostecnologia/olos-cognito-auth
Como Utilizar o Componente
Configuração
- Importe o "provider"
OlosCognitoAuthProvider
e 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>
Como Renderizar o Formulário
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 />
Como Ouvir os Eventos
- Importe o hook
useCognitoAuthEvents
e 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;
}
});
Como Estilizar com styles.scss
Para estilizar o componente utilizando o arquivo styles.css
, siga os passos abaixo:
- Importe o arquivo
styles.scss
no 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
.
Função para Validação de Senha
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.
Exemplo de Uso:
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' },
// ]
Utilizando customPasswordValidation em OlosCognitoAuthForm
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.
Exemplo:
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.
13 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
5 months ago
6 months ago
10 months ago
6 months ago
10 months ago
6 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
6 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
7 months ago
7 months ago
7 months ago
9 months ago
9 months ago
9 months ago
7 months ago
7 months ago
7 months ago
7 months ago
9 months ago
9 months ago
9 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago