Udostępnij za pośrednictwem

Szybki start: logowanie użytkowników w przykładowej aplikacji desktopowej

  • Artykuł

W tym wprowadzeniu użyjesz przykładowej aplikacji, aby nauczyć się, jak dodać uwierzytelnianie do aplikacji na komputer. Przykładowa aplikacja umożliwia użytkownikom logowanie się i wylogowywanie oraz korzystanie z biblioteki Microsoft Authentication Library (MSAL) do obsługi uwierzytelniania.

Przed rozpoczęciem użyj selektora Wybierz typ dzierżawcy w górnej części tej strony, aby wybrać typ. Microsoft Entra ID udostępnia dwie konfiguracje dzierżawy, dla pracowników i dla użytkowników zewnętrznych. Konfiguracja dzierżawy dla zespołu dotyczy pracowników, aplikacji wewnętrznych i innych zasobów organizacji. Zewnętrzny podmiot jest przeznaczony dla aplikacji skierowanych do klientów.

Warunki wstępne

  • Konto platformy Azure z aktywną subskrypcją. Jeśli jeszcze go nie masz, Utwórz konto bezpłatnie.
  • To konto platformy Azure musi mieć uprawnienia do zarządzania aplikacjami. Każda z następujących ról firmy Microsoft Entra obejmuje wymagane uprawnienia:
    • Administrator aplikacji
    • Deweloper aplikacji
    • Administrator aplikacji w chmurze
  • Najemca mieszkań dla pracowników. Możesz użyć katalogu domyślnego lub skonfigurować nowego lokatora.
  • Zarejestruj nową aplikację w centrum administracyjnym Microsoft Entra przy użyciu następującej konfiguracji. Aby uzyskać więcej informacji, zobacz Zarejestruj aplikację.
    • Name: msal-node-desktop
    • Obsługiwane typy kont: Konta w tym katalogu organizacyjnym (jedna organizacja)

Dodaj identyfikator URI przekierowania

Musisz dodać identyfikator URI przekierowania do rejestracji aplikacji. Ten identyfikator URI służy do przekierowywania użytkowników do aplikacji po zalogowaniu.

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

  1. Na stronie Przegląd zarejestrowanej aplikacji w obszarze Zarządzajwybierz pozycję Uwierzytelnianie.
  2. Na stronie Konfiguracje platformy wybierz pozycję Dodaj platformę>Aplikacje mobilne i na komputery stacjonarne.
  3. W sekcji Przekierowania URIwprowadź http://localhost.
  4. Wybierz pozycję Konfiguruj.

Pobieranie przykładowego projektu

  • 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-javascript-nodejs-desktop.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

*Wyodrębnij projekt, otwórz folder ms-identity-JavaScript-nodejs-desktop-main, a następnie otwórz plik .authConfig.js. Zastąp wartość w następujący sposób:

Zmienna Opis Przykłady
Enter_the_Cloud_Instance_Id_Here Wystąpienie chmury platformy Azure, w którym zarejestrowano aplikację https://login.microsoftonline.com/ (włącznie z końcowym ukośnikiem)
Enter_the_Tenant_Id_Here Identyfikator dzierżawy lub domena podstawowa contoso.microsoft.com lub aaaabbbb-0000-cccc-1111-dddd2222eeee
Enter_the_Application_Id_Here Identyfikator klienta zarejestrowanej aplikacji 00001111-aaaa-2222-bbbb-3333cccc4444
Enter_the_Redirect_Uri_Here Adres URI przekierowania zarejestrowanej aplikacji msal00001111-aaaa-2222-bbbb-3333cccc4444://auth
Enter_the_Graph_Endpoint_Here Instancja chmurowa Microsoft Graph API, którą wywołuje Twoja aplikacja https://graph.microsoft.com/ (obejmują ukośnik końcowy)

Plik powinien wyglądać podobnie do poniższego:

const AAD_ENDPOINT_HOST = "https://login.microsoftonline.com/"; // include the trailing slash

const msalConfig = {
    auth: {
        clientId: "00001111-aaaa-2222-bbbb-3333cccc4444",
        authority: `${AAD_ENDPOINT_HOST}/aaaabbbb-0000-cccc-1111-dddd2222eeee`,
    },
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                 console.log(message);
             },
             piiLoggingEnabled: false,
             logLevel: LogLevel.Verbose,
        }
    }
}

const GRAPH_ENDPOINT_HOST = "https://graph.microsoft.com/"; // include the trailing slash

const protectedResources = {
     graphMe: {
         endpoint: `${GRAPH_ENDPOINT_HOST}v1.0/me`,
         scopes: ["User.Read"],
     }
};

module.exports = {
     msalConfig: msalConfig,
     protectedResources: protectedResources,
 };

Uruchamianie aplikacji

  1. Należy zainstalować zależności tego przykładu raz:

    cd ms-identity-javascript-nodejs-desktop-main
npm install

  2. Następnie uruchom aplikację za pomocą wiersza polecenia lub konsoli:

    npm start

  3. Wybierz pozycję Zaloguj się, aby rozpocząć proces logowania.

    Przy pierwszym logowaniu zostanie wyświetlony monit o wyrażenie zgody, aby zezwolić aplikacji na logowanie się i uzyskiwanie dostępu do profilu. Po pomyślnym zalogowaniu nastąpi przekierowanie z powrotem do aplikacji.

Następny krok

Aby dowiedzieć się więcej na temat tworzenia aplikacji desktopowych z użyciem Electron i biblioteki MSAL Node, zobacz samouczek:

Samouczek : Loguj użytkowników i wywołuj Microsoft Graph API w aplikacji desktopowej Electron

Warunki wstępne

  • Konto platformy Azure z aktywną subskrypcją. Jeśli jeszcze go nie masz, Utwórz konto bezpłatnie.
  • To konto platformy Azure musi mieć uprawnienia do zarządzania aplikacjami. Każda z następujących ról firmy Microsoft Entra obejmuje wymagane uprawnienia:
    • Administrator aplikacji
    • Deweloper aplikacji
    • Administrator aplikacji w chmurze

Dodaj identyfikator URI przekierowania

Musisz dodać identyfikator URI przekierowania do rejestracji swojej aplikacji. Ten identyfikator URI służy do przekierowywania użytkowników do aplikacji po zalogowaniu.

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

  1. W obszarze Zarządzajwybierz pozycję Uwierzytelnianie.
  2. Na stronie Konfiguracje platformy wybierz pozycję Dodaj platformę, a następnie wybierz opcję Aplikacje mobilne i stacjonarne.
  3. Dla niestandardowych URI przekierowania wprowadź http://localhost, a następnie wybierz Konfiguruj.
  4. Wybierz pozycję Konfiguruj, aby zapisać zmiany.

Po zarejestrowaniu aplikacji zostanie przypisane uprawnienie User.Read. Jednak ponieważ najemca jest najemcą zewnętrznym, użytkownicy-klienci nie mogą sami wyrazić zgody na to uprawnienie. Ty jako administrator dzierżawcy musisz wyrazić zgodę na to uprawnienie w imieniu wszystkich użytkowników w dzierżawie.

  1. Na stronie Rejestracje aplikacji wybierz utworzoną aplikację (taką jak ciam-client-app), aby otworzyć stronę Przegląd.

  2. W obszarze Zarządzajwybierz uprawnienia interfejsu API.

    1. Wybierz Udziel zgody administratora dla <Twojej nazwy dzierżawy>, a następnie wybierz Tak.
    2. Wybierz Odśwież, a następnie sprawdź, czy Udzielono dla <nazwa twojej dzierżawy> pojawia się pod Stan dla uprawnienia.

Pobieranie przykładowego projektu

Aby pobrać przykładowy kod aplikacji komputerowej, pobierz plik .zip lub sklonuj przykładową aplikację internetową z usługi GitHub, uruchamiając następujące polecenie:

git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

Jeśli zdecydujesz się pobrać plik .zip, wyodrębnij przykładowy plik aplikacji do folderu, w którym całkowita długość ścieżki wynosi 260 lub mniej znaków.

Instalowanie zależności projektu

  1. Otwórz okno konsoli i przejdź do katalogu zawierającego przykładową aplikację Electron:

    cd 1-Authentication\3-sign-in-electron\App

  2. Uruchom następujące polecenia, aby zainstalować zależności aplikacji:

    npm install && npm update

Konfigurowanie przykładowej aplikacji internetowej

  1. W edytorze kodu otwórz plik App\authConfig.js.

  2. Znajdź symbol zastępczy:

    1. Enter_the_Application_Id_Here i zastąp go identyfikatorem aplikacji (klienta) zarejestrowanej wcześniej.

    2. Enter_the_Tenant_Subdomain_Here i zastąp ten element poddomeną katalogu (dzierżawcy). Jeśli na przykład domena podstawowa dzierżawy jest contoso.onmicrosoft.com, użyj contoso. Jeśli nie masz nazwy najemcy, dowiedz się, jak sprawdzić szczegóły najemcy.

Uruchamianie i testowanie przykładowej aplikacji internetowej

Teraz możesz przetestować przykładową aplikację desktopową Electron. Po uruchomieniu aplikacji okno aplikacji na pulpicie zostanie wyświetlone automatycznie.

  1. W terminalu uruchom następujące polecenie:

    npm start

    Zrzut ekranu przedstawiający logowanie się do aplikacji desktopowej Electron.

  2. W wyświetlonym oknie pulpitu wybierz przycisk Zaloguj się lub Zarejestruj się. Zostanie otwarte okno przeglądarki z monitem o zalogowanie się.

  3. Na stronie logowania przeglądarki wpisz adres e-mail , wybierz pozycję Next, wpisz hasło , a następnie wybierz pozycję Zaloguj się. Jeśli nie masz konta, wybierz pozycję Nie masz konta? Utwórz jeden link, który uruchamia przepływ rejestracji.

  4. Jeśli wybierzesz opcję rejestracji, po wypełnieniu adresu e-mail, jednorazowego kodu dostępu, nowego hasła i dodatkowych szczegółów konta, ukończ cały przepływ rejestracji. Zostanie wyświetlona strona podobna do poniższego zrzutu ekranu. Po wybraniu opcji logowania zostanie wyświetlona podobna strona. Strona wyświetla roszczenia dotyczące identyfikatora tokenu.

    Zrzut ekranu przedstawiający przeglądaj roszczenia tokenów w aplikacji desktopowej Electron.

Powiązana zawartość