Správa ověřování ve statických webových aplikacích

  • 2 min

Webová aplikace nákupního seznamu potřebuje způsob, jak jedinečně identifikovat uživatele a poskytnout jim osobní prostor pro ukládání produktů.

Ověřování je způsob, jakým ověříte identitu uživatele, který se pokouší získat přístup k informačnímu systému. Teď se podíváme na ověřování a na to, jak ho můžete implementovat ve službě Azure Static Web Apps.

Zprostředkovatelé identit

Azure Static Web Apps zjednodušuje ověřování tím, že spravuje ověřování s následujícími poskytovateli:

  • Microsoft Entra ID
  • GitHub
  • X

Všichni zprostředkovatelé ověřování jsou ve výchozím nastavení povoleni. Později se dozvíme, jak můžete omezit zprostředkovatele ověřování pomocí vlastního pravidla směrování.

Systémová složka

Systémová /.auth složka poskytuje přístup ke všem rozhraním API souvisejícím s ověřováním. Tyto koncové body můžete použít k implementaci úplného pracovního postupu ověřování ve vaší aplikaci, včetně přihlášení a odhlášení a přístupu k informacím o uživatelích.

Přihlásit

Následující tabulka uvádí trasu přihlášení specifickou pro poskytovatele, kterou můžete použít ve své aplikaci.

Zprostředkovatel identity Trasa přihlášení
Microsoft Entra ID /.auth/login/aad
GitHub /.auth/login/github
X /.auth/login/x

Pokud se například chcete přihlásit pomocí GitHubu, můžete do webové aplikace zahrnout přihlašovací odkaz s následujícím fragmentem kódu:

<a href="/.auth/login/github">Login</a>

Pokud chcete, aby se uživatel po přihlášení vrátil na konkrétní stránku, můžete také zadat adresu URL v post_login_redirect_uri parametru řetězce dotazu. Příklad:

<a href="/.auth/login/github?post_login_redirect_uri=/products">Login</a>

Odhlášení

Trasa /.auth/logout odhlásí uživatele z webové aplikace. Můžete přidat odkaz na navigaci na webu, aby se uživatel mohl odhlásit, jak je znázorněno v následujícím příkladu.

<a href="/.auth/logout">Log out</a>

Podobně jako u přihlášení můžete zadat adresu URL pro přesměrování po odhlášení pomocí parametru post_logout_redirect_uri řetězce dotazu:

<a href="/.auth/logout?post_logout_redirect_uri=/home">Log out</a>

Přístup k informacím o uživateli

K informacím o uživateli souvisejícím s ověřováním můžete získat přístup prostřednictvím koncového bodu přímého přístupu nebo speciální hlavičky ve funkcích rozhraní API.

Pokud odešlete GET požadavek na trasu /.auth/me , obdržíte objekt JSON s daty aktuálně přihlášeného uživatele. Požadavky od neověřených uživatelů vrátí null.

Následující příklad je příkladem objektu odpovědi.

{
  "identityProvider": "github",
  "userId": "d75b260a64504067bfc5b2905e3b8182",
  "userDetails": "github-user-example",
  "userRoles": [ "anonymous", "authenticated" ]
}

Funkce rozhraní API

Všechny funkce rozhraní API dostupné ve službě Azure Static Web Apps mají přístup ke stejným informacím o uživatelích jako vaše klientská aplikace. Uživatelská data se předávají funkcím x-ms-client-principal v hlavičce HTTP. Data se serializují jako objekt JSON a kódují se v Base64.

Následující ukázková funkce ukazuje, jak číst a vracet informace o uživateli.

module.exports = async function (context, req) {
  const header = req.headers["x-ms-client-principal"];
  const encoded = Buffer.from(header, "base64");
  const decoded = encoded.toString("ascii");

  context.res = {
    body: {
      userInfo: JSON.parse(decoded)
    }
  };
};

Další kroky

V dalším kroku implementujeme v naší aplikaci úplný pracovní postup ověřování.