Επεξεργασία

Κοινή χρήση μέσω

Sign in users in a sample .NET MAUI desktop application

  • Άρθρο

Applies to: White circle with a gray X symbol. Workforce tenants Green circle with a white check mark symbol. External tenants (learn more)

This how-to guide uses a sample .NET Multi-platform App UI (.NET MAUI) to show how to add authentication to a desktop application by using an external tenant. The sample application enables users to sign in and sign out. The sample .NET MAUI desktop application uses Microsoft Authentication Library (MSAL) for .NET to handle authentication.

In this article, you do the following tasks:

  • Register a .NET MAUI desktop application in the external tenant.
  • Create a sign-in and sign-out user flow in the external tenant.
  • Associate your .NET MAUI desktop application with the user flow.
  • Update a sample .NET MAUI desktop application to use your own external tenant details.
  • Run and test the sample .NET MAUI desktop application.

Prerequisites

Register .NET MAUI desktop application

To enable your application to sign in users with Microsoft Entra, Microsoft Entra External ID must be made aware of the application you create. The app registration establishes a trust relationship between the app and Microsoft Entra. When you register an application, External ID generates a unique identifier known as an Application (client) ID, a value used to identify your app when creating authentication requests.

The following steps show you how to register your app in the Microsoft Entra admin center:

  1. Sign in to the Microsoft Entra admin center as at least an Application Developer.

  2. If you have access to multiple tenants, use the Settings icon in the top menu to switch to your external tenant from the Directories + subscriptions menu.

  3. Browse to Identity >Applications > App registrations.

  4. Select + New registration.

  5. In the Register an application page that appears;

    1. Enter a meaningful application Name that is displayed to users of the app, for example ciam-client-app.
    2. Under Supported account types, select Accounts in this organizational directory only.

  6. Select Register.

  7. The application's Overview pane displays upon successful registration. Record the Application (client) ID to be used in your application source code.

To specify your app type to your app registration, follow these steps:

  1. Under Manage, select Authentication.
  2. On the Platform configurations page, select Add a platform, and then select Mobile and Desktop applications option.
  3. For the Redirect URIs enter msalEnter_the_Application_Id_Here://auth, replace Enter_the_Application_Id_Here with the Application (client) ID that you copied earlier, then select Configure.
  4. Select Save to save the changes.

Once you register your application, it gets assigned the User.Read permission. However, since the tenant is an external tenant, the customer users themselves can't consent to this permission. You as the admin must consent to this permission on behalf of all the users in the tenant:

  1. From the App registrations page, select the application that you created (such as ciam-client-app) to open its Overview page.

  2. Under Manage, select API permissions.

    1. Select Grant admin consent for <your tenant name>, then select Yes.
    2. Select Refresh, then verify that Granted for <your tenant name> appears under Status for the permission.

Create a user flow

Follow these steps to create a user flow a customer can use to sign in or sign up for an application.

  1. Sign in to the Microsoft Entra admin center as at least an External ID User Flow Administrator.

  2. If you have access to multiple tenants, use the Settings icon in the top menu to switch to your external tenant from the Directories + subscriptions menu.

  3. Browse to Identity > External Identities > User flows.

  4. Select + New user flow.

  5. On the Create page:

    1. Enter a Name for the user flow, such as SignInSignUpSample.

    2. In the Identity providers list, select Email Accounts. This identity provider allows users to sign-in or sign-up using their email address.

      Note

      Additional identity providers will be listed here only after you set up federation with them. For example, if you set up federation with Google or Facebook, you'll be able to select those additional identity providers here.

    3. Under Email accounts, you can select one of the two options. For this tutorial, select Email with password.

      • Email with password: Allows new users to sign up and sign in using an email address as the sign-in name and a password as their first factor credential.
      • Email one-time-passcode: Allows new users to sign up and sign in using an email address as the sign-in name and email one-time passcode as their first factor credential. Email one-time passcode must be enabled at the tenant level (All Identity Providers > Email One-time-passcode) for this option to be available at the user flow level.

    4. Under User attributes, choose the attributes you want to collect from the user upon sign-up. By selecting Show more, you can choose attributes and claims for Country/Region, Display Name, and Postal Code. Select OK. (Users are only prompted for attributes when they sign up for the first time.)

  6. Select Create. The new user flow appears in the User flows list. If necessary, refresh the page.

To enable self-service password reset, use the steps in Enable self-service password reset article.

Associate the .NET MAUI desktop application with the user flow

For the customer users to see the sign-up or sign-in experience when they use your app, you need to associate your app with a user flow. Although many applications can be associated with your user flow, a single application can only be associated with one user flow.

  1. On the sidebar menu, select Identity.

  2. Select External Identities, then User flows.

  3. In the User flows page, select the User flow name you created earlier, for example, SignInSignUpSample.

  4. Under Use, select Applications.

  5. Select Add application.

  6. Select the application from the list such as ciam-client-app or use the search box to find the application, and then select it.

  7. Choose Select.

Once you associate your app with a user flow, you can test your user flow by simulating a user’s sign-up or sign-in experience with your application from within the Microsoft Entra admin center. To do so, use the steps in Test your sign-up and sign-in user flow.

Clone or download sample .NET MAUI desktop application

To get the .NET MAUI desktop application sample code, download the .zip file or clone the sample .NET MAUI desktop application from GitHub by running the following command:

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

Configure the sample .NET MAUI desktop application

  1. In Visual Studio, open ms-identity-ciam-dotnet-tutorial-main/1-Authentication/2-sign-in-maui/appsettings.json file.
  2. Find the placeholder:
    1. Enter_the_Tenant_Subdomain_Here and replace it with the Directory (tenant) subdomain. For example, if your tenant primary domain is contoso.onmicrosoft.com, use contoso. If you don't have your tenant name, learn how to read your tenant details.
    2. Enter_the_Application_Id_Here and replace it with the Application (client) ID of the app you registered earlier.

Run and test sample .NET MAUI desktop application

.NET MAUI apps are designed to run on multiple operating systems and devices. You'll need to select which target you want to test and debug your app with.

Set the Debug Target in the Visual Studio toolbar to the device you want to debug and test with. The following steps demonstrate setting the Debug Target to Windows:

  1. Select Debug Target drop-down.
  2. Select Framework
  3. Select net7.0-windows...

Run the app by pressing F5 or select the play button at the top of Visual Studio.

  1. You can now test the sample .NET MAUI desktop application. After you run the application, the desktop application window appears automatically:

    Screenshot of the sign-in button in the desktop application

  2. On the desktop window that appears, select the Sign In button. A browser window opens, and you're prompted to sign in.

    Screenshot of user prompt to enter credential in desktop application.

    During the sign in process, you're prompted to grant various permissions (to allow the application to access your data). Upon successful sign in and consent, the application screen displays the main page.

    Screenshot of the main page in the desktop application after signing in.

Next Steps