Udostępnij za pośrednictwem

Szybki start: logowanie użytkowników w jednostronicowej aplikacji (SPA) i wywoływanie interfejsu API programu Microsoft Graph przy użyciu platformy React

  • Artykuł

W tym przewodniku Szybki start użyto przykładowej aplikacji jednostronicowej React (SPA), aby pokazać, jak logować użytkowników przy użyciu przepływu kodu autoryzacji z kluczem weryfikacji dla programu Code Exchange (PKCE). W przykładzie użyto biblioteki Microsoft Authentication Library for JavaScript do obsługi uwierzytelniania.

Warunki wstępne

Zarejestruj aplikację i zapisuj identyfikatory

Aby ukończyć rejestrację, podaj nazwę aplikacji, określ obsługiwane typy kont i dodaj identyfikator URI przekierowania. Po zarejestrowaniu okienko Przegląd aplikacji wyświetla identyfikatory wymagane w kodzie źródłowym aplikacji.

  1. Zaloguj się do centrum administracyjnego Microsoft Entra.

  2. Jeśli masz dostęp do wielu dzierżaw, użyj ikony ustawienia w górnym menu, aby przełączyć się do dzierżawy, w której chcesz zarejestrować aplikację z menu Katalogi i subskrypcje.

  3. Przejdź do Identity>Applications>App registrations, wybierz pozycję Nowa rejestracja.

  4. Wprowadź nazwę dla aplikacji, na przykład identity-client-spa.

  5. W przypadku typów kont obsługiwanych wybierz pozycję konta w tym katalogu organizacyjnym tylko. Aby uzyskać informacje na temat różnych typów kont, wybierz opcję Pomóż mi wybrać opcję.

  6. Wybierz pozycję Zarejestruj.

    Zrzut ekranu pokazujący, jak wprowadzić nazwę i wybrać typ konta w centrum administracyjnym firmy Microsoft Entra.

  7. Okienko Przegląd aplikacji jest wyświetlane po zakończeniu rejestracji. Zarejestruj identyfikator katalogu (dzierżawy) i identyfikator aplikacji (klienta) do użycia w kodzie źródłowym aplikacji.

    Zrzut ekranu przedstawiający wartości identyfikatorów na stronie głównej w administracyjnym centrum Microsoft Entra.

    Uwaga

    Typy obsługiwanych kont można zmienić, odwołując się do Zmienianie kont obsługiwanych przez aplikację.

Dodaj URI przekierowania platformy

Aby określić typ aplikacji do rejestracji aplikacji, wykonaj następujące kroki:

  1. W obszarze Zarządzajwybierz pozycję Uwierzytelnianie.
  2. Na stronie konfiguracji platformy wybierz pozycję Dodaj platformę, a następnie wybierz opcję SPA.
  3. W identyfikatory URI przekierowania wprowadź http://localhost:3000.
  4. Wybierz pozycję Skonfiguruj, aby zapisać zmiany.

Klonowanie lub pobieranie przykładowej aplikacji

Aby uzyskać przykładową aplikację, możesz ją sklonować z usługi GitHub lub pobrać jako plik .zip.

  • Aby sklonować przykład, otwórz wiersz polecenia i przejdź do miejsca, w którym chcesz utworzyć projekt, a następnie wprowadź następujące polecenie:

    git clone https://github.com/Azure-Samples/ms-identity-docs-code-javascript.git

  • pobierz plik .zip. Wyodrębnij go do ścieżki pliku, w której długość nazwy jest mniejsza niż 260 znaków.

Konfigurowanie projektu

  1. W środowisku IDE otwórz folder projektu, ms-identity-docs-code-javascript/react-spa, zawierające przykład.

  2. Otwórz src/authConfig.js i zaktualizuj następujące wartości przy użyciu informacji zarejestrowanych wcześniej w centrum administracyjnym.

    /*
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License.
 */

import { LogLevel } from "@azure/msal-browser";

/**
 * Configuration object to be passed to MSAL instance on creation. 
 * For a full list of MSAL.js configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
 */

export const msalConfig = {
    auth: {
        clientId: "Enter_the_Application_Id_Here",
        authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
        redirectUri: "http://localhost:3000",
    },
    cache: {
        cacheLocation: "sessionStorage", // This configures where your cache will be stored
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    },
    system: {	
        loggerOptions: {	
            loggerCallback: (level, message, containsPii) => {	
                if (containsPii) {		
                    return;		
                }		
                switch (level) {
                    case LogLevel.Error:
                        console.error(message);
                        return;
                    case LogLevel.Info:
                        console.info(message);
                        return;
                    case LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case LogLevel.Warning:
                        console.warn(message);
                        return;
                    default:
                        return;
                }	
            }	
        }	
    }
};

/**
 * Scopes you add here will be prompted for user consent during sign-in.
 * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
 * For more information about OIDC scopes, visit: 
 * https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
 */
export const loginRequest = {
    scopes: ["User.Read"]
};

/**
 * Add here the scopes to request when obtaining an access token for MS Graph API. For more information, see:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
 */
export const graphConfig = {
    graphMeEndpoint: "https://graph.microsoft.com/v1.0/me",
};
    • clientId — identyfikator aplikacji, nazywany również klientem. Zastąp tekst w cudzysłowach wartością Identyfikator aplikacji (klienta), która została zarejestrowana wcześniej.
    • authority — autorytet jest adresem URL wskazującym katalog, z którego MSAL może występować o tokeny. Zastąp Enter_the_Tenant_Info_Here wartością identyfikatora katalogu (dzierżawcy) , którą zanotowano wcześniej.
    • redirectUri — URI przekierowania aplikacji. W razie potrzeby zastąp tekst w cudzysłowach identyfikatorem URI przekierowania, który został zarejestrowany wcześniej.

Uruchamianie aplikacji i logowanie

Uruchom projekt z serwerem internetowym przy użyciu Node.js:

  1. Aby uruchomić serwer, uruchom następujące polecenia z poziomu katalogu projektu:

    npm install
npm start

  2. Skopiuj adres URL https wyświetlany w terminalu, na przykład https://localhost:3000i wklej go w przeglądarce. Zalecamy używanie prywatnej lub incognito sesji przeglądarki.

  3. Wykonaj kroki i wprowadź niezbędne szczegóły, aby zalogować się przy użyciu konta Microsoft. Zażądano adresu e-mail, aby można było wysłać do Ciebie jednorazowy kod dostępu. Wprowadź kod po wyświetleniu monitu.

  4. Aplikacja żąda uprawnień do utrzymania dostępu do danych, do których udzielono mu dostępu, oraz do zalogowania się i odczytania profilu. Wybierz pozycję Zaakceptuj. Pojawi się następujący zrzut ekranu, wskazujący, że zalogowano się do aplikacji i uzyskano dostęp do szczegółów profilu z interfejsu API Microsoft Graph.

    zrzut ekranu przedstawiający aplikację JavaScript przedstawiającą wyniki wywołania interfejsu API.

Wyloguj się z aplikacji

  1. Znajdź przycisk Wyloguj się w prawym górnym rogu strony i wybierz go.
  2. Zostanie wyświetlony monit o wybranie konta do wylogowania. Wybierz konto użyte do zalogowania się.

Zostanie wyświetlony komunikat z informacją o wylogowaniach. Teraz możesz zamknąć okno przeglądarki.

Powiązana zawartość