web-dev-qa-db-ja.com

Identity Serverを使用してBlazor WebAssembly SPAアプリを承認する方法

Blazor WebAssembly SPAテクニカルデモアプリのデモを書いていますが、認証に問題があります。 Identity Serverを使用して認証を行いますが、それをサポートするライブラリが見つかりません。私が見つけたすべてのチュートリアルは、Blazor Serverを使用するか、ASP.net Coreをホストするように追加するようにガイドされましたが、私のデモアプリでは実際には意味がありません。

誰かが手伝ってくれるならうれしいです。

ありがとうございました

authenticationidentityserver4blazorblazor-client-side
2
Vu Minh

2020年3月12日

既存のOAuth IDプロバイダーを使用して既存のBlazor WASMアプリにOIDCを追加するには、読み取りプロバイダー 認証ライブラリでASP.NET Core Blazor WebAssemblyスタンドアロンアプリを保護 。
新しい Microsoft.AspNetCore.Components.WebAssembly.Authentication 自動サイレント更新をサポートします。

ハードコードされた値の代わりに構成ファイルを使用したい場合は、このようにアプリをセットアップできます

完全な機能サンプルについては theidserver.herokuapp.com/ にアクセスしてください。

dotnet add package Microsoft.AspNetCore.Components.WebAssembly.Authentication::3.2.0-preview2.20160.5
  • 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>
  • oidc.jsonファイルをアプリケーションのwwwrootフォルダーに次の構造で追加します
{
  "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
}
  • Api認証を構成して、oidc.jsonファイルから構成を読み取る
    Program.csを次のように更新します：
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();
        }
    }
}

2020年3月11日

.2.0-preview2 は、IdentityServerでBlazor Wasmを使用する方法を提供します
読んだ

2020年3月9日

現在、使用できるblazor OIDC libがいくつかありますが、認定されていないすべての機能を実装したものはありません。

興味があれば、トークンのサイレント更新をサポートするために 自分自身 と書きますが、まだ完了しておらず、この問題に悩まされています： [wasm] WasmHttpMessageHandler、メッセージごとのフェッチオプションを提供する 。
この問題はこの まだマージされていないPR で修正されています。したがって、自分のWasmHttpMessageHandlerを待つか実装する必要があります。

2番目のアプローチは、 JS interop を使用して oidc.js をラップすることです。

5
agua from mars