In this video, I will show you how to build an HTML JS application using a Web API OData
service as a data provider and how to include OAuth authentication into your service.
I'll use the DevExtreme Visual Studio project templates and I've already opened my Visual
Studio and am ready to create a DevExtreme application.
Let’s get started.
First, let’s create a Web API OData service.
I am using a DevExtreme project template for this.
A standard Entity Data Model Wizard runs.
I will choose the Microsoft SQL Server to connect to the Northwind database.
I’m selecting the database table that I want to include into the generated model.
Okay.
The project that is generated by this wizard is extended by CORS and JSONP support.
The Web API OData Service project template provides the capability to include OAuth authentication
into your service.
For this, I will select the “Individual User Account” option.
Here is AccountController.
It manages the authorization mechanism The IdentityConfig.cs file contains code to
configure validation logic for a user name and password.
Here are account binding models where rules for creating new user data and a password
are defined.
I want to create a DevExtreme project for my application within the same solution as
my OData service.
I select the Multi-Channel project template, specify a name and click OK.
The DevExtreme Project Wizard runs.
I’ll select all the possible platforms for the generated project, a SlideOut navigation
layout, and I will use the data service I have recently created in this solution to
create views.
I’ll add the generated views to the shared platform-independent project and select JavaScript
as a programming language.
That’s all.
My projects are being generated.
Here they are.
The DevExtreme wizard created views for the Customer, Order and Order Details models.
It also created Account views.
Note that an ODataStore instance is created using the information saved by the wizard
to the configuration file..
This object provides access to my OData service Now, I’ll run the mobile project to show
that the created application is ready to use.
I can see all views without registration.
That is not the desired result, isn’t it?
Let’s add the application security to our project.
For this, I will open data service entities that I want to make secure.
I want to make the Customers entity secure.
I will type the [Authorize] annotation to enable the authorization mechanism for Customers.
Do this for all required entities.
Rebuild the data service.
Let’s run the app again.
Now, I’m redirected to the login page where I can sign it or register a new user.To register
a new user, I will click Register.
I will type user@devexpress.com as a user name.
I will type password.
It is automatically validated by our data service to fit all defined data annotation
rules.
Finally, I typed a password that fits all validation rules.
After a new user is registered successfully, I can use this data to log in a page.
Here you are.
That’s all for the video.
To learn more on how to define views, see the Getting Started video or read the Getting
Started tutorial in the documentation.