microsoftgraph / msgraph-sample-blazor-clientside

This sample demonstrates how to use the Microsoft Graph .NET SDK to access data in Office 365 from Blazor WebAssembly apps.

page_type	description	products	languages
sample	This sample demonstrates how to use the Microsoft Graph .NET SDK to access data in Office 365 from Blazor WebAssembly apps.	ms-graph office-exchange-online blazor	csharp

Microsoft Graph sample Blazor WebAssembly app

This sample demonstrates how to use the Microsoft Graph .NET SDK to access data in Office 365 from Blazor WebAssembly apps.

NOTE: This sample was originally built from a tutorial published on the Microsoft Graph tutorials page. That tutorial has been removed.

Prerequisites

• .NET Core SDK

Register an app in Azure AD

1. Open a browser and navigate to the Azure Active Directory admin center. Login using a personal account (aka: Microsoft Account) or Work or School Account.

2. Select Azure Active Directory in the left-hand navigation, then select App registrations under Manage.

3. Select New registration. On the Register an application page, set the values as follows.

   • Set Name to Blazor Graph Sample.
   • Set Supported account types to Accounts in any organizational directory and personal Microsoft accounts.
   • Under Redirect URI, set the first drop-down to Single-page application (SPA) and set the value to https://localhost:7067/authentication/login-callback.

4. Select Register. On the Blazor Graph Tutorial page, copy the value of the Application (client) ID and save it, you will need it in the next step.

Configure the sample

1. Create a new file in the ./GraphSample/wwwroot directory named appsettings.Development.json and add the following code.

   {
     "AzureAd": {
       "ClientId": "YOUR_CLIENT_ID_HERE"
     }
   }

2. Replace YOUR_CLIENT_ID_HERE with the Application (client) ID value from your app registration.

Running the sample

Run the following command in the GraphSample directory.

dotnet run

Open your browser to https://localhost:7067.

Code of conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

msgraph-sample-blazor-clientside's Issues

DenyAnonymousAuthorizationRequirement: Requires an authenticated user.

Where did you get the code?

Followed the tutorial from Microsoft Graph tutorials

Describe the bug

After clicking login, I'm getting the following error:
info: Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2]
Authorization failed. These requirements were not met:
DenyAnonymousAuthorizationRequirement: Requires an authenticated user.
WebSocket failed to connect.

To Reproduce

Steps to reproduce the behavior:

Follow the tutorial, click login

Expected behavior

I should get the access token in the console

Screenshots

If applicable, add screenshots to help explain your problem.

Desktop

• OS: Windows 10
• Browser Edge
• Version 21H2

Dependency versions

• Authentication library (MSAL, etc.) version:
• Graph library (Graph SDK, REST library, etc.) version:

Additional context

Add any other context about the problem here.

me request returns HTTP 400 "Invalid version."

Where did you get the code?

• Downloaded from GitHub
• Downloaded from the Microsoft Graph quick start tool
• Followed the tutorial from Microsoft Graph tutorials

Describe the bug

When I login with Microsoft personal account and the app tries to query my information, I receive HTTP 400 bad request

For https://graph.microsoft.com/me?%24select=displayName,mail,mailboxSettings,userPrincipalName:

{
  "error": {
      "code": "BadRequest",
      "message": "Invalid version.",
      "innerError": {
          "date": "2023-07-13T00:22:11",
          "request-id": "6fe204d7-5b75-4c36-8bf1-acaa8cd743da",
          "client-request-id": "6fe204d7-5b75-4c36-8bf1-acaa8cd743da"
      }
  }
}

To Reproduce

Steps to reproduce the behavior:

1. Follow the setup instructions
2. Click on Sign In

Expected behavior

User information is retrieved.

Screenshots

Desktop

• OS: Windows 11 22H2
• Browser: Edge
• Version: 114.0.1823.79

Dependency versions

• Authentication library (MSAL, etc.) version: 7.0.9
• Graph library (Graph SDK, REST library, etc.) version: 5.18.0

Question about persisting the login information

This was a great sample, thanks a lot for it! The sample works as expected but I have on additional requirement, which is the ability to keep the user logged in as long as possible.

I've used the line below to achieve that via localStorage. However, when the token expires an exception will be thrown. I'm trying to find out how to refresh the token or at least redirect the user to the login page again. Right now I have to delete the localStorage in order to get the app to run again. Manually browsing to /authentication/login does not work in this state.

options.ProviderOptions.Cache.CacheLocation = "localStorage";

Does anyone have a good tip to solve that?

Authorization failed. These requirements were not met

Downloaded completed code and followed instructions from
https://github.com/microsoftgraph/msgraph-training-blazor-clientside/tree/main/demo

Get the following error when trying to login with AAD Account
Adding User.Read to requested permissions Adding MailboxSettings.Read to requested permissions Adding Calendars.ReadWrite to requested permissions info: Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2] Authorization failed. These requirements were not met: DenyAnonymousAuthorizationRequirement: Requires an authenticated user. info: Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2] Authorization failed. These requirements were not met: DenyAnonymousAuthorizationRequirement: Requires an authenticated user.