Consume REST service (Blazor)

This guide demonstrates how to consume a custom REST service and authenticate via OAuth. It requires some knowledge about Radzen as it covers advanced topics. Check the quickstart guide for the basics.

We will create a Spotify player application which will show the latest releases.

Running this application requires a Spotify or Facebook account.

How to build the application

• Step 1: Create and configure the application
• Step 2: Add the REST service
• Step 3: Create the New Releases page
• Step 4: Create the Tracks page

Step 1: Create and configure the application

Create a new Radzen application by following the first step from the quickstart guide. Name the application Spotify Player

Step 2: Add the REST service

In this step we will add a new REST data source which consumes two Spotify endpoints:

• Get a List of New Releases
• Get an Album’s Tracks

1. Open the Spotify Player application.
2. Click data to go to My DataSources.
3. Click new to add a new data source.
4. Select REST.
5. Set Name to Spotify.
6. Set the REST endpoint as https://api.spotify.com/v1/.
7. Set Authorization to OAuth.
8. Set ClientID to da4bd9113dec43578cca7c59c6bf6e44.
9. Set Client Secret to 34269665343a4eec93b9e7620e31c62c.
10. Set Authorization Endpoint to https://accounts.spotify.com/authorize.
11. Set Token Endpoint to https://accounts.spotify.com/api/token.
12. Click Next

Now we have to describe the responses that those two REST endpoints return. We will do so in the second step of the data source creation wizard by defining a few schemas.

First define the schemas returned by the Get a List of New Releases endpoint endpoint. A sample response is available in the Spotify documentation. We will use a few of the response properties and start defining schemas inside out - from the simplest objects to the ones that contain them.

First describe the images property. It is an array of objects:

{
  "height": 640,
  "url": "https://i.scdn.co/image/e6b635ebe3ef4ba22492f5698a7b5d417f78b88a",
  "width": 640
}

We only need the url property for the purpose of this demo.

1. Click add schema.
2. Set Name to Image.
3. Click the + button to add a new Property.
4. Set the property Name to url.

Now describe the artists property. We only need name.

1. Click add schema.
2. Set Name to Artist.
3. Click the + button to add a new Property.
4. Set the property Name to name.

We are now ready to define the Album schema.

1. Click add schema.
2. Set Name to Album.
3. Click the + button to add a new Property.
4. Set the property Name to album_type.
5. Add a new property.
6. Set the property Name to artists. Set Type to Artist. Check Is Array. This means that the artists property is an array of Album schemas.
7. Add a new property.
8. Set the property Name to id.
9. Add a new property.
10. Set the property Name to images. Set Type to Image. Check Is Array.
11. Add a new property.
12. Set the property Name to name.

Define the remaining schemas.

1. Add a new schema.
2. Set Name to Albums
3. Add a new property which is array of Album and is named items.

1. Add a new schema.
2. Set Name to AlbumsResponse
3. Add a new property of Albums type named albums.

We are ready with the responses of the Get a List of new Releases endpoint!

Now we have to define the actual resource that endpoint represents.

1. Click Next.
2. Click add resource.
3. Set Path to browse/new-releases which is the URL of the Get a List of new Releases endpoint.
4. Click the + button next to Operations to define a new operation with that path.
5. Set Name to getNewReleases. Radzen will create a function with this name that invokes this operation.
6. Set Method to GET.
7. Click the + button next to Responses to add a new response.
8. Set HTTP Status to 200. Set schema to AlbumsResponse.

Click Finish to complete the data source creation.

Step 3 Create the New Releases page

In this step we will create a new page, add a grid and bind it to the result of the getNewReleases operation.

1. Add a new page called New Releases.
2. Drag and drop a DataGrid component, set its Data property to result from getNewReleases invokation and auto-generate columns. We are done! Run the application to see the latest Spotify releases.