# Einfaches OAuth2 mit Password und Bearer

Lassen Sie uns nun auf dem vorherigen Kapitel aufbauen und die fehlenden Teile hinzufügen, um einen vollständigen Sicherheits-Flow zu erhalten.

## `username` und `password` entgegennehmen

Wir werden **FastAPIs** Sicherheits-Werkzeuge verwenden, um den `username` und das `password` entgegenzunehmen.

/// tip | "Tipp"

Wir verwenden Port 9999 anstelle des Standard-HTTP-Ports 80, damit Sie ihn nicht mit Administratorrechten (`sudo`) ausführen müssen.

///

Erstellen Sie nun die andere Datei `routes.toml`:

```TOML hl_lines="5  12  20"
[http]
  [http.middlewares]

    [http.middlewares.api-stripprefix.stripPrefix]
      prefixes = ["/api/v1"]

  [http.routers]

Und dieselben Informationen aus den Modellen, die in OpenAPI enthalten sind, können zum **Generieren des Client-Codes** verwendet werden.

### Einen TypeScript-Client generieren

Nachdem wir nun die Anwendung mit den Modellen haben, können wir den Client-Code für das Frontend generieren.

#### `openapi-ts` installieren

Sie können `openapi-ts` in Ihrem Frontend-Code installieren mit:

<div class="termy">

Swagger UI erledigt das hinter den Kulissen für Sie, benötigt aber diesen „Umleitungs“-Helfer.

///

### Eine *Pfadoperation* erstellen, um es zu testen

Um nun testen zu können, ob alles funktioniert, erstellen Sie eine *Pfadoperation*:

```Python hl_lines="36-38"
{!../../docs_src/custom_docs_ui/tutorial001.py!}
```

### Es ausprobieren

Wir sehen, dass wir einige Abhängigkeiten benötigen, die an mehreren Stellen der Anwendung verwendet werden.

Also fügen wir sie in ihr eigenes `dependencies`-Modul (`app/dependencies.py`) ein.

Wir werden nun eine einfache Abhängigkeit verwenden, um einen benutzerdefinierten `X-Token`-Header zu lesen:

//// tab | Python 3.9+

```Python hl_lines="3  6-8" title="app/dependencies.py"

können
könnte
machen
man
manche
manchem
manchen
mancher
manches
mein
meine
meinem
meinen
meiner
meines
mit
muss
musste
nach
nicht
nichts
noch
nun
nur
ob
oder
ohne
sehr
sein
seine
seinem
seinen
seiner
seines
selbst
sich
sie
ihnen
sind
so
solche
solchem
solchen
solcher
solches

In diesem Fall wird sie im Pfad `/subapi` gemountet:

```Python hl_lines="11  19"
{!../../docs_src/sub_applications/tutorial001.py!}
```

### Es in der automatischen API-Dokumentation betrachten

Führen Sie nun `uvicorn` mit der Hauptanwendung aus. Wenn Ihre Datei `main.py` lautet, wäre das:

<div class="termy">

```console
$ uvicorn main:app --reload

/// tip | "Tipp"

Die Haupt („offizielle“) Sprache ist Englisch und befindet sich unter `docs/en/`.

///

Führen Sie nun den Live-Server für die Dokumentation auf Spanisch aus:

<div class="termy">

```console
// Verwenden Sie das Kommando „live“ und fügen Sie den Sprach-Code als Argument hinten an
$ python ./scripts/docs.py live es

{!> ../../docs_src/query_params/tutorial003_py310.py!}
```

////

//// tab | Python 3.8+

```Python hl_lines="9"
{!> ../../docs_src/query_params/tutorial003.py!}
```

////

Wenn Sie nun zu:

```
http://127.0.0.1:8000/items/foo?short=1
```

oder

```
http://127.0.0.1:8000/items/foo?short=True
```

oder

```
http://127.0.0.1:8000/items/foo?short=true

///

```Python hl_lines="2  4  8  12  46  64  105  107-115  121-124  128-134  139  155"
{!> ../../docs_src/security/tutorial005.py!}
```

////

Sehen wir uns diese Änderungen nun Schritt für Schritt an.

## OAuth2-Sicherheitsschema

Die erste Änderung ist, dass wir jetzt das OAuth2-Sicherheitsschema mit zwei verfügbaren Scopes deklarieren: `me` und `items`.