Articles in this section
Category / Section

How to use oAuth in Grid with ejDataManager?

2 mins read

Problem:

How can we use OAuth support in jQuery DataGrid?

Solution:

Here we have passed the “Authorization” token through headers (Customer Http Headers) property in ej. DataManager to authenticate the users. For example , we have used “OAuth1.0” in below code . So Please ensure followings:

 

  self.dataManager = function () {
        self.result('');
         var token = sessionStorage.getItem(tokenKey);
        if (token) {
            $("#Grid").ejGrid({
                dataSource:ej.DataManager({ url: '/api/values', headers: [{ Authorization: 'Bearer ' + token }], adaptor: new ej.WebApiAdaptor(), offline: true, crossDomain: true }),
                allowPaging: true,
            columns: [        
                    { field: "OrderID", headerText: "Employee ID", width: 75, textAlign: ej.TextAlign.Right },
                    { field: "CustomerID", headerText: "Employee Name", width: 75, textAlign: ej.TextAlign.Left },
                    { field: "IsShipped", width: 80 },
                    { field: "ShipperCity",width:90 }
            ]
            })}    } [value controller]   [Authorize]
    public class ValuesController : ApiController
    {        public PageResult<Order> Get(ODataQueryOptions opts)
        {            List<Order> emp = CreateOrders();
             return new PageResult<Order>(emp as IEnumerable<Order>, null, emp.Count);}
        public static List<Order> CreateOrders()
        {
            List<Order> OrderList = new List<Order> 
            {
                new Order {OrderID = 10248, CustomerName = "Taiseer Joudeh", ShipperCity = "Amman", IsShipped = true },
                    . . .
            };
             return OrderList;       }
        public class Order
        {
            public int OrderID { get; set; }
            public string CustomerName { get; set; }
            public string ShipperCity { get; set; }
            public Boolean IsShipped { get; set; }        }  

 

  1. OAuth 1.0 requires client to send two security tokens for each API call, and the use both to generate the signature.
  2. Signatures are not required for the actual API calls once the token has been generated in OAuth2.0. It has only one security token.

For Your convenience we have attached the sample and the sample can be downloaded from the following link:
 
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ejDataManager_with_oAuth-314204440.zip
 

Steps to execute the sample as follows:
 
1. Run the sample and Register the credential. The “Register Module” is entry level of this application. Each user must be register in his credential in this module.
 

Register Module in JavaScript DataManager

Figure 1 Register Module

 

Password must be in combination of one alpha (capital and small) , numeric and non – numeric (minimum 6 letters)
 
 
2. success full register 

Successful registration in JavaScript DataManager

Figure 2 Registration success page

 

3. successfully login oAuth pass authorize token

Valildating Authentication in JavaScript DataManager

Figure 3 Check authentication token

 

4. The “DataMangerModule” we can access authorized through the ej. DataManager.

Edit Form in JavaScript DataManager

Figure 4 Access got throw dataManager

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied