How to use oAuth in Grid with ejDataManager?
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; } }
- OAuth 1.0 requires client to send two security tokens for each API call, and the use both to generate the signature.
- 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.
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
Figure 2 Registration success page
3. successfully login oAuth pass authorize token
Figure 3 Check authentication token
4. The “DataMangerModule” we can access authorized through the ej. DataManager.
Figure 4 Access got throw dataManager