web-dev-qa-db-fra.com

Comment autoriser une application Blazor WebAssembly SPA à l'aide d'Identity Server

J'écris une démo d'application de démonstration technique Blazor WebAssembly SPA, mais j'ai des problèmes d'authentification. Je vais utiliser Identity Server pour faire l'autorisation, mais je ne trouve aucune bibliothèque pour le prendre en charge. Tous les didacticiels que j'ai trouvés m'ont guidé pour utiliser Blazor Server ou ajouter un hébergeur ASP.net Core, mais cela n'a pas vraiment de sens pour mon application de démonstration.

Je suis heureux si quelqu'un peut aider.

Je vous remercie

authenticationidentityserver4blazorblazor-client-side
2
Vu Minh

12 mars 2020

Pour ajouter OIDC à une application Blazor WASM existante à l'aide d'un fournisseur d'identité OAuth) existant lisez Sécurisez une application autonome ASP.NET Core Blazor WebAssembly avec la bibliothèque d'authentification .
Le nouveau Microsoft.AspNetCore.Components.WebAssembly.Authentication prend en charge le renouvellement automatique silencieux.

Si vous préférez utiliser un fichier de configuration au lieu de valeurs codées en dur, vous pouvez configurer l'application comme ceci

Visitez theidserver.herokuapp.com/ pour un échantillon fonctionnel complet.

dotnet add package Microsoft.AspNetCore.Components.WebAssembly.Authentication::3.2.0-preview2.20160.5
  • Ajoutez AuthenticationService.js à index.html 
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
    <app>Loading...</app>
...
    <script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>
  • Ajoutez un fichier oidc.json dans le dossier wwwroot de l'application avec cette structure 
{
  "authority": "https://myidp.com", // Uri to your IDP server
  "client_id": "myclientid", // Your client id
  "redirect_uri": "https://localhost:44333/authentication/login-callback", // Uri to the application login callback
  "post_logout_redirect_uri": "https://localhost:44333/authentication/logout-callback", // Uri to the application logout callback
  "response_type": "code", // OAuth flow response type. For `authorization_code` flow the response type is 'code'. For `implicit` flow, the response type is 'id_token token'
  "scope": "BlazorIdentityServer.ServerAPI openid profile" // list of scope your application wants
}
  • Configurez l'autorisation Api pour lire la configuration à partir de votre fichier oidc.json
    Mettez à jour votre Program.cs pour être:
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.DependencyInjection;
using System.Threading.Tasks;

namespace BlazorIdentityServer.Client
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services.AddBaseAddressHttpClient();
            builder.Services.AddApiAuthorization(options => options.ProviderOptions.ConfigurationEndpoint = "oidc.json");

            await builder.Build().RunAsync();
        }
    }
}

11 mars 2020

.2.0-preview2 fournit un moyen d'utiliser Blazor Wasm avec IdentityServer
Lis

9 mars 2020

Pour le moment, vous pouvez utiliser des bibliothèques OIDC blazor, mais aucune n'est certifiée et implémente toutes les fonctionnalités.

Si vous êtes curieux, j'écris le mien pour prendre en charge le renouvellement silencieux du jeton mais ce n'est pas encore terminé et je suis coincé par ce problème: [wasm] WasmHttpMessageHandler, Fournit des options de récupération par message .
Le problème est résolu dans ce PR pas encore fusionné . Il faut donc attendre ou implémenter mon propre WasmHttpMessageHandler.

Une deuxième approche consiste à envelopper oidc.js en utilisant JS interop

5
agua from mars