ReactでMSALを使用する方法は？

近いかもしれませんが、msal.jsライブラリをreactで動作させることができません。

Microsoft経由でログインした後、コールバックにリダイレクトされますが、URLにコードが含まれています。

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

interaction.statusローカルストレージのキーがスタックしているinteraction_in_progress

リダイレクトフローを使用していますが、必要なコールバックの登録方法に問題があると思われます。

これが私のラッパークラスです AuthService.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
    }
}

これが私の設定ラッパークラスです

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インスタンスを維持しながら、これを行う方法についての提案を受け付けています。