Používání API 3

82. hodina MVOP WBF

Matěj Cajthaml — SSPŠ

©

Opakování!

Blooklet!

Klikačka

Závěrečná práce

Json Web Token

  • = jwt
  • způsob ověření identity na internetu mezi dvěma identity
  • nejčastěji vydává server a používá jen klient
  • dlouhý string rozdělen do několika částí

Vzhled JWT

hhhhhhh.ppppppp.sssssss
  • h: BASE64 hlavička (headers)
  • p: BASE64 tělo (payload)
  • s: podpis h a p

Když je hlavička v BASE64, jaký formát uvnitř používá pro reprezentaci dat?

Hlavička

  • ukládá informaci o samotném jwt
  • že se jedná o JWT
  • jaký hashovací algoritmus byl použit (HMAC, RSA, ECDSA, ...)

Tělo

  • ukládá informaci o datech, které se s JWT přesouvájí
  • často údaje, které potřebuje server k ověření — jaké?

Typ JWT, šifrování a tělo je vždy veřejné. Má to nějaké nevýhody? Co výhody?

Jaké informace v sobě uchovává JWT token používaný na portálu?

Život tokenu

  • server připraví jaké informace chce uložit
  • server vytvoří JWT s daty, který podepíše (heslem, certifikátem)
  • server odešle token klientovi
  • klient si token uloží a používá ho na požadavky
  • server při obdržení tokenu jej validuje, zda jej podepsat opravdu on (heslem, certifikátem)

JWT si server pro jednotlivé uživatele neukládá! Proč?

Jaké výhody má JWT?

Jaké problémy má JWT?

Speciální hodnoty

  • většinou kontrolují balíčky
  • v tělíčku
  • iat — issued at
  • exp — expiration date

Balíček JWT

  • na npm existuje balíček jsonwebtoken
  • validace (vrácení payload): require("jsonwebtoken").verify(token, key)
  • podepsání: require("jsonwebtoken").sign(data, key)

  • https://jwt.io

JWT používá Morsmordre pro přihlášení uživatel (stage 2).

Velmi podobně funguje například OAuth 2.0, který je standardem a povíme si o něm později.

Co je to Framework?

Znáte nějaký CSS framework?

Framework

  • předpřipravené funkcionality
  • design, komponenty, ...

K čemu se frameworky nehodí?

Pro Vue existuje nespočet frameworků, pro Material Design existuje Vuetify a Quasar.

Vue frameworky

Práce

Nalezněte nějaké frameworky pro Vue. Najděte nějaký, který se Vám designově libí. Podívejte se, jak se instaluje a jak se například používají komponenty.

Ukázka Vuetify!

Morsmordre 4

Práce

Práci jsme začali minulou hodinu, pokračujte v ní.

Cílem je použít nějaký framework pro design a funkčnosti.

Funkčnosti:

  • zobrazení listů a jejich úkolů
  • označení úkolů jako hotových
  • přidání, odstranění a editace úkolů
  • přidání, odstranění a editace listů

Dnešní bodový základ jsou 4 b.

Děkuji za pozornost!

  • matej.cajthaml@ssps.cz
  • https://ssps.cajthaml.eu/