Szybki start dla frameworków
Po jednej stronie na stos — Next.js, Nuxt, Express i zwykła przeglądarka — i dwa adresy powrotne, które łączą je wszystkie.
Cztery strony, po jednej na stos. Różnią się tylko tym, gdzie leży adres powrotny i kto trzyma instancję klienta; samo logowanie to w każdej z nich ten sam przepływ authorization code z PKCE.
- Zwykła przeglądarka —
dowolny bundler, dowolny framework bez naszego modułu.
@kleora-io/browser. - Next.js — App Router, z tą samą paczką używaną z komponentu klienckiego.
- Nuxt —
@kleora-io/nuxt, z własną stroną powrotu, middleware tras i uwierzytelnionym$fetch. - Express — druga połowa: sprawdzenie w Twoim API tego, czym zalogowała się przeglądarka.
Czego potrzebuje każdy z nich
Aplikacji, a z przeglądu jej środowiska — trzech wartości:
| Wartość | Wygląda tak |
|---|---|
| Issuer | https://acme.sandbox.kleora.eu |
| Client id | client_id klienta Default |
| Adres powrotny | ten, który zaraz zarejestrujesz |
Zakładanie aplikacji opisuje szybki
start. Pracuj na issuerze sandbox: to
jedyne środowisko, które w ogóle przyjmuje adresy powrotne na http://localhost,
a jego użytkownicy nigdy nie dotykają produkcji.
Zarejestruj i /callback, i /auth/callback
Adres powrotny jest porównywany dokładnie — schemat, host, port i ścieżka. Dwie przeglądarkowe paczki montują swój adres powrotny w różnych miejscach:
| Paczka | Gdzie ląduje |
|---|---|
@kleora-io/browser | Tam, gdzie wskażesz w redirectUri. W przykładach jest to /callback. |
@kleora-io/nuxt | /auth/callback — strona dodawana przez moduł, domyślna wartość callbackPath. |
Dlatego na kliencie Default swojego środowiska sandbox zarejestruj oba:
http://localhost:3000/callback
http://localhost:3000/auth/callback
Zarejestrowanie tylko tego, którego akurat używa pierwszy stos, to błąd, który
warto ominąć: następna osoba, która spróbuje modułu dla Nuxt na tej samej
aplikacji, dostanie invalid_redirect_uri przy pierwszym logowaniu — w
aplikacji, która minutę wcześniej działała. Dwa wpisy nic nie kosztują, a ta
awaria kosztuje popołudnie.
Zarejestruj też adres po wylogowaniu — http://localhost:3000/ — bo to tam
logout() odsyła przeglądarkę, a ta lista też jest porównywana dokładnie.
@kleora-io/nuxt domyślnie ustawia returnTo na korzeń witryny, więc akurat
bez tego jednego wpisu się nie obejdzie.
Produkcja różni się jedną rzeczą, na którą wpada się wcześnie
Środowisko produkcyjne przyjmuje wyłącznie adresy powrotne https://. Wpisów z
http://localhost, na których pracujesz, nie da się tam przenieść — produkcja ma
własną listę, na własnym kliencie, z Twoim prawdziwym adresem.