Jednou z mých oblíbených funkcí (nyní obecně dostupných) Azure Static Web Apps (SWA) je to, že na úrovni Standard nyní můžete poskytnout vlastního poskytovatele OpenID Connect (OIDC). To vám dává mnohem větší kontrolu nad tím, kdo může a kdo nemůže přistupovat k vaší aplikaci.
V tomto příspěvku se chci podívat na to, jak můžeme použít Auth0 a poskytovatele OIDC pro statické webové aplikace.
K tomu budete potřebovat účet Auth0, takže pokud ho ještě nemáte, zaregistrujte se a možná si přečtete jejich dokumenty, abyste měli všechno.
Vytvoření statické webové aplikace
Pro tuto ukázku použijeme šablonu React, ale to, co popisujeme, není specifické pro React, bude použitelné kdekoli.
Jakmile aplikaci vytvoříte, budeme muset nastavit konfigurační soubor, takže přidejte staticwebapp.config.json do kořenového adresáře úložiště.
Tento konfigurační soubor se používá pro ovládání mnoha věcí v našem SWA, ale nejdůležitější pro nás bude auth sekce. Udělejme pro to kostru:
{
"auth": {
"identityProviders": {
"customOpenIdConnectProviders": {}
}
}
}
Skvělý! Nyní je čas nastavit Auth0.
Vytvoření aplikace Auth0
Přihlaste se do řídicího panelu Auth0 a přejděte do sekce Aplikace na portálu:
Odtud vybereme možnost Vytvořit aplikaci , pojmenujte jej a vyberte Běžné webové aplikace jako typ aplikace . Možná budete v pokušení vybrat možnost SPA, protože vytváříme webovou aplikaci JavaScript, ale důvod, proč ji nepoužíváme, je ten, že ověření SWA nezpracovává vaše aplikace samotná, ale základní služba Azure. , což je „webová aplikace“, která pak zpřístupňuje informace, které potřebujete.
Nakonfigurujte svou aplikaci Auth0
Po vytvoření aplikace je čas ji nakonfigurovat. Přeskočíme Rychlý start možnosti, protože opravdu děláme něco více na míru. Místo toho přejděte do Nastavení protože budeme muset aplikaci poskytnout některé možnosti přesměrování pro přihlášení/odhlášení, aby SWA vědělo, že jste se přihlásili, a mohlo rozbalit základní uživatelské informace.
Pro URI přesměrování přihlášení budete muset přidat https://<hostname>/.auth/login/auth0 pro URI přihlášení k aplikaci , https://<hostname>/.auth/login/auth0/callback pro Povolené adresy URL zpětného volání a pro Povolené adresy URL pro odhlášení přidejte https://<hostname>/.auth/logout/auth0/callback . Pokud jste ještě nenasadili Azure, s tímto krokem si zatím nedělejte starosti, uděláme to, až bude SWA vytvořen.
Rychlá poznámka – auth0 hodnota zde bude, jak pojmenujeme poskytovatele v staticwebapp.config.json , takže to může být cokoli chcete, jen rád používám název poskytovatele, aby byla konfigurace snadno čitelná.
Přejděte dolů a klikněte na Uložit změny a je čas dokončit náš konfigurační soubor SWA.
Dokončení našich nastavení
S nastavením naší aplikace Auth0 je čas dokončit náš konfigurační soubor, aby jej mohl používat. Přidáme novou konfiguraci pod customOpenIdConnectProviders pro Auth0 a bude obsahovat dvě základní informace, informace o tom, jak zaregistrovat poskytovatele OIDC, a některé přihlašovací údaje o tom, jak s poskytovatelem hovořit.
Uvnitř registration , přidáme clientIdSettingName pole, které bude ukazovat na položku v nastavení aplikace, kterou má SWA. Dále budeme potřebovat clientCredential objekt, který má clientSecretSettingName to je záznam pro tajný klíč klienta OIDC. Nakonec poskytneme openIdConnectConfiguration s wellKnownOpenIdConfiguration koncový bod, který je https://<your_auth0_domain>/.well-known//openid-configuration .
Konfigurace by nyní měla vypadat takto:
{
"auth": {
"identityProviders": {
"customOpenIdConnectProviders": {
"auth0": {
"registration": {
"clientIdSettingName": "AUTH0_ID",
"clientCredential": {
"clientSecretSettingName": "AUTH0_SECRET"
},
"openIdConnectConfiguration": {
"wellKnownOpenIdConfiguration": "https://aaronpowell.au.auth0.com/.well-known/openid-configuration"
}
}
}
}
}
}
}
Používám AUTH0_ID a AUTH0_SECRET jako názvy položek, které vložím do nastavení aplikace.
Všechny tyto informace řeknou SWA, jak podat žádost proti správné aplikaci v Auth0, ale stále jí musíme sdělit, jak žádost podat a zpracovat odpověď. To je to, co používáme login config pro. S login config, poskytujeme nameClaimType , což je plně kvalifikovaná cesta k tvrzení, které chceme, aby SWA používal jako userDetails pole informací o uživateli. Obecně řečeno, budete chtít, aby to bylo http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name , ale pokud je ve vašich nárocích odpovědi vlastní pole, které chcete použít, nezapomeňte je uvést. Další část konfigurace, kterou zde potřebujeme, je to, jaké rozsahy požadujeme od Auth0. Pro SWA potřebujete pouze openid a profile jako rozsahy, pokud nechcete použít nameClaimType jiné než standardní.
Dokončeme naši konfiguraci SWA:
{
"auth": {
"identityProviders": {
"customOpenIdConnectProviders": {
"auth0": {
"registration": {
"clientIdSettingName": "AUTH0_ID",
"clientCredential": {
"clientSecretSettingName": "AUTH0_SECRET"
},
"openIdConnectConfiguration": {
"wellKnownOpenIdConfiguration": "https://aaronpowell.au.auth0.com/.well-known/openid-configuration"
}
},
"login": {
"nameClaimType": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
"scopes": ["openid", "profile"]
}
}
}
}
}
}
S připravenou konfigurací můžete vytvořit SWA v Azure a zahájit nasazení (nezapomeňte aktualizovat aplikaci Auth0 pomocí zpětných volání pro přihlášení/odhlášení). Když je prostředek vytvořen v Azure, zkopírujte ID klienta a Tajný klíč klienta z Auth0 a vytvořte nastavení aplikace v Azure pomocí názvů v konfiguraci a hodnot z Auth0.
Pomocí poskytovatele
Jakmile je poskytovatel zaregistrován v konfiguračním souboru, je použitelný stejně jako ostatní poskytovatelé, které SWA nabízí, s přihlašovacím jménem /.auth/login/<provider_name> , což je v tomto případě provider_name je auth0 . Uživatelské informace pak budou standardně vystaveny jak komponentě webu, tak komponentě API.
Pokud vytváříte aplikaci React, podívejte se na mého pomocníka React auth a pro API je k dispozici společník.
Závěr
Opravdu se mi líbí, že s GA statických webových aplikací nyní můžeme s platformou používat vlastní poskytovatele OIDC. Díky tomu je mnohem snazší mít řízený uživatelský přístup a integraci se složitějším autorizačním příběhem v případě potřeby. Nastavení pomocí Auth0 zabere pouze několik řádků konfigurace.
Můžete se podívat na úplnou ukázku kódu na mém GitHubu a živou ukázku zde (ale své přihlašovací údaje Auth0 vám nedávám 😝).