MS Graph (Angular)
This tutorial will show you how to connect to Microsoft Graph data using Azure AD authentication.
Prerequisites
Create new application at https://apps.dev.microsoft.com, add Web platform with Allow Implicit Flow enabled, set Redirect URLs to http://localhost:8000/ and add user.read permission.
Step 1: Create and configure the application
Create a new Radzen application by following the first step from the quickstart guide.
Step 2: Add the OData/Microsoft Graph data source
In this step we create a data source that connects to a Microsoft Graph data.
- Open the application that you created in the previous step for editing.
- Click data to go to the My DataSources screen.
- Click new to add a new data source.
- Select OData as data source type.
- Pick a Name for your data source.
- Pick a Azure AD authorization.
- Enter the Microsoft Graph connection info - REST endpoint (
https://graph.microsoft.com/v1.0/), Authorization URL (https://login.microsoftonline.com/common/oauth2/v2.0/authorize), ClientID for the application created at (https://apps.dev.microsoft.com) and scopes (user.read). For this example we are using common tenant, the Authorization URL for other tenant will behttps://login.microsoftonline.com/{tenant}/oauth2/v2.0/authorize - Click Next.
- Radzen will connect to the Microsoft Graph data and infer all entities. By default all entities are checked and you can choose/uncheck entities and/or entity properties needed for your application.
Step 3: Create page with DataGrid and display users
- Create new page, drop DataGrid component and bind it to Microsoft Graph users entity.
- Add new column to the DataGrid component and select displayName property.
- Run the application, login with your Microsoft account and browse the users.
