@dev-tcloud/tcloud-ui 7.8.1 → 8.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/tcloud-ui-auth-flow.md +94 -0
- package/docs/tcloud-ui-el-copy.md +2 -2
- package/docs/tcloud-ui-tag.md +12 -0
- package/docs/tcloud-ui-tc-btn.md +12 -1
- package/fesm2022/dev-tcloud-tcloud-ui.mjs +50 -1952
- package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/js/tcloud-ui-app.js +74 -70
- package/package.json +1 -1
- package/scss/tcloud-ui/styles/_claus-btn.scss +21 -0
- package/scss/tcloud-ui/styles/_colors.scss +11 -0
- package/types/dev-tcloud-tcloud-ui.d.ts +48 -703
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
# Fluxo de autenticação compartilhado
|
|
2
|
+
|
|
3
|
+
Esta página explica, de forma acessível e **independente de framework**, como funciona a
|
|
4
|
+
autenticação compartilhada da `@dev-tcloud/tcloud-ui` e como cada aplicativo a consome.
|
|
5
|
+
|
|
6
|
+
> Os fluxogramas abaixo são imagens embutidas (data URI) para que o documento seja um único
|
|
7
|
+
> `.md` autossuficiente — propagado corretamente pelo `copy-tcloud-ui`. Os fontes editáveis
|
|
8
|
+
> (Mermaid) ficam em `docs/auth-diagrams/*.mmd`.
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## Em uma frase
|
|
13
|
+
|
|
14
|
+
A biblioteca fornece um **"kit padrão de autenticação"** (guardar sessão, logar, renovar e
|
|
15
|
+
sair) que vários aplicativos reutilizam. Cada app **liga esse kit** passando as URLs/chaves do
|
|
16
|
+
seu próprio ambiente e **escolhe** se usa o kit por inteiro ou só partes dele.
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## Conceitos essenciais (linguagem simples)
|
|
21
|
+
|
|
22
|
+
Pense no **token** de acesso como uma **pulseira de evento**:
|
|
23
|
+
|
|
24
|
+
| Termo | O que é, em linguagem simples |
|
|
25
|
+
|---|---|
|
|
26
|
+
| **Token** | A "pulseira" que prova que você está logado. |
|
|
27
|
+
| **localStorage** | A "gaveta" do navegador onde a pulseira fica guardada (`currentUser`). |
|
|
28
|
+
| **sessionStorage** | Gaveta temporária da aba (`currentEnv`): ambiente, permissões de tela (`ui`), feature flags. |
|
|
29
|
+
| **Interceptor** | O "porteiro" que mostra a pulseira automaticamente a cada pedido ao servidor. |
|
|
30
|
+
| **Refresh** | Trocar a pulseira vencida por uma nova sem precisar logar de novo. |
|
|
31
|
+
| **Guard** | O "segurança da porta" de uma tela: sem pulseira válida, manda para o login. |
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
## 1. Login e carregamento da sessão
|
|
36
|
+
|
|
37
|
+
Quando o usuário entra, o app o manda para o login; ao voltar, troca o "código" por uma
|
|
38
|
+
pulseira, guarda na gaveta e busca os dados do usuário (incluindo o que ele pode ver).
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
## 2. Requisição autenticada, 401 e refresh
|
|
45
|
+
|
|
46
|
+
O "porteiro" (interceptor) só mostra a pulseira para o **servidor certo** (o `host`
|
|
47
|
+
configurado) — nunca para endereços de terceiros. Se a pulseira venceu (401), ele tenta
|
|
48
|
+
renovar e refazer o pedido uma vez; se não conseguir, encerra a sessão.
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
> O interceptor da biblioteca **só age quando o `host` está preenchido**. Com `host` vazio,
|
|
53
|
+
> ele fica **inerte** — isso é o que diferencia os dois modos de consumo abaixo.
|
|
54
|
+
|
|
55
|
+
---
|
|
56
|
+
|
|
57
|
+
## 3. Como cada aplicativo consome
|
|
58
|
+
|
|
59
|
+
Se um app que **já tem** autenticação própria também ligasse o porteiro da biblioteca,
|
|
60
|
+
haveria **dois porteiros** renovando a mesma pulseira ao mesmo tempo — o que poderia
|
|
61
|
+
**deslogar o usuário por engano**. Por isso existe a bifurcação:
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
### Matriz de consumo
|
|
66
|
+
|
|
67
|
+
| Aspecto | `front-tcloud` (plataforma) | `iaas` / skeleton (e webcomponents) |
|
|
68
|
+
|---|---|---|
|
|
69
|
+
| Já tinha auth próprio? | **Sim** | **Não** |
|
|
70
|
+
| Configuração `auth` | `host: ''` (vazio) + demais chaves | `host` preenchido + demais chaves |
|
|
71
|
+
| Interceptor da lib | **Inerte** | **Ativo** |
|
|
72
|
+
| Quem trata `Authorization`/`refresh` | O `JwtInterceptor` **próprio** | O **interceptor da lib** |
|
|
73
|
+
| Serviços de auth da lib | Só para **ler a sessão** (permissões/flags) | Por **inteiro** (login, sessão, guard) |
|
|
74
|
+
| Como configura | `provideTCloudUi({ auth })` | `TCloudUiModule.forRoot({ auth })` |
|
|
75
|
+
|
|
76
|
+
---
|
|
77
|
+
|
|
78
|
+
## Notas de segurança
|
|
79
|
+
|
|
80
|
+
- **Sessão em texto plano (plaintext):** o segredo de criptografia AES do lado do cliente foi
|
|
81
|
+
**removido por ajuste de pentest** (uma chave embarcada no navegador não protege de fato).
|
|
82
|
+
A `TCloudUiStorageService` é plaintext por design — **não reintroduzir** segredo no cliente.
|
|
83
|
+
- **Escopo do token:** o interceptor só anexa o `Authorization` a requisições cujo endereço
|
|
84
|
+
**começa com o `host` configurado** — evita vazar a pulseira para terceiros.
|
|
85
|
+
- **Risco residual:** a pulseira fica no `localStorage`, legível por qualquer script da página
|
|
86
|
+
(exposição a XSS). Elevar essa barra (ex.: cookies `httpOnly`) é decisão de arquitetura.
|
|
87
|
+
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
## Onde ver mais
|
|
91
|
+
|
|
92
|
+
- Guia técnico de consumo: `docs/10-nucleo-autenticacao.md`
|
|
93
|
+
- Visão agnóstica com fluxogramas (fonte): `docs/11-fluxo-autenticacao.md`
|
|
94
|
+
- Código do núcleo: `projects/tcloud-ui/src/lib/_services/auth/`
|
|
@@ -23,10 +23,10 @@ export class ExampleComponent {}
|
|
|
23
23
|
|
|
24
24
|
Ou via módulo:
|
|
25
25
|
```ts
|
|
26
|
-
import {
|
|
26
|
+
import { TCloudUiModule } from 'projects/tcloud-ui/src/public-api';
|
|
27
27
|
|
|
28
28
|
@NgModule({
|
|
29
|
-
imports: [
|
|
29
|
+
imports: [TCloudUiModule]
|
|
30
30
|
})
|
|
31
31
|
export class AppModule {}
|
|
32
32
|
```
|