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

W tym przewodniku Szybki start użyjesz przykładowej aplikacji, aby dowiedzieć się, jak dodać uwierzytelnianie do aplikacji klasycznej. 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

Node.js Electron

• Node.js
• Visual Studio Code lub inny edytor kodu

Windows Presentation Foundation (WPF)

• program Visual Studio z zainstalowanym pakietem roboczym do tworzenia aplikacji na platformę uniwersalną systemu Windows

Rejestrowanie aplikacji internetowej

Aby zarejestrować aplikację i ręcznie dodać informacje dotyczące rejestracji aplikacji do rozwiązania, wykonaj następujące kroki:

Node.js Electron

1. Zaloguj się do centrum administracyjnego Microsoft Entra jako co najmniej Administrator aplikacji w chmurze.
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ę, korzystając z menu Katalogi i subskrypcje.
3. Przejdź do Identity>Applications>App registrations i wybierz pozycję Nowa rejestracja.
4. Wprowadź Nazwę dla swojej aplikacji, na przykład msal-node-desktop. Użytkownicy aplikacji mogą zobaczyć tę nazwę i możesz ją zmienić później.
5. Wybierz pozycję Zarejestruj, aby utworzyć aplikację.
6. W obszarze Zarządzajwybierz pozycję Uwierzytelnianie.
7. Wybierz pozycję Dodaj platformę>Aplikacje mobilne i na komputer stacjonarny.
8. W sekcji URI przekierowania wprowadź http://localhost.
9. Wybierz pozycję Konfiguruj.

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ę New registration.
4. Wprowadź nazwę dla swojej aplikacji, na przykład Win-App-calling-MsGraph. Użytkownicy aplikacji mogą zobaczyć tę nazwę i możesz ją zmienić później.
5. W sekcji Obsługiwane typy kont wybierz pozycję konta w dowolnym katalogu organizacyjnym i kontach osobistych Microsoft (na przykład Skype, Xbox, Outlook.com).
6. Wybierz pozycję Zarejestruj, aby utworzyć aplikację.
7. W obszarze Zarządzajwybierz pozycję Uwierzytelnianie.
8. Wybierz pozycję Dodaj platformę>Aplikacje mobilne i desktopowe.
9. W sekcji Identyfikatory URI przekierowania wybierz https://login.microsoftonline.com/common/oauth2/nativeclient, a w Niestandardowe identyfikatory URI przekierowania dodaj ms-appx-web://microsoft.aad.brokerplugin/{client_id}, gdzie {client_id} jest identyfikatorem aplikacji (klienta) Twojej aplikacji (ten sam identyfikator GUID, który pojawia się w polu wyboru msal{client_id}://auth).
10. Wybierz pozycję Konfiguruj.

Pobieranie przykładowego projektu

Node.js Electron

Pobierz przykładowy kod

Pobierz przykładową aplikację WPF

Napiwek

Aby uniknąć błędów spowodowanych ograniczeniami długości ścieżki w systemie Windows, zalecamy wyodrębnienie archiwum lub sklonowanie repozytorium do katalogu w pobliżu katalogu głównego dysku.

Konfigurowanie projektu

Node.js Electron

*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/ (obejmują ukośnik końcowy)
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	Wystąpienie chmury interfejsu API programu Microsoft Graph, które będzie wywoływane przez aplikację	https://graph.microsoft.com/ (zawierając ukośnik na końcu)

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,
 };

Windows Presentation Foundation (WPF)

1. Wyodrębnij plik zip do folderu lokalnego w pobliżu katalogu głównego dysku, na przykład C:\Azure-Samples.

2. Otwórz projekt w programie Visual Studio.

3. Edytuj App.Xaml.cs i zastąp wartości pól ClientId i Tenant następującym kodem:

   private static string ClientId = "Enter_the_Application_Id_here";
   private static string Tenant = "Enter_the_Tenant_Info_Here";
   

Gdzie:

• Enter_the_Application_Id_here — to identyfikator aplikacji (klienta) dla zarejestrowanej aplikacji.

  Aby znaleźć wartość identyfikatora aplikacji (klienta), przejdź do strony Przegląd aplikacji w centrum administracyjnym firmy Microsoft Entra.

• Enter_the_Tenant_Info_Here — jest ustawiona na jedną z następujących opcji:

  • Jeśli aplikacja obsługuje konta w tym katalogu organizacyjnym, zastąp tę wartość identyfikatorem dzierżawcy lub nazwą dzierżawcy (na przykład, contoso.microsoft.com)

  • Jeśli Twoja aplikacja obsługuje konta w jakimkolwiek katalogu organizacyjnym, zastąp tę wartość organizations

  • Jeśli aplikacja obsługuje konta w dowolnym katalogu organizacyjnym i osobiste konta Microsoft, zamień tę wartość na common.

    Aby znaleźć wartości identyfikatora Katalogu (dzierżawy) i Obsługiwane typy kont, przejdź do strony Przegląd aplikacji w centrum administracyjnym firmy Microsoft Entra.

Uruchamianie aplikacji

Node.js Elektron

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.

Windows Presentation Foundation (WPF)

Aby skompilować i uruchomić przykładową aplikację w programie Visual Studio, wykonaj następujące kroki:

1. Wybierz menu Debug>Rozpocznij debugowanielub naciśnij F5. Okno główne aplikacji zostało wyświetlone.
2. Wybierz przycisk Wywołaj Microsoft Graph API.
3. Zaloguj się przy użyciu konta Microsoft Entra (konta służbowego) lub konta Microsoft (live.com, outlook.com).
4. Jeśli uruchamiasz aplikację po raz pierwszy, zostanie wyświetlony monit o wyrażenie zgody na zezwolenie aplikacji na dostęp do profilu użytkownika i zalogowanie się. Po wyrażeniu zgody na żądane uprawnienia aplikacja wyświetla, że pomyślnie się zalogowano.

Powinny zostać wyświetlone podstawowe informacje o tokenie i dane użytkownika uzyskane z wywołania interfejsu API programu Microsoft Graph.

Następne kroki

Node.js Elektron

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

Wypróbuj samouczek dotyczący pulpitu systemu Windows, dającego szczegółowy przewodnik po budowaniu aplikacji i nowych funkcji, w tym pełne wyjaśnienie tego samouczka szybkiego startu.

samouczek dotyczący interfejsu API wywołania programu Graph

Warunki wstępne

Node.js Electron

• Node.js
• programu Visual Studio Code lub innego edytora kodu
• Zewnętrzny najemca. Aby go utworzyć, wybierz jedną z następujących metod:
  • (Zalecane) Użyj rozszerzenia Microsoft Entra External ID, aby skonfigurować zewnętrznego dzierżawcę bezpośrednio w programie Visual Studio Code.
  • Utwórz nową dzierżawę zewnętrzną w centrum administracyjnym Microsoft Entra

.NET (MAUI)

• zestaw SDK platformy .NET 7.0
• Visual Studio 2022 z zainstalowanym pakietem MAUI:
  • Instrukcje dotyczące systemu Windows
  • Instrukcje dotyczące systemu macOS
• Zewnętrzny najemca. Jeśli jeszcze go nie masz, zarejestruj się na bezpłatną wersję próbną

.NET (MAUI) WPF

• programu Visual Studio Code lub innego edytora kodu
• .NET 7.0 lub nowszym

• Najemca zewnętrzny. Aby go utworzyć, wybierz jedną z następujących metod:
  • (Zalecane) Użyj rozszerzenia Microsoft Entra External ID, aby skonfigurować najemcę zewnętrznego bezpośrednio w Visual Studio Code
  • Tworzenie nowej dzierżawy zewnętrznej w centrum administracyjnym firmy Microsoft Entra

Rejestracja aplikacji komputerowej

Aby umożliwić aplikacji logowanie użytkowników w usłudze Microsoft Entra, usługa Microsoft Entra External ID musi być świadoma tworzonej aplikacji. Rejestracja aplikacji ustanawia relację zaufania między aplikacją a firmą Microsoft Entra. Podczas rejestrowania aplikacji identyfikator zewnętrzny generuje unikatowy identyfikator znany jako identyfikator aplikacji (klienta), wartość używana do identyfikowania aplikacji podczas tworzenia żądań uwierzytelniania.

W poniższych krokach pokazano, jak zarejestrować aplikację w centrum administracyjnym firmy Microsoft Entra:

1. Zaloguj się do centrum administracyjnego Microsoft Entra jako przynajmniej Deweloper Aplikacji.

2. Jeśli masz dostęp do wielu dzierżaw, użyj ikony Ustawienia w górnym menu, aby przełączyć się do zewnętrznego dzierżawcy z menu Katalogi + Subskrypcje.

3. Przejdź do Tożsamość>Aplikacje>Rejestracja aplikacji.

4. Wybierz pozycję + Nowa rejestracja.

5. Na wyświetlonej stronie Zarejestruj aplikację;

   1. Wprowadź znaczącą nazwę aplikacji Nazwa, która jest wyświetlana użytkownikom aplikacji, na przykład ciam-client-app.
   2. W obszarze Obsługiwane typy kontwybierz pozycję konta w tym katalogu organizacyjnym tylko.

6. Wybierz pozycję Zarejestruj.

7. Po pomyślnym zarejestrowaniu zostanie wyświetlone okienko Przegląd aplikacji. Zapisz identyfikator aplikacji (klienta) do użycia w kodzie źródłowym aplikacji.

Określanie platformy aplikacji

Node.js Elektron

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. W przypadku identyfikatorów URI przekierowania niestandardowego wprowadź http://localhost, a następnie wybierz pozycję Konfiguruj.
4. Wybierz pozycję Konfiguruj, aby zapisać zmiany.

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 desktopowe.
3. Wprowadź msalEnter_the_Application_Id_Here://authdla identyfikatorów URI przekierowania , następnie zastąp Enter_the_Application_Id_Here identyfikatorem aplikacji (klienta), który skopiowałeś wcześniej, a na końcu wybierz Konfiguruj.
4. Wybierz pozycję Zapisz, aby zapisać zmiany.

.NET (MAUI) WPF

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 desktopowe.
3. W polu wejściowym pod Niestandardowy identyfikator URI przekierowaniaręcznie wprowadź https://login.microsoftonline.com/common/oauth2/nativeclient, a następnie wybierz Skonfiguruj. Jeśli wybierzesz ten identyfikator URI w polu wyboru, może zostać wyświetlony błąd identyfikatora URI przekierowania.

Udzielanie zgody administratora

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 pozycję Odśwież, a następnie sprawdź, czy udzielono <nazwa dzierżawy> jest wyświetlana w obszarze Stan dla uprawnienia.

Tworzenie przepływu użytkownika

Wykonaj następujące kroki, aby utworzyć przepływ użytkownika, który klient może użyć do zalogowania się lub zarejestrowania się w aplikacji.

1. Zaloguj się do centrum administracyjnego Microsoft Entra jako co najmniej administrator przepływu użytkowników zewnętrznych identyfikatorów.

2. Jeśli masz dostęp do wielu dzierżaw, użyj ikony Ustawienia w górnym menu, aby przełączyć się na zewnętrznego dzierżawcę z menu Katalogi i subskrypcje.

3. Przejdź do tożsamości>tożsamości zewnętrzne>przepływy użytkowników.

4. Wybierz pozycję + Nowy przepływ użytkownika.

5. Na stronie Utwórz:

   1. Wprowadź nazwę dla ścieżki użytkownika, na przykład SignInSignUpSample.

   2. Na liście dostawcy tożsamości wybierz pozycję Konta e-mail. Ten dostawca tożsamości umożliwia użytkownikom logowanie się lub tworzenie konta przy użyciu ich adresu e-mail.

      Notatka

      Dodatkowi dostawcy tożsamości będą wyświetlani w tym miejscu tylko po skonfigurowaniu federacji z nimi. Jeśli na przykład skonfigurujesz federację z usługą Google, Facebook, Apple lub dostawcą tożsamości OIDC , będziesz mógł wybrać tutaj tych dodatkowych dostawców tożsamości.

   3. W obszarze Konta e-mailmożesz wybrać jedną z dwóch opcji. Na potrzeby tego samouczka wybierz Adres e-mail i hasło.

      • Adres e-mail z hasłem: umożliwia nowym użytkownikom zarejestrowanie się i zalogowanie się przy użyciu adresu e-mail jako nazwy użytkownika przy logowaniu i hasła jako danych pierwszego czynnika.
      • Jednorazowy kod dostępu wysłany e-mailem: Umożliwia nowym użytkownikom rejestrację i logowanie przy użyciu adresu e-mail jako nazwy logowania oraz jednorazowego kodu dostępu wysłanego e-mailem jako pierwszego poświadczenia. Jednorazowe hasło e-mailowe musi być włączone na poziomie dzierżawy (Wszyscy dostawcy tożsamości>Jednorazowe hasło e-mailowe), aby ta opcja była dostępna na poziomie ścieżki użytkownika.

   4. W obszarze Atrybuty użytkownikawybierz atrybuty, które chcesz zebrać od użytkownika podczas rejestracji. Wybierając pozycję Pokaż więcej, możesz wybrać atrybuty i oświadczenia dla Kraj/Region, Nazwa wyświetlanaoraz Kod pocztowy. Wybierz pozycję OK. (Użytkownicy są proszeni tylko o atrybuty podczas rejestracji po raz pierwszy).

6. Wybierz pozycję Utwórz. Nowy przepływ użytkownika zostanie wyświetlony na liście przepływów użytkownika. W razie potrzeby odśwież stronę.

Aby włączyć samoobsługowe resetowanie hasła, wykonaj kroki opisane w artykule Włączanie samoobsługowego resetowania haseł.

Połącz aplikację komputerową z przepływem użytkownika

Aby klienci mogli zobaczyć proces rejestracji lub logowania podczas używania aplikacji, musisz powiązać aplikację z procesem użytkownika. Chociaż wiele aplikacji może być skojarzonych z przepływem użytkownika, pojedyncza aplikacja może być skojarzona tylko z jednym przepływem użytkownika.

1. W menu paska bocznego wybierz pozycję Identity.

2. Wybierz pozycję Zewnętrzne Tożsamości, a następnie Przepływy Użytkownika.

3. Na stronie Przepływy użytkownika wybierz utworzoną wcześniej nazwę przepływu użytkownika , na przykład SignInSignUpSample.

4. W obszarze Użyjwybierz pozycję Aplikacje.

5. Wybierz pozycję Dodaj aplikację.

6. Wybierz aplikację z listy, na przykład ciam-client-app lub użyj pola wyszukiwania, aby znaleźć aplikację, a następnie wybierz ją.

7. Wybierz pozycję Wybierz.

Po skojarzeniu aplikacji z przepływem użytkownika możesz przetestować przepływ użytkownika, symulując środowisko rejestracji lub logowania użytkownika z poziomu centrum administracyjnego firmy Microsoft Entra. W tym celu wykonaj kroki opisane w Testowanie przepływu rejestracji i logowania użytkownika.

Pobieranie przykładowego projektu

Node.js Electron

Aby pobrać przykładowy kod aplikacji klasycznej, pobrać plik .zip lub sklonować 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
   

.NET (MAUI)

Aby uzyskać przykładowy kod aplikacji na komputer .NET MAUI, pobierz plik .zip lub sklonuj przykładową aplikację na komputer .NET MAUI z usługi GitHub, uruchamiając następujące polecenie:

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

.NET (MAUI) WPF

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-ciam-dotnet-tutorial.git
  

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

Konfigurowanie przykładowej aplikacji internetowej

Node.js Electron

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 ją poddomeną Katalog (dzierżawa). 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.

1. W programie Visual Studio otwórz plik ms-identity-ciam-dotnet-tutorial-main/1-Authentication/2-sign-in-maui/appsettings.json.
2. Znajdź symbol zastępczy:
   1. Enter_the_Tenant_Subdomain_Here i zastąp ją poddomeną Katalog (dzierżawa). Jeśli na przykład podstawowa domena dzierżawy to contoso.onmicrosoft.com, użyj contoso. Jeśli nie masz nazwy dzierżawy, dowiedz się, jak odczytywać szczegóły dzierżawy.
   2. Enter_the_Application_Id_Here i zastąp go identyfikatorem aplikacji (klienta) wcześniej zarejestrowanej.

.NET (MAUI) WPF

1. Otwórz projekt w środowisku IDE (np. Visual Studio lub Visual Studio Code), aby skonfigurować kod.

2. W edytorze kodu otwórz plik appsettings.json w folderze ms-identity-ciam-dotnet-tutorial>1-Authentication>5-sign-in-dotnet-wpf.

3. Zastąp Enter_the_Application_Id_Here identyfikatorem aplikacji (klienta), którą zarejestrowałeś wcześniej.

4. Zastąp Enter_the_Tenant_Subdomain_Here poddomeną Katalog (dzierżawa). Jeśli na przykład domena podstawowa jest contoso.onmicrosoft.com, zastąp Enter_the_Tenant_Subdomain_Herecontoso. Jeśli nie masz domeny podstawowej, dowiedz się, jak zapoznać się ze szczegółami dzierżawy.

Uruchamianie i testowanie przykładowej aplikacji internetowej

Node.js Electron

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
   

   

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. Na stronie są wyświetlane oświadczenia identyfikatora tokenu.

   

Aplikacje .NET MAUI są przeznaczone do uruchamiania na wielu systemach operacyjnych i urządzeniach. Musisz wybrać docelowy element, którego chcesz użyć do testowania i debugowania aplikacji.

Ustaw opcję Cel debugowania na pasku narzędzi programu Visual Studio na urządzeniu, które chcesz użyć do debugowania i testowania. W poniższych krokach pokazano ustawienie debugowania docelowegowindows:

1. Wybierz listę rozwijaną Debugowanie elementu docelowego.
2. Wybierz Framework
3. Wybierz net7.0-windows...

Uruchom aplikację, naciskając F5 lub wybierz przycisk odtwarzania w górnej części programu Visual Studio.

1. Teraz możesz przetestować przykładową aplikację komputerową .NET MAUI. Po uruchomieniu aplikacji okno aplikacji komputerowej wyświetli się automatycznie.

   

2. W oknie pulpitu, które się pojawi, wybierz przycisk Zaloguj się. Zostanie otwarte okno przeglądarki z monitem o zalogowanie się.

   

   Podczas procesu logowania zostanie wyświetlony monit o przyznanie różnych uprawnień (aby zezwolić aplikacji na dostęp do danych). Po pomyślnym zalogowaniu się i wyrażeniu zgody na ekranie aplikacji zostanie wyświetlona strona główna.

   

.NET (MAUI) WPF

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

   cd 1-Authentication\5-sign-in-dotnet-wpf
   

2. W terminalu uruchom aplikację, uruchamiając następujące polecenie:

   dotnet run
   

3. Po uruchomieniu przykładu powinno zostać wyświetlone okno z przyciskiem Zaloguj się. Wybierz przycisk Zaloguj się.

   

4. Na stronie logowania wprowadź swój adres e-mail konta. Jeśli nie masz konta, wybierz pozycję Nie masz konta? Utwórz konto, co uruchamia proces rejestracji. Wykonaj czynności opisane w tym przepływie, aby utworzyć nowe konto i zalogować się.

5. Po zalogowaniu zobaczysz ekran pokazujący pomyślne logowanie oraz podstawowe informacje o koncie użytkownika przechowywane w pobranym tokenie. Podstawowe informacje są wyświetlane w sekcji Informacje o Tokenie ekranu logowania.

Powiązana zawartość

Node.js Electron

• Włącz resetowanie haseł.
• Dostosuj domyślne znakowanie.
• Eksploruj przykładowy kod aplikacji desktopowej Electron.

.NET (MAUI)

• Samouczek: Utwórz aplikację .NET MAUI.
• Włącz resetowanie haseł.
• Dostosuj domyślne znakowanie.

.NET (MAUI) WPF

• Samouczek : Uwierzytelnianie użytkowników w klasycznej aplikacji desktopowej WPF
• Włącz resetowanie haseł.
• Dostosuj domyślne znakowanie.