SfDatamanager with WebApiAdaptor and authorization fails

[Chris]

Dear Syncfusion team,

I've been trying for a long time to connect the SfGrid with the SfDatamanager and the WebApiAdaptor.
 Everything works fine, but when I set the ApiController to [Authorize ()], I don't get any more data. 

namespace MyBlazorWebApiTest.Controller
{
    [Route("api/[controller]")]
    [ApiController]
    [Authorize()]
    public class CustomerController
    {

        [HttpGet]
        public object Get()
        {
            var l = GetSampleData();
            var tt = new { Items = l, Count = l.Count };
            return tt;
        }


        public static List<Customer>GetSampleData()
        {
            var l = new List<Customer>();
            l.Add(new() { ID = 1, Firstname = "Lin", Lastname = "Love" });
            l.Add(new() { ID = 2, Firstname = "Mike", Lastname = "Mutz" });
            l.Add(new() { ID = 3, Firstname = "Nils", Lastname = "None" });
            l.Add(new() { ID = 4, Firstname = "Poke", Lastname = "Port" });
            return l;
        }

    }
}

My Grid:

<sfgrid tvalue="Customer" toolbar="@(new List<string>() { " add",="" "edit",="" "delete"="" })"="">
    <sfdatamanager url="/api/customer" adaptor="Adaptors.WebApiAdaptor"></sfdatamanager>
    <gridcolumns>
        <gridcolumn field="@nameof(Customer.ID)"></gridcolumn>
        <gridcolumn field="@nameof(Customer.Firstname)"></gridcolumn>
        <gridcolumn field="@nameof(Customer.Lastname)"></gridcolumn>
    </gridcolumns>
</sfgrid>

[Rahul Narayanasamy]

Hi Chris, 

Greetings from Syncfusion. 

Query: SfDatamanager with WebApiAdaptor and authorization fails 

We have validated your query and we suspect that you are facing difficulties with accessing the data from Api controller using Authorization. Could you please refer the below documentation for achieving your requirement. 

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/data-binding#authorization-and-authentication  

https://blazor.syncfusion.com/documentation/datagrid/data-binding#configuring-httpclient  

Please let us know if  you have any concerns. 

Regards, 

Rahul 

[Chris]

Hi  Rahul 

Thank you for your quick reply.

I have now again spent hours trying to find a solution. Sure it's very simple, but I can't figure it out.

I have attached Sampleproject with the problem on the  /Index page.

Can you please help me?

Regards 
Chris

Attachment: MyBlazorWebApiTest_a21912d9.zip

[Rahul Narayanasamy]

Hi Chris, 

Thanks for sharing the details. 

We have checked your provided sample and we need some details regarding the sample. We have remove the [Authorize] attribute in Controller and checked the problem. The data was not loaded in the Grid and the controller is not even triggered after removing [Authorize]. So we need the details about whether did we need to register new user and check the problem from our end? 

Could you please share the below details. It will be helpful to proceed this problem further. 

• Whether did we need to register any user accounts in the provided sample and need to check the problem?
• Since we need to differentiate the authorized user/unauthorized user while loading page.
• Did you have any credentials to check the case from your end? If yes, then share the details about the login process.

Regards, 

Rahul 

 

[Chris]

Hi Rahul,

Thank you for your reply.

You wrote: The data was not loaded in the Grid and the controller is not even triggered after removing [Authorize]. 

I have downloaded the project again and when I remove the [Authorize()] anotation in the file:  /Controller/CustomerController.cs the grid loads the data. I have attached the project where I made just thi single change.

You wrote:  Could you please share the below details. It will be helpful to proceed this problem further. 

• Whether did we need to register any user accounts in the provided sample and need to check the problem?

Please register any user and add the the [Authorize()] anotation in the file:  /Controller/CustomerController.cs Line 13 to see the problem.

Best regards

Chris

Attachment: MyBlazorWebApiTest_a21912d9_(1)_c1c7b0f8.zip

[Rahul Narayanasamy]

Hi Chris, 

Thanks for sharing the details. 

We are currently checking your reported query with your provided sample at our end. We will update the further details in two business days(on August 24, 2021). Until then we appreciate your patience. 

Regards, 

Rahul 

[Vignesh Natarajan]

Hi Chris,  

Thanks for the patience.  

Query: “Please register any user and add the the [Authorize()] anotation in the file:  /Controller/CustomerController.cs Line 13 to see the problem.” 

We are able to reproduce the reported issue in the provided sample. This is because you have requested Authorization from all the users requesting from the CustomerController by using that Authorize() tag. You need to authenticate the each user with access token (which needs to be send along with the request being sent from user) to access that controller and return data. But in your sample, we could not find any access token or other token being sent along with the request.  

Please find some general links to send token to web api controller.  

https://docs.microsoft.com/en-us/aspnet/core/blazor/security/server/additional-scenarios?view=aspnetcore-5.0  

https://stackoverflow.com/questions/59891352/how-do-i-get-the-access-token-from-a-blazor-server-side-web-app  

Once you define access token, you can send the authorization token as Header using Headers property of SfDataManager. Refer the below code example and UG for your reference 

<SfGrid TValue="Order" AllowFiltering="true" AllowSorting="true" AllowPaging="true" Toolbar="@( new List<string> { "Search" })">  

   <SfDataManager Headers=@HeaderData Url="@OdataUrl" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager> 

    ... 

</SfGrid>

  

@code{  

    private IDictionary<string, string> HeaderData = new Dictionary<string, string>();  

  

    protected override void OnInitialized()  

    {  

        HeaderData.Add("Bearer", "{your_auth_token}");  

    }  

 

UG: https://blazor.syncfusion.com/documentation/datagrid/data-binding#setting-custom-headers       

Otherwise we request you to use AllowAnonymous tag to Get method of Api Controller to allow anonymous users to access and fetch data to Grid. component. Refer the below code example.    

public class CustomerController 

   { 

 

       [HttpGet]   

       [AllowAnonymous] 

       public object Get() 

       { 

           var l = GetSampleData(); 

           var tt = new { Items = l, Count = l.Count }; 

           return tt; 

       } 

https://docs.microsoft.com/en-us/aspnet/core/security/authorization/simple?view=aspnetcore-5.0 

Please get back to us if you have further queries.   

Regards, 

Vignesh Natarajan