如何将 MSAL 与 React 结合使用？

Question

我觉得我可能很接近，但我无法让 msal.js 库与 React 一起工作。

通过 Microsoft 登录后，我被重定向到我的回调，但代码在 URL 中，例如

http://localhost:3000/authcallback#code=0.AQsAuJTIrioCF0ambVF28BQibk37J9vZQ05FkNq4OB...etc

本地存储中的 interaction.status 键卡在 interaction_in_progress

我正在使用重定向流程，我怀疑我注册所需回调的方式有问题。

这是我的包装纸classAuthService.ts

export class AuthService {
    msalClient: PublicClientApplication;
    loginRequest: RedirectRequest;
    account: AccountInfo | null;

    constructor(configuration: Configuration, loginScope: string) {
        this.msalClient = new PublicClientApplication(configuration);
        this.loginRequest = {
            scopes: [loginScope, "openid", "profile"],
        };
        this.account = null;
    }

    loadAuthModule(): void {
        this.msalClient
            .handleRedirectPromise()
            .then((resp: AuthenticationResult | null) => {
                if (resp) {
                    this.handleResponse(resp);
                }
            })
            .catch(console.error);
    }

    handleResponse(response: AuthenticationResult) {
        if (response !== null) {
            store.dispatch(signIn(response.account));
        }
    }

    signIn(): void {
        this.msalClient.loginRedirect(this.loginRequest);
    }

    signOut(): void {
        this.msalClient.logout();
    }

    async getIdentity(): Promise<AuthenticationResult | null> {
        // Stuff
    }
}

这是我的配置包装器 class

export class AuthConfig {
    configuration: Configuration;
    loginScope: string;

    constructor(clientId: string, authority: string, redirectUrl: string, loginScope: string) {
        this.loginScope = loginScope;
        this.configuration = {
            auth: {
                clientId: clientId,
                authority: authority,
                redirectUri: redirectUrl,
                navigateToLoginRequestUrl: false,
            },
            cache: {
                cacheLocation: "localStorage",
                storeAuthStateInCookie: false,
            },
            system: {
                loggerOptions: {
                    loggerCallback: (level: any, message: any, containsPii: any) => {
                        if (containsPii) {
                            return;
                        }
                        switch (level) {
                            case LogLevel.Error:
                                console.error(message);
                                return;
                            case LogLevel.Info:
                                console.info(message);
                                return;
                            case LogLevel.Verbose:
                                console.debug(message);
                                return;
                            case LogLevel.Warning:
                                console.warn(message);
                                return;
                        }
                    },
                },
            },
        };
    }
}

然后在我的登录页面，也就是网站的第一页...

export let authService = {} as AuthService;

const LoginPage: React.FC<RouteComponentProps> = ({}) => {

    useEffect(() => {
        const config = new AuthConfig(
            (window as any).ENV.CLIENT_ID,
            (window as any).ENV.AUTHORITY,
            (window as any).ENV.REDIRECT_URL,
            (window as any).ENV.LOGIN_SCOPE
        );

        authService = new AuthService(config.configuration, config.loginScope);  
        authService.loadAuthModule();    
    }, [])

    const signIn = () => {
        authService.signIn();
    };

    return (    
        <Button onClick={() => signIn()}>Sign In</Button>          
    );
};

export default LoginPage;

我的配置细节是正确的。如果他们不正确，我想我不会尽我所能。

我哪里错了？

我看到的每个示例都有配置的硬编码值，但这似乎不太安全，因此试图从我的 config.js 文件中注入它们。我愿意接受有关如何在维护全局可访问的 msal 实例的同时执行此操作的建议。

Answer 1

我们刚刚发布了官方 Msal React 包装器的第一个 alpha 版，您可以在其中看到我们的方法：https://github.com/AzureAD/microsoft-authentication-library-for-js/releases/tag/msal-react-v1.0.0-alpha.0

Answer 2

我肯定能看到关于将其推送到配置的可维护性的争论，但您不应将其视为安全措施。如果客户端可用 javascript，则可以在开发工具中进行检查。

如何将 MSAL 与 React 结合使用？

How to use MSAL with React?

reactjs

typescript

msal

msal.js