J'essaie ma première application Blazor, côté client, et je me bats avec l'authentification. J'ai réussi à appeler mon API, à obtenir un jeton et à m'authentifier dans l'application. J'ai besoin de stocker le jeton JWT quelque part - et j'ai pensé que, dans les revendications, cela pourrait être OK. (Peut-être que c'est là que je me trompe, et cela devrait être d'une manière ou d'une autre, dans LocalStorage ou quelque chose?)

Donc, pour mon autorisation, j'ai un AuthenticationStateProvider, où - les choses fonctionnent bien. Je m'authentifie. Mais je ne parviens pas à accéder à mon jeton.

Est-ce le bon endroit pour l'ajouter? Et si oui, pourquoi ce code me fait-il défaut?

    public class CustomAuthenticationStaterProvider : AuthenticationStateProvider
    {
        public override Task<AuthenticationState> GetAuthenticationStateAsync()
        {
            var identity = new ClaimsIdentity();

            var user = new ClaimsPrincipal(identity);

            return Task.FromResult(new AuthenticationState(user));
        }

        public void AuthenticateUser(AuthenticationResponse request)
        {
            if (request.ResponseDetails.IsSuccess == false)
                return;

            var identity = new ClaimsIdentity(new[]
            {
                new Claim("token", request.Token),
                new Claim(ClaimTypes.Email, request.Email),
                new Claim(ClaimTypes.Name, $"{request.Firstname} {request.Surname}"),
            }, "apiauth_type");

            var user = new ClaimsPrincipal(identity);

            NotifyAuthenticationStateChanged(Task.FromResult(new AuthenticationState(user)));
        }

        public void LogoutUser()
        {
            // Hwo??
         
        }
    }

Ma page d'index fonctionne:

    <Authorized>
        <p>Welcome, @context.User.Identity.Name</p>
    </Authorized>
    <NotAuthorized>
        <p>You're not signed in</p>
    </NotAuthorized>
</AuthorizeView>

Il montre mon nom, une fois connecté, comme prévu.

Mais sur une page où j'ai besoin d'envoyer le jeton JWT à l'API, j'essaye de le trouver:


        var user = authState.User;

Mais user semble ne pas avoir de paramètre 'token'.

enter image description here

Comment dois-je stocker mon JWT et y avoir accès lorsque je suis sur le point d'utiliser mon client http?

2
Craig 2 sept. 2020 à 06:08

2 réponses

Meilleure réponse

Vous enregistrez le jeton dans le stockage local du navigateur Web. quelque chose comme ça

using Microsoft.JSInterop;
using System.Text.Json;
using System.Threading.Tasks;

namespace BlazorApp.Services
{
    public interface ILocalStorageService
    {
        Task<T> GetItem<T>(string key);
        Task SetItem<T>(string key, T value);
        Task RemoveItem(string key);
    }

    public class LocalStorageService : ILocalStorageService
    {
        private IJSRuntime _jsRuntime;

        public LocalStorageService(IJSRuntime jsRuntime)
        {
            _jsRuntime = jsRuntime;
        }

        public async Task<T> GetItem<T>(string key)
        {
            var json = await _jsRuntime.InvokeAsync<string>("localStorage.getItem", key);

            if (json == null)
                return default;

            return JsonSerializer.Deserialize<T>(json);
        }

        public async Task SetItem<T>(string key, T value)
        {
            await _jsRuntime.InvokeVoidAsync("localStorage.setItem", key, JsonSerializer.Serialize(value));
        }

        public async Task RemoveItem(string key)
        {
            await _jsRuntime.InvokeVoidAsync("localStorage.removeItem", key);
        }
    }
}

Source: https://jasonwatmore.com/ post / 2020/08/13 / blazor-webassembly-jwt-authentication-example-tutorial

1
Do Nhu Vy 2 sept. 2020 à 04:38

Je vous suggère d'utiliser la bibliothèque Blazored. Ils fournissent des options de stockage local et de session. J'utilise ce dernier. Informations sur https://github.com/Blazored/SessionStorage

2
user2857208 2 sept. 2020 à 04:50