Přeskočit na hlavní obsah

S4 — Přihlášení

Screen IDS4
Typ◇ Sekundární
FázeMVP
PRDPRD-02: Klientská zóna
Odhad4 h
Účel obrazovky

OAuth-first přihlášení. Obrazovka může být standalone (z profilu, P9) nebo late login (z checkout flow v S2). Hlavní cíl: rychlé přihlášení přes Apple, Google nebo Facebook, s fallbackem na email/heslo.

Content Priority​

  1. OAuth tlačítka — prominentně nahoře: Apple Sign In, Google, Facebook (full-width, ikona + text) OAuth Button
  2. Separator — „Nebo se přihlaste emailem" Divider
  3. Email pole — text input s email keyboard Text Input
  4. Heslo pole — password input (skrytý text) Password Input
  5. „Zapamatovat si mě" — toggle/checkbox Checkbox
  6. „Zapomenuté heslo" — text link Ghost/Text Button
  7. CTA „Přihlásit se" — primary button Primary Button
  8. „Nemáte účet? Registrovat se" — secondary CTA, odkaz na S5 — Registrace Ghost/Text Button
  9. Close / Back — pro late login modal, zavření bez přihlášení Back Button

Interakce​

TriggerAkceCíl
Tap na OAuth tlačítkoOtevření provider auth (in-app browser / Safari)Po úspěchu: redirect back, prefilled profil, zavření modalu
Tap „Přihlásit se" (email)Validace email + heslo, API loginÚspěch → zavření, návrat do checkout / profil
Tap „Zapomenuté heslo"Odeslání reset linku na emailToast „Odkaz odeslán na váš email"
Tap „Registrovat se"Navigace na registraciS5 — Registrace
OAuth zrušeno uživatelemZavření auth oknaNávrat na S4, žádná změna
Back / CloseZavření bez přihlášeníNávrat na S2 — Osobní údaje nebo P9 — Účet

Stavy​

StavPopisVizuální chování
DefaultPrázdný formulářOAuth tlačítka aktivní, formulář prázdný
OAuth loadingČeká na redirect od provideraSpinner overlay nebo loading na OAuth tlačítku
Login errorŠpatné heslo / neplatný emailInline error „Nesprávné přihlašovací údaje"
Account lockedPříliš mnoho pokusůError „Účet byl dočasně uzamčen, zkuste za 15 minut"
Forgot password sentReset link odeslánSuccess toast, možnost znovu zkusit přihlášení

Edge Cases a Error States​

ScénářŘešení
OAuth zrušeno uživatelemTiše návrat na S4, žádný error (běžné chování)
Email není v systému„Účet s tímto emailem neexistuje — zaregistrujte se" + link na S5
Příliš mnoho pokusůCooldown 15 min, zobrazení zbývajícího času
Úspěšné přihlášení poprvéNabídka „Povolit Face ID / Touch ID pro rychlé přihlášení" (optional)
Biometric login (po prvním)Pokud povoleno: Face ID/Touch ID jako primární, single-tap přihlášení
Offline během OAuth„Pro přihlášení je třeba připojení k internetu"

Mobilní patterny a odlišení od webu​

Co přebíráme​

  • OAuth + email/heslo jako fallback
  • Zapomenuté heslo flow
  • Odkaz na registraci

Co děláme jinak​

  • OAuth-first layout — Apple, Google, Facebook jako velké tlačítka nahoře (na webu často menší)
  • Face ID / Touch ID jako primární — po prvním přihlášení nabídnuto, pak single-tap login
  • Native OAuth flow — použít ASWebAuthenticationSession (iOS) / Chrome Custom Tabs (Android) pro plynulý return
  • Keyboard type — email klávesnice pro email pole

Aplikované patterny​

  • iOS: ASAuthorizationAppleIDButton, ASWebAuthenticationSession pro OAuth, LAContext pro Face ID / Touch ID
  • Android: Credential Manager pro OAuth, BiometricPrompt pro biometric login, Custom Tabs pro OAuth redirect

API Data​

POST/account/loginPOST/account/login-by-providerPOST/account/forgotten-password-preparePOST/account/forgotten-password-finish
OperaceEndpointTriggerPoznámka
Email + heslo loginPOST /account/loginTap „Přihlásit se"Vrací JWT token
OAuth loginPOST /account/login-by-providerTap OAuth tlačítkoPodporuje Apple, Google, Facebook
Zapomenuté heslo (příprava)POST /account/forgotten-password-prepareTap „Zapomenuté heslo"Odešle reset email
Zapomenuté heslo (dokončení)POST /account/forgotten-password-finishDeep link z emailuNastavení nového hesla
CoreAPI poznatek

Autentizace je JWT per session (POST /token/create pro anonymní session, POST /account/login pro přihlášení). OAuth provider se předává jako parametr v login-by-provider. Po přihlášení se JWT token používá ve všech dalších API voláních.

Reference — Aktuální web​

SCR-WEB-34: OAuth — Google, Facebook, Seznam, email/heslo form
Web ColosseumSCR-WEB-34OAuth — Google, Facebook, Seznam, email/heslo form

Reference — CineStar benchmark​

SCR-CS-13: OAuth tlačítka, email/heslo, CineStar Club, tab bar
CineStar benchmarkSCR-CS-13OAuth tlačítka, email/heslo, CineStar Club, tab bar
Inspirace z CineStar

CineStar má OAuth prominently nahoře a CineStar Club (věrnostní program) jako součást přihlášení. Colosseum F1 přidá věrnostní program — podobný pattern.