|
| 1 | +--- |
| 2 | +title: Sign in users in a sample WPF desktop application |
| 3 | +description: Learn how to configure a sample WPF desktop to sign in and sign out users. |
| 4 | +services: active-directory |
| 5 | +author: SHERMANOUKO |
| 6 | +manager: mwongerapk |
| 7 | + |
| 8 | +ms.author: shermanouko |
| 9 | +ms.service: active-directory |
| 10 | +ms.workload: identity |
| 11 | +ms.subservice: ciam |
| 12 | +ms.topic: sample |
| 13 | +ms.date: 07/26/2023 |
| 14 | +ms.custom: developer |
| 15 | + |
| 16 | +#Customer intent: As a dev, devops, I want to learn about how to configure a sample WPF desktop app to sign in and sign out users with my Azure Active Directory (Azure AD) for customers tenant |
| 17 | +--- |
| 18 | + |
| 19 | +# Sign in users in a sample WPF desktop application |
| 20 | + |
| 21 | +This article uses a sample Windows Presentation Foundation (WPF) application to show you how to add authentication to a WPF desktop application. The sample application enables users to sign in and sign out. The sample desktop application uses [Microsoft Authentication Library for .NET](https://github.com/AzureAD/microsoft-authentication-library-for-dotnet) for .NET to handle authentication. |
| 22 | + |
| 23 | +## Prerequisites |
| 24 | + |
| 25 | +- [.NET 7.0](https://dotnet.microsoft.com/download/dotnet/7.0) or later. |
| 26 | + |
| 27 | +- [Visual Studio Code](https://code.visualstudio.com/download) or another code editor. |
| 28 | + |
| 29 | +- Azure AD for customers tenant. If you don't already have one, [sign up for a free trial](https://aka.ms/ciam-free-trial?wt.mc_id=ciamcustomertenantfreetrial_linkclick_content_cnl). |
| 30 | + |
| 31 | +## Register the desktop app |
| 32 | + |
| 33 | +[!INCLUDE [active-directory-b2c-register-app](./includes/register-app/register-client-app-common.md)] |
| 34 | + |
| 35 | +## Specify your app platform |
| 36 | + |
| 37 | +[!INCLUDE [active-directory-b2c-wpf-app-platform](./includes/register-app/add-platform-redirect-url-wpf.md)] |
| 38 | + |
| 39 | +## Grant API permissions |
| 40 | + |
| 41 | +Since this app signs-in users, add delegated permissions: |
| 42 | + |
| 43 | +[!INCLUDE [active-directory-b2c-grant-delegated-permissions](./includes/register-app/grant-api-permission-sign-in.md)] |
| 44 | + |
| 45 | +## Create a user flow |
| 46 | + |
| 47 | +[!INCLUDE [active-directory-b2c-app-integration-add-user-flow](./includes/configure-user-flow/create-sign-in-sign-out-user-flow.md)] |
| 48 | + |
| 49 | +## Associate the WPF application with the user flow |
| 50 | + |
| 51 | +[!INCLUDE [active-directory-b2c-app-integration-add-user-flow](./includes/configure-user-flow/add-app-user-flow.md)] |
| 52 | + |
| 53 | +## Clone or download sample WPF application |
| 54 | + |
| 55 | +To get the WPF desktop app sample code, you can do either of the following tasks: |
| 56 | + |
| 57 | +- [Download the .zip file](https://github.com/Azure-Samples/ms-identity-ciam-dotnet-tutorial/archive/refs/heads/main.zip) or clone the sample desktop application from GitHub by running the following command: |
| 58 | + |
| 59 | + ```console |
| 60 | + git clone https://github.com/Azure-Samples/ms-identity-ciam-dotnet-tutorial.git |
| 61 | + ``` |
| 62 | + |
| 63 | +If you choose to download the *.zip* file, extract the sample app file to a folder where the total length of the path is 260 or fewer characters. |
| 64 | + |
| 65 | +## Configure the sample WPF app |
| 66 | + |
| 67 | +1. Open the project in your IDE (like Visual Studio or Visual Studio Code) to configure the code. |
| 68 | + |
| 69 | +1. In your code editor, open the *appsettings.json* file in the **ms-identity-ciam-dotnet-tutorial** > **1-Authentication** > **5-sign-in-dotnet-wpf** folder. |
| 70 | + |
| 71 | +1. Replace `Enter_the_Application_Id_Here` with the Application (client) ID of the app you registered earlier. |
| 72 | + |
| 73 | +1. Replace `Enter_the_Tenant_Subdomain_Here` with the Directory (tenant) subdomain. For example, if your primary domain is *contoso.onmicrosoft.com*, replace `Enter_the_Tenant_Subdomain_Here` with *contoso*. If you don't have your primary domain, learn how to [read tenant details](how-to-create-customer-tenant-portal.md#get-the-customer-tenant-details). |
| 74 | + |
| 75 | +## Run and test sample WPF desktop app |
| 76 | + |
| 77 | +1. Open a console window, and change to the directory that contains the WPF desktop sample app: |
| 78 | + |
| 79 | + ```console |
| 80 | + cd 1-Authentication\5-sign-in-dotnet-wpf |
| 81 | + ``` |
| 82 | + |
| 83 | +1. In your terminal, run the app by running the following command: |
| 84 | + |
| 85 | + ```console |
| 86 | + dotnet run |
| 87 | + ``` |
| 88 | + |
| 89 | +1. After you launch the sample you should see a window with a **Sign-In** button. Select the **Sign-In** button. |
| 90 | + |
| 91 | + :::image type="content" source="./media/sample-wpf-dotnet-sign-in/wpf-sign-in-screen.png" alt-text="Screenshot of sign-in screen for a WPF desktop application."::: |
| 92 | + |
| 93 | +1. On the sign-in page, enter your account email address. If you don't have an account, select **No account? Create one**, which starts the sign-up flow. Follow through this flow to create a new account and sign in. |
| 94 | +1. Once you sign in, you'll see a screen displaying successful sign-in and basic information about your user account stored in the retrieved token. |
| 95 | + |
| 96 | + :::image type="content" source="./media/sample-wpf-dotnet-sign-in/wpf-successful-sign-in.png" alt-text="Screenshot of successful sign-in for desktop WPF app."::: |
| 97 | + |
| 98 | +### How it works |
| 99 | + |
| 100 | +The main configuration for the public client application is handled within the *App.xaml.cs* file. A `PublicClientApplication` is initialized along with a cache for storing access tokens. The application will first check whether there's a cached token that can be used to sign the user in. If there's no cached token, the user will be prompted to provide credentials and sign-in. Upon signing-out, the cache is cleared of all accounts and all corresponding access tokens. |
| 101 | + |
| 102 | +## Next steps |
| 103 | + |
| 104 | +See the tutorial on how to [build your own WPF desktop app that authenticates users](tutorial-desktop-wpf-dotnet-sign-in-prepare-tenant.md) |
0 commit comments