Zarządzanie uwierzytelnianiem w usłudze Static Web Apps
Aplikacja internetowa listy zakupów wymaga sposobu unikatowego identyfikowania użytkowników i udostępniania im osobistego miejsca do przechowywania produktów.
Uwierzytelnianie to sposób weryfikacji tożsamości użytkownika, który próbuje uzyskać dostęp do systemu informacyjnego. Teraz przyjrzymy się uwierzytelnianiu i sposobom jej implementacji w usłudze Azure Static Web Apps.
Dostawcy tożsamości
Usługa Azure Static Web Apps usprawnia uwierzytelnianie, zarządzając uwierzytelnianiem przy użyciu następujących dostawców:
- Microsoft Entra ID
- GitHub
- X
Wszyscy dostawcy uwierzytelniania są domyślnie włączeni. Później zobaczymy, jak można ograniczyć dostawcę uwierzytelniania za pomocą niestandardowej reguły trasy.
Folder systemowy
Folder /.auth systemowy zapewnia dostęp do wszystkich interfejsów API związanych z uwierzytelnianiem. Tych punktów końcowych można użyć do zaimplementowania pełnego przepływu pracy uwierzytelniania w aplikacji, w tym logowania i wylogowywania się oraz uzyskiwania dostępu do informacji o użytkowniku.
Zaloguj się
W poniższej tabeli wymieniono trasę logowania specyficzną dla dostawcy, której można użyć w aplikacji.
| Dostawca tożsamości | Trasa logowania |
|---|---|
| Microsoft Entra ID | /.auth/login/aad |
| GitHub | /.auth/login/github |
| X | /.auth/login/x |
Aby na przykład zalogować się za pomocą usługi GitHub, możesz dołączyć link logowania do aplikacji internetowej przy użyciu następującego fragmentu kodu:
<a href="/.auth/login/github">Login</a>
Jeśli chcesz, aby użytkownik wrócił do określonej strony po zalogowaniu, możesz również podać adres URL w post_login_redirect_uri parametrze ciągu zapytania. Na przykład:
<a href="/.auth/login/github?post_login_redirect_uri=/products">Login</a>
Wyloguj
Trasa /.auth/logout wyloguje użytkowników z aplikacji internetowej. Możesz dodać link do nawigacji witryny, aby umożliwić użytkownikowi wylogowanie się, jak pokazano w poniższym przykładzie.
<a href="/.auth/logout">Log out</a>
Podobnie jak w przypadku logowania, możesz podać adres URL do przekierowania do po wylogowaniu przy użyciu parametru post_logout_redirect_uri ciągu zapytania:
<a href="/.auth/logout?post_logout_redirect_uri=/home">Log out</a>
Uzyskiwanie dostępu do informacji o użytkownikach
Dostęp do informacji użytkownika związanych z uwierzytelnianiem można uzyskać za pośrednictwem punktu końcowego dostępu bezpośredniego lub specjalnego nagłówka w funkcjach interfejsu API.
Jeśli wyślesz GET żądanie do /.auth/me trasy, otrzymasz obiekt JSON z danymi dla aktualnie zalogowanego użytkownika. Żądania nieuwierzytelnionych użytkowników zwracają wartość null.
Poniższy przykład to przykładowy obiekt odpowiedzi.
{
"identityProvider": "github",
"userId": "d75b260a64504067bfc5b2905e3b8182",
"userDetails": "github-user-example",
"userRoles": [ "anonymous", "authenticated" ]
}
Funkcje interfejsu API
Wszystkie funkcje interfejsu API dostępne w usłudze Azure Static Web Apps mają dostęp do tych samych informacji o użytkowniku co aplikacja kliencka. Dane użytkownika są przekazywane do funkcji w nagłówku x-ms-client-principal HTTP. Dane są serializowane jako obiekt JSON i zakodowane w formacie Base64.
Poniższa przykładowa funkcja pokazuje, jak odczytywać i zwracać informacje o użytkowniku.
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)
}
};
};
Następne kroki
Następnie zaimplementujemy kompletny przepływ pracy uwierzytelniania w naszej aplikacji.