MS Graph (Blazor)

This tutorial will show you how to connect to Microsoft Graph data using Azure AD authentication.

1. Create new application in Azure portal.

2. Add http://localhost:5000/ms-graph-callback in Authentication -> Redirect URIs. Add permissions to sign-in and read the user. Check also Microsoft Graph REST API reference for more info how to access and manage users.

3. Create new Blazor application in Radzen, add new OData data-source connected to https://graph.microsoft.com/v1.0/ endpoint with AzureAD authentication. Set https://login.microsoftonline.com/common/v2.0/ for Authorization Endpoint and enter ClientID, and Client Secret obtained from your application in Azure portal. Add user.read to Scopes and check all entities.

4. Create new page, invoke MSGraph.getMe data source method using Load event and assign ${result.displayName} to name property. Add new Label component to the page and set Text property to ${name}.

5. Run the application, sign-in and check the result.

Let’s now list Microsoft OneDrive files and folders!

1. Create new page named OneDrive, drag and drop a Row and two Column component from Radzen toolbox. Set 3 and 9 for the size of first and second column and add Tree component to the first column and DataGrid component to the second column.
2. Define page property rootItems of type List<DriveItem> with null as value.
3. Invoke MSGraph data-source getDrives() method on page Load event and set page property driveId to result.Value.ToList()[0].id.
4. In getDrives() Then invoke MSGraph data-source getDrivesRoot() method with ${driveId} as parameter. Set rootItems to new List<DriveItem>(){ result } and define property itemId with value ${result.id}. Execute ${grid0.Reload()}.
5. Bind the Tree component to rootItems page property and define one level using microsoft.graph.driveItem schema. Set name for the level TextProperty property and children for the level ChildrenProperty property.
6. Invoke MSGraph data-source getDrivesItemsChildren() method on Tree component Expand event with three parameters:
   • id = ${driveId}.
   • driveItemId = {((DriveItem)args.Value).id}.
   • $filter = file eq null. Filter drive items to return only folders. Execute event.Children.TextProperty = "name" and event.Children.Data = result.Value in invoke Then.
7. Set page property itemId to ((DriveItem)event.Value).id on Tree component Change event and execute ${grid0.Reload()}.
8. Bind the DataGrid component to getDrivesItemsChildren() using new data wizard, remove unwanted columns and paging parameters from LoadData event getDrivesItemsChildren() invoke and add two parameters to:
   • id = ${driveId}.
   • driveItemId = ${itemId}. Turn off DataGrid paging, sorting and filtering and set Visible property to ${itemId != null}.

.. and that’s all!