Exercise - Connect an ASP.NET Core app to Microsoft 365

  • 5 minutes

In this exercise, you'll work with an ASP.NET Core application and connect it to Microsoft 365. You'll use a .NET Core assembly named Microsoft.Identity.Web to allow users to sign in to your app with their Microsoft 365 account. Their name and profile picture will then be shown using the Microsoft Graph .NET Core SDK.

Configure and run the sample app

This exercise makes it easy for you to create a basic web app. To get the initial starting app code that you'll use, browse to https://github.com/microsoftdocs/mslearn-m365-microsoftgraph-dotnetcorerazor and choose from one of the following options:

  • If you use Git, clone the project by using the git clone command:

    git clone https://github.com/microsoftdocs/mslearn-m365-microsoftgraph-dotnetcorerazor.git

  • If you don't use Git, select the Code button followed by Download ZIP. Extract the *.zip file to your machine.

Once you have the initial app on your machine, follow these steps to get the app opened in your code editor.

  1. Go to the folder with the app’s source code and select one the following options depending on your code editor.

    • Visual Studio (2019 version 16.11.0 or higher)

      Double-click MicrosoftGraph-DotNetCoreRazor.sln in the mslearn-m365-microsoftgraph-dotnetcorerazor/Begin folder to open the project.

    • Visual Studio Code or another code editor

      Open the mslearn-m365-microsoftgraph-dotnetcorerazor/Begin folder in your code editor.

  2. In your code editor, open the appsettings.json file and take a moment to look through some of the settings.

  3. Change the value of the Scopes property to the following to allow access to read a user's profile and presence, mailbox settings (for time zone information), and calendars.

    user.read presence.read mailboxsettings.read calendars.read

  4. Save appsettings.json before continuing.

  5. To add the Microsoft Entra ID ClientId and ClientSecret values, you’ll use ASP.NET Core app secrets.

  6. Open a terminal window at the root of the mslearn-m365-microsoftgraph-dotnetcorerazor/Begin folder and run the following commands, substituting YOUR_APP_ID with your Application (client) ID from the Azure portal, and YOUR_APP_SECRET with the application secret you created.

    dotnet user-secrets init
dotnet user-secrets set "AzureAd:ClientId" "YOUR_APP_ID"
dotnet user-secrets set "AzureAd:ClientSecret" "YOUR_APP_SECRET"

    Important

    In a production application you can store sensitive information in a secure location such as Azure Key Vault.

  7. This project uses the following Microsoft identity platform and Microsoft Graph assemblies:

    • Microsoft.Identity.Web: Used to request and manage access tokens.
    • Microsoft.Identity.Web.UI: Provides the UI to sign in and sign out.
    • Microsoft.Identity.Web.MicrosoftGraph: Provides dependency injection for the Microsoft Graph SDK.

  8. Perform the following step based on your code editor:

    • Visual Studio

      Press F5 to build and run the project.

    • Visual Studio Code or another code editor

      Open a terminal window in the Begin folder and run the following command:

      dotnet run

    Important

    If you receive a warning that the certificate for localhost is untrusted, see Trust the ASP.NET Core HTTPS development certificate on Windows and macOS for instructions on using the .NET Core CLI to trust the development certificate. If you're running in Visual Studio and haven't already approved a developer certificate on your machine you may be prompted to approve a certificate.

  9. Open a browser and navigate to https://localhost:5001.

    Tip

    If you use Microsoft 365 in your daily work and plan to do this exercise in a development tenant (which is suggested), you may find it useful to work in private or “incognito” mode in the browser. You may even choose to use a different browser or browser profile than you normally use in production.

  10. Sign-in with your Microsoft 365 account.

  11. After successfully signing in, you'll be prompted to give consent for the required permissions. Select the checkbox to consent to the permissions for your organization and then select the Accept button.

  12. You should see the app display a welcome message with your username and profile picture.

  13. Close your browser and press CTRL+C in the terminal window to stop the server.

    Note

    If you’ve opened the project in Visual Studio, you can close the browser or select SHIFT+F5 in Visual Studio to stop the server. Close the terminal window Visual Studio created if it's still open.