Esse documento descreve os fluxos de dados necessários para contemplar a implementação do login com e-mail e senha do CNN ID. A base que serve de inspiração para o projeto se encontra no seguinte figma (não é o layout/ux final, é apenas uma POC para inspirar o desenvolvimento)
Para contemplar esse tipo de autenticação, precisaremos de, pelo menos, três fluxos diferentes para serem trabalhados. O primeiro é o principal, trata-se do próprio login com criação amigável de conta; em seguida, precisaremos de um fluxo que permita que o sistema confirme o endereço de e-mail fornecido na criação da conta; e por fim, será necessário um fluxo que permita que o usuário reset a própria senha.
Fluxo de Login e Criação de conta amigável:
---
config:
layout: elk
look: neo
theme: default
---
flowchart TB
subgraph s1["Criação de conta"]
n10["Senha
Confirmação de senha"]
n12["Envio de dados e confirmação de email"]
n15["Email"]
n16["Mensagem de sucesso + informação de confirmação de email"]
end
subgraph s2["Login"]
n1(["Login"])
n2["Email"]
n3["Email existe no cnn id"]
n4["Senha"]
n5["Email e senha corretos"]
n6["Gerar token da sessão + dados do usuário"]
n9["Erro de login"]
n13["Email validado"]
n14["Erro de login + botão Reenviar email de validação"]
end
n1 --> n2
n2 --> n3
n3 -- SIM --> n4
n4 --> n5
n5 -- NÃO --> n9
n9 --> n2
n5 -- SIM --> n13
n13 -- SIM --> n6
n13 -- NÃO --> n14
n3 -- NÃO --> n15
n15 --> n10
n10 --> n12
n12 --> n16
n10@{ shape: manual-input}
n12@{ shape: subproc}
n15@{ shape: out-in}
n16@{ shape: display}
n2@{ shape: manual-input}
n3@{ shape: decision}
n4@{ shape: manual-input}
n5@{ shape: decision}
n6@{ shape: display}
n9@{ shape: display}
n13@{ shape: decision}
n14@{ shape: display}
style n6 stroke:#00C853
style n9 stroke:#D50000
style n14 stroke:#D50000
Fluxo de login
sequenceDiagram actor A1 as User participant P1 as CNN ID - Frontend participant P2 as CNN ID - Backend participant P3 as Firebase - Auth/Admin A1->>P1: Prompta login com email P1->>P2: GET /email-existe P2->>P3: Lista usuário com email P3->>P2: Usuário P2->>P1: Usuário P1->>A1: Solicita senha A1->>P1: Prompta senha P1->>P2: POST /login P2->>P3: autentica com email/senha P3->>P2: Dados do usuário P2->>P1: Dados do usuário P1->>A1: Guarda dados do usuário
Para o login acontecer pelo backend do CNN ID é necessário consumir a API REST do firebase auth. Essa API irá tentar autenticar o e-mail e a senha enviados. Quando com sucesso, o retorno é os dados do usuário e o token de autenticação.
Os possíveis erros que essa API pode retornar são
EMAIL_NOT_FOUND: O email enviado não corresponde a nenhuma conta registrada. INVALID_PASSWORD: A senha está errada. USER_DISABLED: O usuário foi desabilitado pelo ADMIN.
Fluxo de cadastro de usuário:
sequenceDiagram actor A1 as User participant P1 as CNN ID - Frontend participant P2 as CNN ID - Backend participant P3 as Firebase - Auth/Admin A1->>P1: Prompta login com email P1->>P2: GET /email-existe P2->>P3: Lista usuário com email P3->>P2: vazio P2->>P1: vazio 404 P1->>A1: Solicita criação de senha A1->>P1: Prompta senha P1->>P1: Valida senha A1->>P1: Prompta confirmação de senha P1->>P1: Valida confirmação de senha P1->>P2: POST /register P2->>P3: Create user email e senha P3->>P2: Dados do usuário novo P2->>P3: Solicita envio do email de confirmação P2->>P1: Conta criada P1->>A1: Solicita que usuário confirme o email
Fluxo de recuperação de senha:
---
config:
layout: elk
look: neo
theme: default
---
flowchart TB
subgraph s3["Solicitação de reset de senha"]
n17(["Solicitação de reset de senha"])
n18["Email"]
n19["Verifica se existe no cnn id"]
n20["Envio de email com link de reset de senha"]
n29["Mensagem de erro + Botão de criar nova conta"]
n30["Mensagem de sucesso + informativo do email"]
n31["Revoga links anteriores de reset de senha"]
end
subgraph s4["Reset de senha"]
n21(["Reset de senha"])
n22["Token de reset de senha"]
n23["Token de reset é valido"]
n24["Nova senha
Confirmação da nova senha"]
n25["Atualiza dados de acesso"]
n26["Mensagem de sucesso"]
n27["Redireciona para Login"]
n28["Mensagem de link expirado + Botão de solicitar reset de senha"]
n32["Revoga links de reset de senha"]
end
n17 --> n21
n17 --> n18
n18 --> n19
n19 -- NÃO --> n29
n19 -- SIM --> n31
n31 --> n20
n20 --> n30
n21 --> n22
n22 --> n23
n23 -- SIM --> n24
n23 -- NÃO --> n28
n24 --> n25
n25 --> n32
n32 --> n26
n26 --> n27
n18@{ shape: manual-input}
n19@{ shape: diam}
n20@{ shape: subproc}
n29@{ shape: display}
n30@{ shape: display}
n31@{ shape: subproc}
n22@{ shape: lean-l}
n23@{ shape: diam}
n24@{ shape: manual-input}
n25@{ shape: subproc}
n26@{ shape: display}
n27@{ shape: display}
n28@{ shape: display}
n32@{ shape: subproc}
A recuperação de senha acontece em dois tempos. Em um primeiro momento, o usuário indica a necessidade de recuperar a senha de uma conta. O sistema deve enviar um e-mail para ele com um link único de recuperação – essa é a forma que temos para saber que ele é de fato proprietário da conta. Acessando esse link, o usuário poderá inserir a nova senha desejada.
Fluxo de recuperação de senha
sequenceDiagram actor A1 as User participant P1 as CNN ID - Frontend participant P2 as CNN ID - Backend participant P3 as Firebase - Auth/Admin A1->>P1: Clica em "recuperar senha" P1->>A1: Prompta email A1->>P1: Email P1->>P2: POST /solicita-recuperacao-senha P2->>P3: Lista usuário com email P3->>P2: Dados do usuário P2->>P3: Envia link de rest de senha P3--xA1: Email de recuperação de senha P2->>P1: Email enviado P1->>A1: Informa email de reset de senha enviado A1->>P1: Entra em reset de senha A1->>P1: Prompta senha P1->>P1: Valida senha A1->>P1: Prompta confirmação de senha P1->>P1: Valida confirmação de senha P1->>P2: POST /reset-password P2->>P3: Valida token de reset de senha P2->>P3: Reseta senha P2->>P1: Senha resetada P1->>A1: Redireciona login
Fluxo de confirmação de email:
---
config:
layout: elk
look: neo
theme: default
---
flowchart TB
subgraph s5["Solicitar confirmação de email"]
n33(["Solicitar confirmação de email"])
n34["Email"]
n35["Email existe no cnn id"]
n36["Envio de link de confirmação de email"]
n37["Mensagem de sucesso + link para reenviar"]
n38["Mensagem de erro + Botão de criar nova conta"]
end
subgraph s6["Confirmação de email"]
n39(["Confirmação de email"])
n40["Token de confirmação"]
n41["Token é valido"]
n42["Marcar email como verificado"]
n43["Mensagem de sucesso"]
n44["Mensagem de link expirado + Botão de solicitar verificação de email"]
end
n33 --> n39
n33 --> n34
n34 --> n35
n35 -- SIM --> n36
n35 -- NÃO --> n38
n36 --> n37
n39 --> n40
n40 --> n41
n41 -- SIM --> n42
n41 -- NÃO --> n44
n42 --> n43
n34@{ shape: manual-input}
n35@{ shape: diam}
n36@{ shape: subproc}
n37@{ shape: display}
n38@{ shape: display}
n40@{ shape: lean-l}
n41@{ shape: diam}
n42@{ shape: subproc}
n43@{ shape: display}
n44@{ shape: display}
A confirmação de e-mail é um passo crucial para termos confiabilidade de que o cadastro realizado é realmente válido. Por esse motivo, o acesso ao cadastro feito com e-mail e senha só será liberado após a confirmação do e-mail.
Para atender a essa demanda, é necessário que tenhamos um fallback para quando o usuário “esquecer” de confirmar o e-mail após o registro. Esse fallback deve permitir reenviar o e-mail de confirmação enviado antes. Dessa forma, temos duas formas de ativar o fluxo de confirmação de e-mail, uma pelo botão e outra após a criação da conta.
Fluxo de confirmação de e-mail com botão
sequenceDiagram actor A1 as User participant P1 as CNN ID - Frontend participant P2 as CNN ID - Backend participant P3 as Firebase - Auth/Admin A1->>P1: Clica em "Enviar confirmaçã́o de email" A1->>P1: Email P1->>P2: POST /ask-email-confirmation P2->>P3: Envia email de confirmação de conta P3--xA1: Email de confirmação P2->>P1: Email enviado P1->>A1: Informa email foi enviado com sucesso A1->>P1: Clica no link do email P1->>P2: POST /email-confirmation P2->>P3: Valida token de confirmação P2->>P3: Confirma email P2->>P1: Email confirmado P1->>A1: Redireciona login
Fluxo de confirmação de e-mail com registro
sequenceDiagram actor A1 as User participant P1 as CNN ID - Frontend participant P2 as CNN ID - Backend participant P3 as Firebase - Auth/Admin A1->>P1: Acabou de criar a conta P1->>P2: POST /register P2->>P2: Coisas relacionadas ao registro P2->>P2: Evendo de usuário registrado P2->>P3: Envia email de confirmação de conta P3--xA1: Email de confirmação P2->>P1: Email enviado P1->>A1: Informa email foi enviado com sucesso A1->>P1: Clica no link do email P1->>P2: POST /email-confirmation P2->>P3: Valida token de confirmação P2->>P3: Confirma email P2->>P1: Email confirmado P1->>A1: Redireciona login