How do I add a Bearer Token to the header of a HTTP request?

Question

I am having trouble figuring out how to set authorization headers with authorization as the key and a bearer token as the value.

I have completed a web API with authentication built into it. i have tested it on postman and it all works. the problem is on post man i take the token copy past it to a new key and value, in the site i am not sure how to change those values in a Blazor project.

When entering a Get to the API at http://testapi.com/api/token/ {username}/{password} the API sends back a code i need to take that code and put it in the header.

login.razor

@page "/"
@inject HttpClient Http

<h1>Hello, world!</h1>

Welcome To The New Site

<EditForm Model="@use" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit" Context="EditFormContext">
    <DataAnnotationsValidator />
    <DxFormLayout>
        <DxFormLayoutItem Caption="Username:" ColSpanMd="6">
            <Template>
                <DxTextBox @bind-Text="@use.username" />
            </Template>
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Password:" ColSpanMd="6">
            <Template>
                <DxTextBox @bind-Text="@use.password" />
            </Template>
        </DxFormLayoutItem>
        <DxFormLayoutItem ColSpanMd="12">
            <Template>
                <ValidationSummary />
            </Template>
        </DxFormLayoutItem>
        <DxFormLayoutItem ColSpanMd="12">
            <Template>
                <button type="submit">Submit</button>
            </Template>
        </DxFormLayoutItem>
    </DxFormLayout>
</EditForm>

@code {
        User[] token;
        User use = new User();

        async void  HandleValidSubmit()
        {
            token = await Http.GetJsonAsync<User[]>("http://testapi.com/api/token/" + use.username + "/" + use.password);
            if (token != null)
            {
                await SaveToken();
                await SetAuthorizationHeader();
                Console.WriteLine("OnValidSubmit");
            }
        }
        private void HandleInvalidSubmit()
        {
            Console.WriteLine("OnInvalidSubmit");
        }

        private async Task SaveToken()
        {

        }

        private async Task SetAuthorizationHeader()
        {

        }

    class User
    {
        public string username { get; set; }
        public string password { get; set; }
    }
}

Answer 1

I've got a similar setup with API / IdentityServer4 / Blazor(server-side). Maybe you can use some of my code I posted in this stackoverflow question .

Answer 2

If you are using a server side Blazor @Pascal R. answer should bring you to the right path. For client side Blazor:

1. Save the token to globaly reachable storage for you app. Like local storage or in a Cascading value
2. Each time you need to make an authenticated ws call get the token from the storage and add it as header.

To save the token in local storage I recommend using: Blazored Local storage .