Azure 應用服務容器是否支持具有 Open ID Connect 的 Blazor 應用？

Question

問題將 Blazor webassembly 應用程序部署為應用程序服務容器后，我們在瀏覽器中收到以下錯誤：

AuthenticationService.js:1 Mixed Content: The page at 'https://YYY.azurewebsites.net/authentication/login?returnUrl=https%3A%2F%2FYYY.azurewebsites.net%2Ffetchdata' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://YYY.azurewebsites.net/.well-known/openid-configuration'. This request has been blocked; the content must be served over HTTPS.

想知道 Blazor 目前是否支持 docker 部署，如果支持，我們該如何解決？

Steps to re-pro: 1. In VS 2019 Professional preview Version 16.7.0 Preview 2.0: create Blazor app (standard "Blazor WebAssembly App" template) with Hosted option on and in-app authentication with Identity Server 2. Deploy linux docker container至 Azure Web 容器服務應用程序 (B1) 3. HTTPS 應用程序服務僅設置為 ON

我們為此使用以下簡單的 docker 文件：

FROM mcr.microsoft.com/dotnet/core/aspnet:3.1 AS runtime
WORKDIR /app
EXPOSE 80
COPY . .
ENTRYPOINT ["dotnet", "AppNameHere.Server.dll"]

不知何故，Blazor 使用的 OIDC JS 庫沒有發現我們在 HTTPS 上運行的事實（盡管 HTTP 在容器和應用程序服務負載平衡實例之間使用）。

Answer 1

您應該：

• 為您的端點安裝 HTTPS 證書並運行完整的端到端 HTTPS（推薦）
  要在 docker 上使用證書設置紅隼，請閱讀此文檔
• 覆蓋您的應用使用的 OIDC 配置：

創建 metadata.json 文件

{
    "issuer": "http://YYY.azurewebsites.net",
    "jwks_uri": "https://YYY.azurewebsites.net/.well-known/openid-configuration/jwks",
    "authorization_endpoint": "https://YYY.azurewebsites.net/connect/authorize",
    "token_endpoint": "https://YYY.azurewebsites.net/connect/token",
    "userinfo_endpoint": "https://YYY.azurewebsites.net/connect/userinfo",
    "end_session_endpoint": "https://YYY.azurewebsites.net/connect/endsession",
    "check_session_iframe": "https://YYY.azurewebsites.net/connect/checksession"
}

"issuer": " http://YYY.azurewebsites.net " is an HTTP url not HTTPS

配置應用程序以從您的自定義文件中獲取元數據

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.RootComponents.Add<App>("app");
        builder.Services.AddOidcAuthentication<RemoteAuthenticationState, RemoteUserAccount>(options =>
                {
                    var providerOptions = options.ProviderOptions;
                    providerOptions.Authority = "https://YYY.azurewebsites.net";
                    providerOptions.MetadataUrl = "https://YYY.azurewebsites.net/metadata.json";
                    providerOptions.PostLogoutRedirectUri = "https://YYY.azurewebsites.net/authentication/logout-callback";
                    providerOptions.RedirectUri = "https://YYY.azurewebsites.net/login-callback";
                });
        await builder.Build().RunAsync();
    }
}