{* ../../docs_src/response_model/tutorial003_01_py310.py hl[7:10,13:14,18] *}

Com isso, temos suporte de ferramentas, de editores e mypy, pois este código está correto em termos de tipos, mas também obtemos a filtragem de dados do FastAPI.

Como isso funciona? Vamos verificar. 🤓

### Anotações de tipo e ferramentas

* e lá, encontre o módulo `dependencies` (o arquivo em `app/dependencies.py`)...
* e dele, importe a função `get_token_header`.

Isso se referiria a algum pacote acima de `app/`, com seu próprio arquivo `__init__.py`, etc. Mas não temos isso. Então, isso geraria um erro em nosso exemplo. 🚨

Mas agora você sabe como funciona, então você pode usar importações relativas em seus próprios aplicativos, não importa o quão complexos eles sejam. 🤓

Ao validar os dados com o Pydantic nós podemos garantir que temos, por exemplo, exatamente uma `list` de `str` com os escopos e uma `str` com o `username`.

No lugar de, por exemplo, um `dict`, ou alguma outra coisa, que poderia quebrar a aplicação em algum lugar mais tarde, tornando isso um risco de segurança.

E essas mesmas informações dos modelos que estão incluídas no OpenAPI são o que pode ser usado para **gerar o código do cliente**.

### Gerar um Cliente TypeScript

Agora que temos o app com os modelos, podemos gerar o código do cliente para o frontend.

#### Instalar o `openapi-ts`

Você pode instalar o `openapi-ts` no seu código frontend com:

<div class="termy">

```console

# OAuth2 com Senha (e hashing), Bearer com tokens JWT

Agora que temos todo o fluxo de segurança, vamos tornar a aplicação realmente segura, usando tokens <abbr title="JSON Web Tokens">JWT</abbr> e hashing de senhas seguras.

Este código é algo que você pode realmente usar na sua aplicação, salvar os hashes das senhas no seu banco de dados, etc.

Vamos começar de onde paramos no capítulo anterior e incrementá-lo.

## Sobre o JWT

```Python
user_in = UserIn(username="john", password="secret", email="******@****.***")
```

e depois chamarmos:

```Python
user_dict = user_in.dict()
```

agora temos um `dict` com os dados na variável `user_dict` (é um `dict` em vez de um objeto de modelo Pydantic).

E se chamarmos:

```Python
print(user_dict)
```

teríamos um `dict` Python com:

```Python
{

<img src="/img/tutorial/dependencies/image02.png">

## Pegando um Atalho

Mas você pode ver que temos uma repetição do código neste exemplo, escrevendo `CommonQueryParams` duas vezes:

//// tab | Python 3.8+

```Python
commons: Annotated[CommonQueryParams, Depends(CommonQueryParams)]
```

////

Por exemplo, no modelo `Image` nós temos um campo `url`, nós podemos declara-lo como um `HttpUrl` do Pydantic invés de como uma `str`:

{* ../../docs_src/body_nested_models/tutorial005.py hl[4,10] *}

Então, o frontend (que roda no navegador) tentaria acessar `/openapi.json` e não conseguiria obter o OpenAPI schema.

Como temos um proxy com um prefixo de caminho de `/api/v1` para nossa aplicação, o frontend precisa buscar o OpenAPI schema em `/api/v1/openapi.json`.

```mermaid
graph LR

browser("Browser")

     <span style="background-color:#007166"><font color="#D3D7CF"> INFO </font></span>  Application startup complete.
```

</div>

Na saída, temos:

```hl_lines="4"
INFO:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
```

Essa linha mostra a URL onde a sua aplicação está sendo servida, que nesse caso é a sua máquina local.

### Confira