Rychlý start: Přihlášení uživatelů v ukázkové desktopové aplikaci

• Node.js
• Visual Studio Code nebo jiného kódového editoru

• S Visual Studio s nainstalovanou úlohou vývoj pro univerzální platformu Windows

1. Na stránce Přehled registrované aplikace v části Spravovatvyberte Ověřování.
2. Na stránce konfigurace platformy vyberte Přidat platformu>Mobilní a desktopové aplikace.
3. V části Adresa URI pro přesměrovánízadejte http://localhost.
4. Vyberte Konfigurujte.

1. Na stránce Přehled registrované aplikace v části Spravovatvyberte Ověřování.
2. Na stránce konfigurace platformy vyberte Přidat platformu>Mobilní a desktopové aplikace.
3. V části identifikátorů URI pro přesměrovánívyberte https://login.microsoftonline.com/common/oauth2/nativeclient a v identifikátorů URI pro vlastní přesměrovánípřidejte ms-appx-web://microsoft.aad.brokerplugin/{client_id}, kde {client_id} je ID aplikace (klienta).
4. Vyberte Konfigurujte.

• Pokud chcete ukázku naklonovat, otevřete příkazový řádek a přejděte do umístění, kam chcete projekt vytvořit, a zadejte následující příkaz:

  git clone https://github.com/Azure-Samples/ms-identity-javascript-nodejs-desktop.git
  

• Stáhnout soubor .zip. Extrahujte ho do cesty k souboru, kde délka názvu je menší než 260 znaků.

• Pokud chcete ukázku naklonovat, otevřete příkazový řádek a přejděte do umístění, kam chcete projekt vytvořit, a zadejte následující příkaz:

  git clone https://github.com/Azure-Samples/active-directory-dotnet-desktop-msgraph-v2.git
  

• Stáhnout soubor .zip

Extrahujte projekt, otevřete složku ms-identity-JavaScript-nodejs-desktop-main a poté otevřete soubor .authConfig.js. Nahraďte hodnotu následujícím způsobem:

Soubor by měl vypadat nějak takto:

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

1. Extrahujte soubor ZIP do místní složky blízko kořenového adresáře disku, například C:\Azure-Samples.

2. Otevřete projekt v prostředí Visual Studio.

3. Upravte App.Xaml.cs a nahraďte hodnoty polí ClientId a Tenant následujícím kódem:

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

Kde:

• Enter_the_Application_Id_here – je ID aplikace (klient) pro aplikaci, kterou jste zaregistrovali.

  Chcete-li najít hodnotu ID aplikace (klient) , přejděte na stránku Přehled aplikace v Centru pro správu Microsoft Entra.

• Enter_the_Tenant_Info_Here – je nastavená na jednu z následujících možností:

  • Pokud vaše aplikace podporuje Účty v tomto organizačním adresáři, nahraďte tuto hodnotu ID tenanta nebo název tenanta (například contoso.microsoft.com).

  • Pokud vaše aplikace podporuje účty v jakémkoli organizačním adresáři, tuto hodnotu nahraďte organizations.

  • Pokud vaše aplikace podporuje účty v libovolném organizačním adresáři a osobní účty Microsoft, nahraďte tuto hodnotu common.

    Pokud chcete najít hodnoty ID adresáře (tenanta) a podporované typy účtů, přejděte na stránku přehledu aplikace v Centru pro správu Microsoft Entra.

1. Závislosti této ukázky budete muset nainstalovat jednou:

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

2. Pak aplikaci spusťte přes příkazový řádek nebo konzolu:

   npm start
   

3. Vyberte Přihlášení a spusťte proces přihlášení.

   Při prvním přihlášení se zobrazí výzva k zadání souhlasu, abyste aplikaci povolili přihlášení a přístup k vašemu profilu. Po úspěšném přihlášení budete přesměrováni zpět do aplikace.

Pokud chcete sestavit a spustit ukázkovou aplikaci v sadě Visual Studio, postupujte takto:

1. Vyberte nabídku Ladění>Spustit laděnínebo stiskněte klávesu F5. Hlavní okno vaší aplikace je zobrazeno.
2. Vyberte tlačítko rozhraní Microsoft Graph API volání.
3. Přihlaste se pomocí svého účtu Microsoft Entra (pracovního nebo školního účtu) nebo účtu Microsoft (live.com, outlook.com).
4. Pokud aplikaci spouštíte poprvé, zobrazí se výzva k udělení souhlasu, abyste aplikaci povolili přístup k vašemu profilu uživatele a přihlásili se. Po vyjádření souhlasu s požadovanými oprávněními se aplikace zobrazí, že jste se úspěšně přihlásili.

Měli byste vidět některé základní informace o tokenu a uživatelská data získaná z volání rozhraní Microsoft Graph API.

Další informace o vývoji desktopových aplikací Elektron pomocí MSAL Node najdete v tomto kurzu:

Vyzkoušejte si desktopový kurz windows pro kompletní podrobný průvodce vytvářením aplikací a nových funkcí, včetně úplného vysvětlení tohoto rychlého startu.

• Node.js
• editoru Visual Studio Code nebo jiného editoru kódu*

• .NET 7.0 SDK nebo novější
• Visual Studio 2022 s nainstalovanou pracovní zátěží MAUI:
  • Pokyny pro Windows
  • pokyny pro macOS
• Přidání aplikace do toku uživatele

• Visual Studio Code nebo jiného kódového editoru
• .NET 7.0 nebo novější
• Přidání aplikace do toku uživatele

Pokud chcete zadat typ aplikace pro registraci aplikace, postupujte takto:

1. V části Spravovatvyberte Ověřování.
2. Na stránce Konfigurace platformy vyberte možnost Přidat platformua pak vyberte možnost Mobilní a desktopové aplikace.
3. Pro vlastní přesměrování URI zadejte http://localhost, poté vyberte Konfigurovat.
4. Vyberte Konfigurovat pro uložení změn.

Pokud chcete zadat typ aplikace pro registraci aplikace, postupujte takto:

1. V části Spravovatvyberte Ověřování.
2. Na stránce Konfigurace platformy vyberte Přidat platformua pak vyberte možnost Mobilní a desktopové aplikace.
3. Pro přesměrovací URI zadejte msal{client_id}://auth. Ujistěte se, že {client_id} odpovídá hodnotě registrace vaší aplikace. Vyberte Konfigurujte.
4. Chcete-li změny uložit, vyberte Uložit.

Pokud chcete zadat typ aplikace pro registraci aplikace, postupujte takto:

1. V části Spravovatvyberte Ověřování.
2. Na stránce Konfigurace platformy vyberte možnost Přidat platformua pak vyberte možnost Mobilní a desktopové aplikace.
3. Do vstupního pole v části Identifikátor URI vlastního přesměrovánízadejte ručně https://login.microsoftonline.com/common/oauth2/nativeclienta pak vyberte Konfigurovat. Pokud tento identifikátor URI vyberete v rozbalovacím seznamu, může se zobrazit chyba přesměrování URI.

Pokud chcete získat ukázkový kód desktopové aplikace, stáhněte soubor .zip nebo naklonujte ukázkovou webovou aplikaci z GitHubu spuštěním následujícího příkazu:

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

Pokud se rozhodnete stáhnout soubor .zip, extrahujte ukázkový soubor aplikace do složky, kde celková délka cesty je 260 nebo méně znaků.

Instalace závislostí projektu

1. Otevřete okno konzoly a přejděte do adresáře, který obsahuje ukázkovou aplikaci Elektron:

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

2. Spuštěním následujících příkazů nainstalujte závislosti aplikací:

   npm install && npm update
   

Pokud chcete získat ukázkový kód desktopové aplikace .NET MAUI, stáhněte soubor .zip nebo naklonujte ukázkovou desktopovou aplikaci .NET MAUI z GitHubu spuštěním následujícího příkazu:

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

Pokud chcete získat ukázkovou aplikaci, můžete ji buď naklonovat z GitHubu, nebo si ji stáhnout jako soubor .zip.

• Pokud chcete ukázku naklonovat, otevřete příkazový řádek a přejděte do umístění, kam chcete projekt vytvořit, a zadejte následující příkaz:

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

• Stáhnout soubor .zip. Extrahujte ho do souborové cesty, kde délka názvu je menší než 260 znaků.

1. V editoru kódu otevřete soubor App\authConfig.js.

2. Vyhledejte zástupný symbol:

   1. Enter_the_Application_Id_Here a nahraďte ho ID klienta aplikace, kterou jste zaregistrovali dříve.

   2. Enter_the_Tenant_Subdomain_Here a nahraďte ji subdoménou adresáře. Pokud je například primární doména vašeho tenanta contoso.onmicrosoft.com, použijte contoso. Pokud neznáte název svého nájemníka, zjistěte, jak získat podrobnosti o nájemníkovi.

1. V aplikaci Visual Studio otevřete soubor ms-identity-ciam-dotnet-tutorial-main/1-Authentication/2-sign-in-maui/appsettings.json.
2. Vyhledejte zástupný symbol:
   1. Enter_the_Tenant_Subdomain_Here a nahraďte ji subdoménou adresáře. Pokud je například primární doména vašeho tenanta contoso.onmicrosoft.com, použijte contoso. Pokud neznáte název svého nájemníka, zjistěte, jak získat podrobnosti o nájemníkovi.
   2. Enter_the_Application_Id_Here a nahraďte ho ID aplikace (klienta) aplikace, kterou jste zaregistrovali dříve.

1. Otevřete projekt v integrovaném vývojovém prostředí (například Visual Studio nebo Visual Studio Code) a nakonfigurujte ho.

2. V editoru kódu otevřete soubor appsettings.json ve složce ms-identity-ciam-dotnet-tutorial>1-Authentication>5-sign-in-dotnet-wpf.

3. Nahraďte Enter_the_Application_Id_Here IDem aplikace (klienta), kterou jste zaregistrovali dříve.

4. Nahraďte Enter_the_Tenant_Subdomain_Here subdoménou adresáře (tenanta). Pokud je například vaše primární doména contoso.onmicrosoft.com, nahraďte Enter_the_Tenant_Subdomain_Herecontoso. Pokud nemáte primární doménu, přečtěte si, jak přečíst podrobnosti o tenantovi.

Teď můžete otestovat ukázkovou desktopovou aplikaci Elektron. Po spuštění aplikace se automaticky zobrazí okno desktopové aplikace:

1. V terminálu spusťte následující příkaz:

   npm start
   

   

2. V zobrazeném okně plochy vyberte tlačítko Přihlásit se nebo Zaregistrovat se. Otevře se okno prohlížeče a zobrazí se výzva k přihlášení.

3. Na přihlašovací stránce prohlížeče zadejte e-mailovou adresu, vyberte Další, zadejte Hesloa pak vyberte Přihlásit se. Pokud účet nemáte, vyberte Žádný účet? Vytvořte jeden odkaz, který spustí tok registrace.

4. Pokud zvolíte možnost registrace po vyplnění e-mailu, jednorázového hesla, nového hesla a dalších podrobností účtu, dokončíte celý tok registrace. Zobrazí se stránka podobná následujícímu snímku obrazovky. Pokud zvolíte možnost přihlášení, zobrazí se podobná stránka. Na stránce se zobrazují deklarace identity ID tokenu.

   

Aplikace .NET MAUI jsou navržené tak, aby běžely na několika operačních systémech a zařízeních. Budete muset vybrat cíl, kterým chcete otestovat a ladit aplikaci.

Nastavte cíl ladění na panelu nástrojů sady Visual Studio na zařízení, které chcete použít k ladění a testování. Následující kroky ukazují, jak nastavit cíl ladění pro Windows.

1. Vyberte z rozbalovacího seznamu Cíl ladění.
2. Vyberte framework
3. Vyberte net7.0-windows...

Spusťte aplikaci stisknutím F5 nebo vyberte tlačítko přehrát v horní části sady Visual Studio.

1. Teď můžete otestovat ukázkovou desktopovou aplikaci .NET MAUI. Po spuštění aplikace se automaticky zobrazí okno desktopové aplikace:

   

2. V zobrazeném okně plochy vyberte tlačítko Přihlásit se. Otevře se okno prohlížeče a zobrazí se výzva k přihlášení.

   

   Během procesu přihlášení se zobrazí výzva k udělení různých oprávnění (aby aplikace mohla přistupovat k vašim datům). Po úspěšném přihlášení a vyjádření souhlasu se na obrazovce aplikace zobrazí hlavní stránka.

   

1. Otevřete okno konzoly a přejděte do adresáře, který obsahuje ukázkovou aplikaci WPF pro stolní počítače:

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

2. V terminálu spusťte aplikaci spuštěním následujícího příkazu:

   dotnet run
   

3. Po spuštění ukázky by se mělo zobrazit okno s tlačítkem Přihlášení. Vyberte tlačítko přihlášení .

   

4. Na přihlašovací stránce zadejte e-mailovou adresu svého účtu. Pokud účet nemáte, vyberte Žádný účet? Vytvořte jeden, který spustí tok registrace. Projděte si tento tok a vytvořte nový účet a přihlaste se.

5. Po přihlášení se zobrazí obrazovka s úspěšným přihlášením a základními informacemi o vašem uživatelském účtu uloženém v načteného tokenu. Základní informace se zobrazí v části informace o tokenu přihlašovací obrazovky.

• Povolitresetování hesla .
• Přizpůsobit výchozí branding.
• Prozkoumejte ukázkový kód desktopové aplikace Electron.

• kurz : Vytvoření aplikace .NET MAUI.
• Povolitresetování hesla .
• Přizpůsobit výchozí branding.

• Kurz : Ověřování uživatelů v desktopové aplikaci WPF
• Povolitresetování hesla .
• Přizpůsobit výchozí branding.