Konfigurowanie uwierzytelniania w przykładowej aplikacji jednostronicowej przy użyciu usługi Azure AD B2C

Artykuł
01/11/2024

W tym artykule użyto przykładowej aplikacji jednostronicowej JavaScript (SPA), aby zilustrować sposób dodawania uwierzytelniania usługi Azure Active Directory B2C (Azure AD B2C) do Twoich spAs.

Omówienie

OpenID Połączenie (OIDC) to protokół uwierzytelniania oparty na protokole OAuth 2.0. Można go użyć do bezpiecznego logowania użytkownika do aplikacji. Ten przykład SPA używa MSAL.js i przepływu PKCE OIDC. MSAL.js to biblioteka udostępniana przez firmę Microsoft, która upraszcza dodawanie obsługi uwierzytelniania i autoryzacji do spAs.

Przepływ logowania obejmuje następujące kroki:

Użytkownicy przechodzą do aplikacji internetowej i wybierają pozycję Zaloguj się.
Aplikacja inicjuje żądanie uwierzytelniania i przekierowuje użytkowników do usługi Azure AD B2C.
Użytkownicy zarejestrują się lub zalogują się i zresetuj hasło. Alternatywnie mogą zalogować się przy użyciu konta społecznościowego.
Po zalogowaniu użytkowników usługa Azure AD B2C zwraca kod autoryzacji do aplikacji.
Aplikacja jednostronicowa weryfikuje token identyfikatora, odczytuje oświadczenia, a z kolei umożliwia użytkownikom wywoływanie chronionych zasobów i interfejsów API.

Omówienie rejestracji aplikacji

Aby umożliwić aplikacji logowanie się za pomocą usługi Azure AD B2C i wywoływanie internetowego interfejsu API, należy zarejestrować dwie aplikacje w katalogu usługi Azure AD B2C.

Rejestracja aplikacji internetowej umożliwia aplikacji logowanie się za pomocą usługi Azure AD B2C. Podczas rejestracji należy określić identyfikator URI przekierowania. Identyfikator URI przekierowania to punkt końcowy, do którego użytkownicy są przekierowywani przez usługę Azure AD B2C po zakończeniu uwierzytelniania za pomocą usługi Azure AD B2C. Proces rejestracji aplikacji generuje identyfikator aplikacji, znany również jako identyfikator klienta, który jednoznacznie identyfikuje twoją aplikację.
Rejestracja internetowego interfejsu API umożliwia aplikacji wywoływanie bezpiecznego internetowego interfejsu API. Rejestracja obejmuje zakresy internetowego interfejsu API. Zakresy umożliwiają zarządzanie uprawnieniami do chronionych zasobów, takich jak internetowy interfejs API. Przyznasz aplikacji internetowej uprawnienia do zakresów internetowego interfejsu API. Po zażądaniu tokenu dostępu aplikacja określa żądane uprawnienia w parametrze zakresu żądania.

Architektura i rejestracje aplikacji przedstawiono na poniższym diagramie:

Diagram of a web app with web API call registrations and tokens.

Wywoływanie do internetowego interfejsu API

Po zakończeniu uwierzytelniania użytkownicy wchodzą w interakcję z aplikacją, która wywołuje chroniony internetowy interfejs API. Internetowy interfejs API używa uwierzytelniania tokenu elementu nośnego. Token elementu nośnego to token dostępu uzyskany przez aplikację z usługi Azure AD B2C. Aplikacja przekazuje token w nagłówku autoryzacji żądania HTTPS.

Authorization: Bearer <access token>

Jeśli zakres tokenu dostępu nie jest zgodny z zakresami internetowego interfejsu API, biblioteka uwierzytelniania uzyskuje nowy token dostępu z poprawnymi zakresami.

Wylogowywanie przepływu

Przepływ wylogowania obejmuje następujące kroki:

W aplikacji użytkownicy wyloguj się.
Aplikacja czyści obiekty sesji, a biblioteka uwierzytelniania czyści pamięć podręczną tokenów.
Aplikacja przenosi użytkowników do punktu końcowego wylogowania usługi Azure AD B2C, aby zakończyć sesję usługi Azure AD B2C.
Użytkownicy są przekierowywani z powrotem do aplikacji.

Wymagania wstępne

Komputer z systemem:

Visual Studio Code lub inny edytor kodu.
Środowisko uruchomieniowe Node.js

Krok 1. Konfigurowanie przepływu użytkownika

Gdy użytkownicy próbują zalogować się do aplikacji, aplikacja uruchamia żądanie uwierzytelniania do punktu końcowego autoryzacji za pośrednictwem przepływu użytkownika. Przepływ użytkownika definiuje i kontroluje środowisko użytkownika. Po zakończeniu przepływu użytkownika usługa Azure AD B2C generuje token, a następnie przekierowuje użytkowników z powrotem do aplikacji.

Jeśli jeszcze tego nie zrobiono, utwórz przepływ użytkownika lub zasady niestandardowe. Powtórz kroki, aby utworzyć trzy oddzielne przepływy użytkownika w następujący sposób:

Połączony przepływ logowania i rejestracji użytkownika, taki jak susi. Ten przepływ użytkownika obsługuje również środowisko Nie pamiętasz hasła .
Przepływ użytkownika do edycji profilu, taki jak edit_profile.
Przepływ użytkownika resetowania hasła, taki jak reset_password.

Usługa Azure AD B2C poprzedza B2C_1_ nazwę przepływu użytkownika. Na przykład, susi staje się B2C_1_susi.

Krok 2. Rejestrowanie spa i interfejsu API

W tym kroku utworzysz spa i rejestrację aplikacji internetowego interfejsu API, a następnie określisz zakresy internetowego interfejsu API.

Krok 2.1. Rejestrowanie aplikacji internetowego interfejsu API

Aby utworzyć rejestrację aplikacji internetowego interfejsu API (identyfikator aplikacji: 2), wykonaj następujące kroki:

Zaloguj się w witrynie Azure Portal.
Upewnij się, że używasz katalogu zawierającego dzierżawę usługi Azure AD B2C. Wybierz ikonę Katalogi i subskrypcje na pasku narzędzi portalu.
W ustawieniach portalu | Strona Katalogi i subskrypcje , znajdź katalog usługi Azure AD B2C na liście Nazwa katalogu, a następnie wybierz pozycję Przełącz.
W witrynie Azure Portal wyszukaj i wybierz pozycję Azure AD B2C.
Wybierz pozycję Rejestracje aplikacji, a następnie wybierz pozycję Nowa rejestracja.
W polu Nazwa wprowadź nazwę aplikacji (na przykład my-api1). Pozostaw wartości domyślne dla identyfikatora URI przekierowania i obsługiwanych typów kont.
Wybierz pozycję Zarejestruj.
Po zakończeniu rejestracji aplikacji wybierz pozycję Przegląd.
Zarejestruj wartość identyfikatora aplikacji (klienta) do późniejszego użycia podczas konfigurowania aplikacji internetowej.

Krok 2.2. Konfigurowanie zakresów

Wybierz utworzoną aplikację my-api1 (identyfikator aplikacji: 2), aby otworzyć stronę Przegląd.
W obszarze Zarządzanie wybierz pozycję Uwidaczniaj interfejs API.
Obok pozycji Identyfikator URI identyfikatora aplikacji wybierz link Ustaw . Zastąp wartość domyślną (GUID) unikatową nazwą (na przykład tasks-api), a następnie wybierz pozycję Zapisz.

Gdy aplikacja internetowa żąda tokenu dostępu dla internetowego interfejsu API, powinien dodać ten identyfikator URI jako prefiks dla każdego zakresu zdefiniowanego dla interfejsu API.
W obszarze Zakresy zdefiniowane przez ten interfejs API wybierz pozycję Dodaj zakres.
Aby utworzyć zakres definiujący dostęp do odczytu do interfejsu API:
1. W polu Nazwa zakresu wprowadź ciąg tasks.read.
2. W przypadku Administracja nazwy wyświetlanej zgody wprowadź odczyt dostępu do interfejsu API zadań.
3. Aby uzyskać Administracja opis zgody, wprowadź zezwalanie na dostęp do odczytu do interfejsu API zadań.
Wybierz Dodaj zakres.
Wybierz pozycję Dodaj zakres, a następnie dodaj zakres definiujący dostęp do zapisu do interfejsu API:
1. W polu Nazwa zakresu wprowadź ciąg tasks.write.
2. W przypadku Administracja nazwy wyświetlanej zgody wprowadź wartość Write access to tasks API (Zapis dostępu do interfejsu API zadań).
3. Aby uzyskać Administracja opis zgody, wprowadź zezwalanie na dostęp do zapisu do interfejsu API zadań.
Wybierz Dodaj zakres.

Krok 2.3: Rejestrowanie SPA

Aby utworzyć rejestrację SPA, wykonaj następujące kroki:

Zaloguj się w witrynie Azure Portal.
Jeśli masz dostęp do wielu dzierżaw, wybierz ikonę Ustawienia w górnym menu, aby przełączyć się do dzierżawy usługi Azure AD B2C z menu Katalogi i subskrypcje.
Wyszukaj i wybierz Azure AD B2C.
Wybierz pozycję Rejestracje aplikacji, a następnie wybierz pozycję Nowa rejestracja.
Wprowadź nazwę aplikacji (na przykład MyApp).
W obszarze Obsługiwane typy kont wybierz Konta w dowolnym dostawcy tożsamości lub katalogu organizacyjnym (do uwierzytelniania użytkowników za pomocą przepływów użytkownika).
W obszarze Identyfikator URI przekierowania wybierz pozycję Aplikacja jednostronicowa (SPA), a następnie w polu Adres URL wprowadź .http://localhost:6420
W obszarze Uprawnienia zaznacz pole wyboru Udziel zgody administratora na uprawnienia do otwierania i dostępu w trybie offline.
Wybierz pozycję Zarejestruj.

Zarejestruj identyfikator aplikacji (klienta) do późniejszego użycia podczas konfigurowania aplikacji internetowej.

Screenshot of the web app Overview page for recording your web application ID.

Krok 2.4. Włączanie niejawnego przepływu udzielania

Jeśli aplikacja SPA używa biblioteki MSAL.js 1.3 lub starszej oraz niejawnego przepływu udzielania lub skonfigurujesz https://jwt.ms/ aplikację do testowania przepływu użytkownika lub zasad niestandardowych, musisz włączyć niejawny przepływ udzielania w rejestracji aplikacji:

W menu po lewej stronie w obszarze Zarządzanie wybierz pozycję Uwierzytelnianie.
W obszarze Niejawne udzielanie i przepływy hybrydowe zaznacz pola wyboru Tokeny dostępu (używane dla przepływów niejawnych) i Tokeny identyfikatorów (używane w przypadku przepływów niejawnych i hybrydowych).
Wybierz pozycję Zapisz.

Jeśli aplikacja używa biblioteki MSAL.js 2.0 lub nowszej, nie włączaj niejawnego przyznawania przepływu, ponieważ biblioteka MSAL.js 2.0+ obsługuje przepływ kodu autoryzacji przy użyciu protokołu PKCE. Aplikacja SPA w tym artykule używa przepływu PKCE, więc nie musisz włączać niejawnego przepływu przyznawania.

Krok 2.5. Udzielanie uprawnień

Aby udzielić aplikacji (identyfikator aplikacji: 1) uprawnień, wykonaj następujące kroki:

Wybierz Rejestracje aplikacji, a następnie wybierz utworzoną aplikację (identyfikator aplikacji: 1).
W obszarze Zarządzanie wybierz pozycję Uprawnienia interfejsu API.
W obszarze Skonfigurowane uprawnienia wybierz pozycję Dodaj uprawnienie.
Wybierz kartę Moje interfejsy API.
Wybierz interfejs API (identyfikator aplikacji: 2), do którego ma zostać udzielona aplikacja internetowa. Na przykład wprowadź ciąg my-api1.
W obszarze Uprawnienie rozwiń węzeł zadania, a następnie wybierz zdefiniowane wcześniej zakresy (na przykład tasks.read i tasks.write).
Wybierz Przyznaj uprawnienia.
Wybierz pozycję Udziel zgody administratora dla< swojej nazwy> dzierżawy.
Wybierz opcję Tak.
Wybierz pozycję Odśwież, a następnie sprawdź, czy w obszarze Stan dla obu zakresów jest wyświetlana wartość Przyznane dla ... .
Z listy Skonfigurowane uprawnienia wybierz zakres, a następnie skopiuj pełną nazwę zakresu.

Krok 3. Pobieranie przykładowego kodu SPA

W tym przykładzie pokazano, jak jednostronicowa aplikacja może używać usługi Azure AD B2C na potrzeby rejestracji i logowania użytkownika. Następnie aplikacja uzyskuje token dostępu i wywołuje chroniony internetowy interfejs API.

Aby uzyskać przykładowy kod SPA, możesz wykonać jedną z następujących czynności:

Pobierz plik zip.

Sklonuj przykład z usługi GitHub, uruchamiając następujące polecenie:

git clone https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa.git

Krok 3.1. Aktualizowanie przykładu SPA

Teraz, po uzyskaniu przykładu SPA, zaktualizuj kod przy użyciu wartości usługi Azure AD B2C i internetowego interfejsu API. W folderze przykładowym w folderze App otwórz pliki JavaScript wymienione w poniższej tabeli, a następnie zaktualizuj je odpowiednimi wartościami.

Plik	Klucz	Wartość
authConfig.js	clientId	Identyfikator SPA z kroku 2.3.
policies.js	nazwy	Przepływy użytkownika lub zasady niestandardowe utworzone w kroku 1.
policies.js	Władze	Przepływy użytkowników usługi Azure AD B2C lub niestandardowe urzędy zasad, takie jak `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>`. Zastąp `your-sign-in-sign-up-policy` element przepływem użytkownika lub zasadami niestandardowymi utworzonymi w kroku 1
policies.js	authorityDomain	Domena urzędu usługi Azure AD B2C, taka jak `<your-tenant-name>.b2clogin.com`.
apiConfig.js	b2cScopes	Zakresy internetowego interfejsu API utworzone w kroku 2.2 (na przykład `b2cScopes: ["https://<your-tenant-name>.onmicrosoft.com/tasks-api/tasks.read"]`).
apiConfig.js	Webapi	Adres URL internetowego interfejsu API, `http://localhost:5000/hello`.

Wynikowy kod powinien wyglądać podobnie do następującego przykładu:

authConfig.js:

const msalConfig = {
    auth: {
      clientId: "<your-MyApp-application-ID>", // This is the ONLY mandatory field; everything else is optional.
      authority: b2cPolicies.authorities.signUpSignIn.authority, // Choose sign-up/sign-in user-flow as your default.
      knownAuthorities: [b2cPolicies.authorityDomain], // You must identify your tenant's domain as a known authority.
      redirectUri: "http://localhost:6420", // You must register this URI on Azure Portal/App Registration. Defaults to "window.location.href".
    },
    cache: {
      cacheLocation: "sessionStorage",  
      storeAuthStateInCookie: false, 
    },
    system: {
      loggerOptions: {
        loggerCallback: (level, message, containsPii) => {
          if (containsPii) {
            return;
          }
          switch (level) {
            case msal.LogLevel.Error:
              console.error(message);
              return;
            case msal.LogLevel.Info:
              console.info(message);
              return;
            case msal.LogLevel.Verbose:
              console.debug(message);
              return;
            case msal.LogLevel.Warning:
              console.warn(message);
              return;
          }
        }
      }
    }
  };
};

const loginRequest = {
  scopes: ["openid", ...apiConfig.b2cScopes],
};

const tokenRequest = {
  scopes: [...apiConfig.b2cScopes],  // e.g. ["https://fabrikamb2c.onmicrosoft.com/helloapi/demo.read"]
  forceRefresh: false // Set this to "true" to skip a cached token and go to the server to get a new token
};

policies.js:

const b2cPolicies = {
    names: {
        signUpSignIn: "b2c_1_susi",
        forgotPassword: "b2c_1_reset",
        editProfile: "b2c_1_edit_profile"
    },
    authorities: {
        signUpSignIn: {
            authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi",
        },
        forgotPassword: {
            authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_reset",
        },
        editProfile: {
            authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_edit_profile"
        }
    },
    authorityDomain: "your-tenant-name.b2clogin.com"
}

apiConfig.js:

const apiConfig = {
  b2cScopes: ["https://your-tenant-name.onmicrosoft.com/tasks-api/tasks.read"],
  webApi: "http://localhost:5000/hello"
};

Krok 4. Pobieranie przykładowego kodu internetowego interfejsu API

Po zarejestrowaniu internetowego interfejsu API i zdefiniowaniu jego zakresów skonfiguruj kod internetowego interfejsu API do pracy z dzierżawą usługi Azure AD B2C.

Aby uzyskać przykładowy kod internetowego interfejsu API, wykonaj jedną z następujących czynności:

Pobierz archiwum *.zip.
Sklonuj przykładowy projekt internetowego interfejsu API z usługi GitHub, uruchamiając następujące polecenie:
```
git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi.git
```
Możesz również przejść bezpośrednio do projektu Azure-Samples/active-directory-b2c-javascript-nodejs-webapi w witrynie GitHub.

Krok 4.1. Aktualizowanie internetowego interfejsu API

Otwórz plik config.json w edytorze kodu.
Zmodyfikuj wartości zmiennych przy użyciu utworzonej wcześniej rejestracji aplikacji. Zaktualizuj element za policyName pomocą przepływu użytkownika utworzonego w ramach wymagań wstępnych (na przykład b2c_1_susi).
```
"credentials": {
    "tenantName": "<your-tenant-name>",
    "clientID": "<your-webapi-application-ID>"
},
"policies": {
    "policyName": "b2c_1_susi"
},
"resource": {
    "scope": ["tasks.read"] 
},
```

Krok 4.2. Włączanie mechanizmu CORS

Aby umożliwić aplikacji jednostronicowej wywoływanie internetowego interfejsu API Node.js, należy włączyć współużytkowanie zasobów między źródłami (CORS) w internetowym interfejsie API. W aplikacji produkcyjnej należy zachować ostrożność co do domeny wysyłającej żądanie. W tym przykładzie zezwalaj na żądania z dowolnej domeny.

Aby włączyć mechanizm CORS, użyj następującego oprogramowania pośredniczącego. W pobranym przykładzie internetowego interfejsu API Node.js został on już dodany do pliku index.js .

app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Authorization, Origin, X-Requested-With, Content-Type, Accept");
    next();
});

Krok 5. Uruchamianie spa i internetowego interfejsu API

Teraz możesz przetestować dostęp do interfejsu API w zakresie aplikacji jednostronicowej. Uruchom zarówno internetowy interfejs API Node.js, jak i przykładową aplikację jednostronicową JavaScript na komputerze lokalnym. Następnie zaloguj się do aplikacji jednostronicowej i wybierz przycisk Wywołaj interfejs API, aby zainicjować żądanie do chronionego interfejsu API .

Uruchamianie internetowego interfejsu API Node.js

Otwórz okno konsoli i przejdź do katalogu zawierającego przykład internetowego interfejsu API Node.js. Przykład:
```
cd active-directory-b2c-javascript-nodejs-webapi
```
Uruchom następujące polecenia:
```
npm install && npm update
node index.js
```
W oknie konsoli zostanie wyświetlony numer portu, w którym jest hostowana aplikacja.
```
Listening on port 5000...
```

Uruchamianie aplikacji jednostronicowej

Otwórz inne okno konsoli i przejdź do katalogu, który zawiera przykład spa języka JavaScript. Przykład:
```
cd ms-identity-b2c-javascript-spa
```
Uruchom następujące polecenia:
```
npm install && npm update
npm start
```
W oknie konsoli jest wyświetlany numer portu, w którym jest hostowana aplikacja.
```
Listening on port 6420...
```
Aby wyświetlić aplikację, przejdź do http://localhost:6420 witryny w przeglądarce.
Ukończ proces rejestracji lub logowania. Po pomyślnym zalogowaniu powinien zostać wyświetlony komunikat "User your username> log in" (Użytkownik <zalogowany).
Wybierz przycisk Wywołaj interfejs API . SPA wysyła token dostępu w żądaniu do chronionego internetowego interfejsu API, który zwraca nazwę wyświetlaną zalogowanego użytkownika:

Wdrażanie aplikacji

W aplikacji produkcyjnej identyfikator URI przekierowania rejestracji aplikacji jest zwykle publicznie dostępnym punktem końcowym, w którym aplikacja jest uruchomiona, na przykład https://contoso.com/signin-oidc.

W dowolnym momencie możesz dodawać i modyfikować identyfikatory URI przekierowania w zarejestrowanych aplikacjach. Następujące ograniczenia dotyczą identyfikatorów URI przekierowania:

Adres URL odpowiedzi musi zaczynać się od schematu https.
W adresie URL odpowiedzi jest uwzględniana wielkość liter. Jego wielkość liter musi być zgodna ze wielkością ścieżki adresu URL uruchomionej aplikacji.

Następne kroki

Aby uzyskać więcej informacji na temat pojęć omówionych w tym artykule: