Blazor WebAssembly + 亚马逊 Cognito

Question

我想设置一个 Blazor 客户端应用程序，通过 AWS Cognito.

进行身份验证

当我运行应用程序时，我没有被重定向到登录页面，而是页面显示 "Authorizing..." 几秒钟，而我在控制台中收到此错误：

The loading of “https://blazorapp.auth.eu-central-1.amazoncognito.com/login?…Q&code_challenge_method=S256&prompt=none&response_mode=query” in a frame is denied by “X-Frame-Options“ directive set to “DENY“.
This error page has no error code in its security info
info: Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2]
      Authorization failed.

然后，显示默认的 "Hello, world!" 索引页 （尽管据我了解，根据 App.razor 定义，未经身份验证的用户不应该看到它？） 。如果我单击 "Log in"，我会在控制台中收到相同的错误，但几秒钟后 Cognito 托管的登录页面打开，我能够登录，我被重定向回我的应用程序，然后应用程序在右上角显示经过身份验证的用户信息，但控制台又有点奇怪：

info: Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2]
      Authorization failed.
info: Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[1]
      Authorization was successful.

问题一

我怎样才能摆脱这些错误并让我的应用重定向到 Cognito 登录页面而不延迟 ~10 秒？

问题二

为什么无论我是否通过身份验证，我的应用程序中的所有内容始终可见？就好像 App.razor 中 AuthorizeRouteView 下的 NotAuthorized 节点根本没有作用，除非我在这里混淆了一些东西

代码：

Program.cs

builder.Services.AddOidcAuthentication(options =>
{
    options.ProviderOptions.Authority = "https://cognito-idp.{aws-region}.amazonaws.com/{cognito-userpoolid}";
    options.ProviderOptions.ClientId = "{cognito-clientid}";
    options.ProviderOptions.ResponseType = "code";
    options.ProviderOptions.RedirectUri = "https://localhost:44306/authentication/login-callback";
    options.ProviderOptions.PostLogoutRedirectUri = "https://localhost:44306/authentication/logout-callback";
});

App.razor（根据模板创建，无修改）

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    @if (!context.User.Identity.IsAuthenticated)
                    {
                        <RedirectToLogin />
                    }
                    else
                    {
                        <p>You are not authorized to access this resource.</p>
                    }
                </NotAuthorized>
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

我自己只在 Program.cs 中修改了对 AddOidcAuthentication 的调用，所有其他文件都是在创建具有个人用户帐户的 Blazor WebAssembly 应用程序时由 Visual Studio 填充的。

我正在努力让它工作，非常感谢关于这个主题的任何帮助

编辑：

根据@aguafrommars 的回答，我已将网站发布到 Amazon S3，使用静态网站托管，Amazon CloudFront 作为 CDN，但是，已发布应用程序的行为与描述的本地行为完全相同

扩展问题：

问题 1 展开：

当页面显示 "Authorizing..." 时，我只在控制台中收到描述的错误，托管的 Cognito UI 不会呈现，只有当我单击 "Log in" 时，我才会被重定向（有重大延迟）到 Cognito 托管 UI，或未经重定向验证（如果我之前登录过），也许这个 GIF 可以解决问题：

我可能错了，但这不是 Cognito 托管 UI 拒绝在 iframe 中呈现的问题吗？我的应用程序能否像最终那样首先重定向到托管的 UI？现在我必须等待 X-Frame-Options 错误被抛出，点击 "Log in"，等待另一个 X-Frame-Options 错误被抛出，最后我被重定向并且流程成功（在gif UI 没有显示，因为我之前在会话中进行了身份验证）

问题 2 展开：

我想要实现的行为是，如果用户未通过身份验证，他们将看不到应用程序的任何部分，而是将他们重定向到托管的 Cognito UI，只有在他们通过身份验证后，他们才能看到任何事物。我尝试在 MainLayout.razor 中使用 Authorize 属性，但结果始终是空白屏幕，我想提供一些代码和详细信息，但我相信这种行为会受到 [=] 中描述的错误的影响68=]问题1，所以我想先整理一下

Answer 1

回复 1：

显示授权消息时，应用会检查有效的身份验证并设置自动续订令牌 iframe。如果您在浏览器上查看网络日志，您会看到此时发出的请求。
当应用运行发布时速度更快。

回复 2：

您需要在要保护的页面上添加授权，方法是添加 Authorize attribute。

@page "/"
@attribute [Authorize]

Answer 2

我最终从 Cognito 切换到 Auth0，并从 Api Gateway's RestApi 升级到 HttpApi，其中包括内置的 JWT 授权器，我对改变。 Cognito 最后有太多问题，但如果有人决心让它工作，请检查@aguafrommars 在已接受答案下的评论。

Answer 3

有同样的问题并切换到 Azure B2C 再次解决了问题。链接到作为身份验证提供程序的 AWS Cognito 时，身份验证库似乎有问题。

MS 提出的问题 - https://github.com/dotnet/aspnetcore/issues/22651

Answer 4

我正在回答 this issue 这里被标记为重复...

延迟的原因是等待静默登录过程超时（我相信有 10 秒的超时）here and here

根本原因是 AWS Cognito 不符合 OIDC 标准。这会导致浏览器控制台出现“'X-Frame-Options' 到 'DENY'”错误。

直到 Blazor 团队允许我们从代码中关闭静默登录，解决方案是禁用静默登录，如下所示：

将 asp.net 存储库 here 中的 Blazor Interop 文件下载到本地文件夹。

使用 vs code 打开本地文件夹并安装 typescript、webpack、yarn 等（如果尚未安装）

npm install -g yarn
npm install -g typescript
npm install -g webpack

然后按如下方式编辑 AuthenticationService.ts 文件（注释掉静默登录功能）。抱歉打印了长代码。

import { UserManager, UserManagerSettings, User } from 'oidc-client'

type Writeable<T> = { -readonly [P in keyof T]: T[P] };

type ExtendedUserManagerSettings = Writeable<UserManagerSettings & AuthorizeServiceSettings>

type OidcAuthorizeServiceSettings = ExtendedUserManagerSettings | ApiAuthorizationSettings;

function isApiAuthorizationSettings(settings: OidcAuthorizeServiceSettings): settings is ApiAuthorizationSettings {
    return settings.hasOwnProperty('configurationEndpoint');
}

interface AuthorizeServiceSettings {
    defaultScopes: string[];
}

interface ApiAuthorizationSettings {
    configurationEndpoint: string;
}

export interface AccessTokenRequestOptions {
    scopes: string[];
    returnUrl: string;
}

export interface AccessTokenResult {
    status: AccessTokenResultStatus;
    token?: AccessToken;
}

export interface AccessToken {
    value: string;
    expires: Date;
    grantedScopes: string[];
}

export enum AccessTokenResultStatus {
    Success = 'success',
    RequiresRedirect = 'requiresRedirect'
}

export enum AuthenticationResultStatus {
    Redirect = 'redirect',
    Success = 'success',
    Failure = 'failure',
    OperationCompleted = 'operationCompleted'
};

export interface AuthenticationResult {
    status: AuthenticationResultStatus;
    state?: unknown;
    message?: string;
}

export interface AuthorizeService {
    getUser(): Promise<unknown>;
    getAccessToken(request?: AccessTokenRequestOptions): Promise<AccessTokenResult>;
    signIn(state: unknown): Promise<AuthenticationResult>;
    completeSignIn(state: unknown): Promise<AuthenticationResult>;
    signOut(state: unknown): Promise<AuthenticationResult>;
    completeSignOut(url: string): Promise<AuthenticationResult>;
}

class OidcAuthorizeService implements AuthorizeService {
    private _userManager: UserManager;
    private _intialSilentSignIn: Promise<void> | undefined;
    constructor(userManager: UserManager) {
        this._userManager = userManager;
    }

    async trySilentSignIn() {
        if (!this._intialSilentSignIn) {
            this._intialSilentSignIn = (async () => {
                try {
                    await this._userManager.signinSilent();
                } catch (e) {
                    // It is ok to swallow the exception here.
                    // The user might not be logged in and in that case it
                    // is expected for signinSilent to fail and throw
                }
            })();
        }

        return this._intialSilentSignIn;
    }

    async getUser() {
        // if (window.parent === window && !window.opener && !window.frameElement && this._userManager.settings.redirect_uri &&
        //     !location.href.startsWith(this._userManager.settings.redirect_uri)) {
        //     // If we are not inside a hidden iframe, try authenticating silently.
        //     await AuthenticationService.instance.trySilentSignIn();
        // }

        const user = await this._userManager.getUser();
        return user && user.profile;
    }

    async getAccessToken(request?: AccessTokenRequestOptions): Promise<AccessTokenResult> {
        const user = await this._userManager.getUser();
        if (hasValidAccessToken(user) && hasAllScopes(request, user.scopes)) {
            return {
                status: AccessTokenResultStatus.Success,
                token: {
                    grantedScopes: user.scopes,
                    expires: getExpiration(user.expires_in),
                    value: user.access_token
                }
            };
        } else {
            try {
                const parameters = request && request.scopes ?
                    { scope: request.scopes.join(' ') } : undefined;

                const newUser = await this._userManager.signinSilent(parameters);

                return {
                    status: AccessTokenResultStatus.Success,
                    token: {
                        grantedScopes: newUser.scopes,
                        expires: getExpiration(newUser.expires_in),
                        value: newUser.access_token
                    }
                };

            } catch (e) {
                return {
                    status: AccessTokenResultStatus.RequiresRedirect
                };
            }
        }

        function hasValidAccessToken(user: User | null): user is User {
            return !!(user && user.access_token && !user.expired && user.scopes);
        }

        function getExpiration(expiresIn: number) {
            const now = new Date();
            now.setTime(now.getTime() + expiresIn * 1000);
            return now;
        }

        function hasAllScopes(request: AccessTokenRequestOptions | undefined, currentScopes: string[]) {
            const set = new Set(currentScopes);
            if (request && request.scopes) {
                for (const current of request.scopes) {
                    if (!set.has(current)) {
                        return false;
                    }
                }
            }

            return true;
        }
    }

    async signIn(state: unknown) {

        try {
            await this._userManager.clearStaleState();
            await this._userManager.signinRedirect(this.createArguments(state));
            return this.redirect();
        } catch (redirectError) {
            return this.error(this.getExceptionMessage(redirectError));
        }

        // try {
        //     await this._userManager.clearStaleState();
        //     await this._userManager.signinSilent(this.createArguments());
        //     return this.success(state);
        // } catch (silentError) {
        //     try {
        //         await this._userManager.clearStaleState();
        //         await this._userManager.signinRedirect(this.createArguments(state));
        //         return this.redirect();
        //     } catch (redirectError) {
        //         return this.error(this.getExceptionMessage(redirectError));
        //     }
        // }
    }

    async completeSignIn(url: string) {
        const requiresLogin = await this.loginRequired(url);
        const stateExists = await this.stateExists(url);
        try {
            const user = await this._userManager.signinCallback(url);
            if (window.self !== window.top) {
                return this.operationCompleted();
            } else {
                return this.success(user && user.state);
            }
        } catch (error) {
            if (requiresLogin || window.self !== window.top || !stateExists) {
                return this.operationCompleted();
            }

            return this.error('There was an error signing in.');
        }
    }

    async signOut(state: unknown) {
        try {
            if (!(await this._userManager.metadataService.getEndSessionEndpoint())) {
                await this._userManager.removeUser();
                return this.success(state);
            }
            await this._userManager.signoutRedirect(this.createArguments(state));
            return this.redirect();
        } catch (redirectSignOutError) {
            return this.error(this.getExceptionMessage(redirectSignOutError));
        }
    }

    async completeSignOut(url: string) {
        try {
            if (await this.stateExists(url)) {
                const response = await this._userManager.signoutCallback(url);
                return this.success(response && response.state);
            } else {
                return this.operationCompleted();
            }
        } catch (error) {
            return this.error(this.getExceptionMessage(error));
        }
    }

    private getExceptionMessage(error: any) {
        if (isOidcError(error)) {
            return error.error_description;
        } else if (isRegularError(error)) {
            return error.message;
        } else {
            return error.toString();
        }

        function isOidcError(error: any): error is (Oidc.SigninResponse & Oidc.SignoutResponse) {
            return error && error.error_description;
        }

        function isRegularError(error: any): error is Error {
            return error && error.message;
        }
    }

    private async stateExists(url: string) {
        const stateParam = new URLSearchParams(new URL(url).search).get('state');
        if (stateParam && this._userManager.settings.stateStore) {
            return await this._userManager.settings.stateStore.get(stateParam);
        } else {
            return undefined;
        }
    }

    private async loginRequired(url: string) {
        const errorParameter = new URLSearchParams(new URL(url).search).get('error');
        if (errorParameter && this._userManager.settings.stateStore) {
            const error = await this._userManager.settings.stateStore.get(errorParameter);
            return error === 'login_required';
        } else {
            return false;
        }
    }

    private createArguments(state?: unknown) {
        return { useReplaceToNavigate: true, data: state };
    }

    private error(message: string) {
        return { status: AuthenticationResultStatus.Failure, errorMessage: message };
    }

    private success(state: unknown) {
        return { status: AuthenticationResultStatus.Success, state };
    }

    private redirect() {
        return { status: AuthenticationResultStatus.Redirect };
    }

    private operationCompleted() {
        return { status: AuthenticationResultStatus.OperationCompleted };
    }
}

export class AuthenticationService {

    static _infrastructureKey = 'Microsoft.AspNetCore.Components.WebAssembly.Authentication';
    static _initialized: Promise<void>;
    static instance: OidcAuthorizeService;
    static _pendingOperations: { [key: string]: Promise<AuthenticationResult> | undefined } = {}

    public static init(settings: UserManagerSettings & AuthorizeServiceSettings) {
        // Multiple initializations can start concurrently and we want to avoid that.
        // In order to do so, we create an initialization promise and the first call to init
        // tries to initialize the app and sets up a promise other calls can await on.
        if (!AuthenticationService._initialized) {
            AuthenticationService._initialized = AuthenticationService.initializeCore(settings);
        }

        return AuthenticationService._initialized;
    }

    public static handleCallback() {
        return AuthenticationService.initializeCore();
    }

    private static async initializeCore(settings?: UserManagerSettings & AuthorizeServiceSettings) {
        const finalSettings = settings || AuthenticationService.resolveCachedSettings();
        if (!settings && finalSettings) {
            const userManager = AuthenticationService.createUserManagerCore(finalSettings);

            if (window.parent !== window && !window.opener && (window.frameElement && userManager.settings.redirect_uri &&
                location.href.startsWith(userManager.settings.redirect_uri))) {
                // If we are inside a hidden iframe, try completing the sign in early.
                // This prevents loading the blazor app inside a hidden iframe, which speeds up the authentication operations
                // and avoids wasting resources (CPU and memory from bootstrapping the Blazor app)
                AuthenticationService.instance = new OidcAuthorizeService(userManager);

                // This makes sure that if the blazor app has time to load inside the hidden iframe,
                // it is not able to perform another auth operation until this operation has completed.
                AuthenticationService._initialized = (async (): Promise<void> => {
                    await AuthenticationService.instance.completeSignIn(location.href);
                    return;
                })();
            }
        } else if (settings) {
            const userManager = await AuthenticationService.createUserManager(settings);
            AuthenticationService.instance = new OidcAuthorizeService(userManager);
        } else {
            // HandleCallback gets called unconditionally, so we do nothing for normal paths.
            // Cached settings are only used on handling the redirect_uri path and if the settings are not there
            // the app will fallback to the default logic for handling the redirect.
        }
    }

    private static resolveCachedSettings(): UserManagerSettings | undefined {
        const cachedSettings = window.sessionStorage.getItem(`${AuthenticationService._infrastructureKey}.CachedAuthSettings`);
        return cachedSettings ? JSON.parse(cachedSettings) : undefined;
    }

    public static getUser() {
        return AuthenticationService.instance.getUser();
    }

    public static getAccessToken(options: AccessTokenRequestOptions) {
        return AuthenticationService.instance.getAccessToken(options);
    }

    public static signIn(state: unknown) {
        return AuthenticationService.instance.signIn(state);
    }

    public static async completeSignIn(url: string) {
        let operation = this._pendingOperations[url];
        if (!operation) {
            operation = AuthenticationService.instance.completeSignIn(url);
            await operation;
            delete this._pendingOperations[url];
        }

        return operation;
    }

    public static signOut(state: unknown) {
        return AuthenticationService.instance.signOut(state);
    }

    public static async completeSignOut(url: string) {
        let operation = this._pendingOperations[url];
        if (!operation) {
            operation = AuthenticationService.instance.completeSignOut(url);
            await operation;
            delete this._pendingOperations[url];
        }

        return operation;
    }

    private static async createUserManager(settings: OidcAuthorizeServiceSettings): Promise<UserManager> {
        let finalSettings: UserManagerSettings;
        if (isApiAuthorizationSettings(settings)) {
            const response = await fetch(settings.configurationEndpoint);
            if (!response.ok) {
                throw new Error(`Could not load settings from '${settings.configurationEndpoint}'`);
            }

            const downloadedSettings = await response.json();

            finalSettings = downloadedSettings;
        } else {
            if (!settings.scope) {
                settings.scope = settings.defaultScopes.join(' ');
            }

            if (settings.response_type === null) {
                // If the response type is not set, it gets serialized as null. OIDC-client behaves differently than when the value is undefined, so we explicitly check for a null value and remove the property instead.
                delete settings.response_type;
            }

            finalSettings = settings;
        }

        window.sessionStorage.setItem(`${AuthenticationService._infrastructureKey}.CachedAuthSettings`, JSON.stringify(finalSettings));

        return AuthenticationService.createUserManagerCore(finalSettings);
    }

    private static createUserManagerCore(finalSettings: UserManagerSettings) {
        const userManager = new UserManager(finalSettings);
        userManager.events.addUserSignedOut(async () => {
            userManager.removeUser();
        });
        return userManager;
    }
}

declare global {
    interface Window { AuthenticationService: AuthenticationService }
}

AuthenticationService.handleCallback();

window.AuthenticationService = AuthenticationService;

然后用

构建js

yarn build:release

编译 js 文件后，将 AuthenticationService.js 文件复制到 Blazor WASM 应用程序的 /wwwroot 目录中。

然后在index.html文件中，注释掉MS脚本，替换成你自己的：

<!--    <script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>-->
<script src="AuthenticationService.js"></script>

运行您的应用和 Cognito 现在（相对）即时

Blazor WebAssembly + 亚马逊 Cognito

Blazor WebAssembly + Amazon Cognito

.net

amazon-cognito

.net-core

blazor

blazor-client-side