Question

我在反应应用程序中使用来自npm（版本0.1.3）的msal库，并且可以成功地将用户重定向到登录，然后获取访问令牌。我遇到的问题是，一小时后令牌将超时，我的API将返回401。

我注意到当我在浏览器中刷新SPA时，msalRenewFrame iframe不再出现在html源代码中，即使我每次都重新初始化Msal.UserAgentApplication，但是我不确定这是否是问题因为应用程序超时即使我没有精神焕发。

以下是每次加载应用时运行的代码：

const authCallback = (errorDesc: string, token: string, error: string, tokenType: string) => { 

    console.log('authCallback (errorDesc, token, error, tokenType)', errorDesc, token, error, tokenType);
    if (error) {
        console.error(error);
    }    

    let scopes = [
        process.env.REACT_APP_AZURE_SCOPE_URL + '/read', 
        process.env.REACT_APP_AZURE_SCOPE_URL + '/write'
    ];

    msal.acquireTokenSilent(scopes)
        .then(scopeApiToken => {      
            apiToken = scopeApiToken;
            sessionStorage.setItem('apiToken', scopeApiToken);
            renderApp();                
        })
        .catch(e => {
            console.error(e);
        }); 
};

msal = new Msal.UserAgentApplication(
    process.env.REACT_APP_AZURE_B2C_WEB_CLIENT_APPID!, 
    process.env.REACT_APP_AZURE_B2C_SIGNIN_URL!,
    authCallback,
    {
        redirectUri: window.location.origin,
        logger: new Msal.Logger((level: Msal.LogLevel, message: string, containsPii: boolean) => {
            console.log(message);
        })
    }
);

let user = msal.getUser();
let isCallback = msal.isCallback(window.location.hash);
if (apiToken) {
    renderApp();
} else if (user || isCallback) {
    ReactDOM.render(
        <div>
            <Login 
                content={<Spinner size={SpinnerSize.medium} label="Signing in" />}
            />
        </div>,
        root);    
} else {
    ReactDOM.render(
        <div>
            <Login 
                redirectToRoot={true}
                content={
                    <PrimaryButton onClick={() => msal.loginRedirect(['openid'])}>
                        Sign in with Microsoft
                    </PrimaryButton>}
            />
        </div>,
        root);
}

Answer 1

好吧，在为这篇文章赢得风滚草徽章后，我想出答案是每次我想调用外部API时都需要调用msal.acquireTokenSilent。（我错误地认为msal库会在后台默默地更新它。）

msal.acquireTokenSilent(scopes);

使用React SPA的msal令牌超时

1 个答案: