时间戳

首页 > 解决方案 > 如何传递 MSAL 访问令牌以响应弹性搜索 App 连接器

reactjs - 如何传递 MSAL 访问令牌以响应弹性搜索 App 连接器

问题描述

AM 试图获取 MSAL 的访问令牌以传递给我们的后端 API（最终调用 APP Search）。由于访问令牌来自 msal 承诺，我无法在全局某处初始化令牌并在其他函数中访问。有没有办法等到承诺完成？

这是一些代码：

export default function App() {

  const isAuthenticated = useIsAuthenticated();
  const {instance, accounts, inProgress} = useMsal();

  const { hostIdentifier, searchKey, endpointBase, engineName } = getConfig();

  if (!isAuthenticated && inProgress === InteractionStatus.None) {
    instance.loginRedirect(loginRequest).catch(e => {
      console.error(e);
    });
  }


  const connector= null;
  if( accounts[0]){
    const request = {
    ...{scopes:['api://.....']},
    account: accounts[0]
    };
    console.log('Before access token');
    getAccessToken(request);
    //console.log(`After access token ${accessToken}`);
  }  
       let config;
        async function getAccessToken(request){
        const accessTokenPromise = await instance.acquireTokenSilent(request);
          const searchKey = accessTokenPromise.accessToken;
           const connector = new AppSearchAPIConnector({
            searchKey,
            engineName,
            hostIdentifier,
            endpointBase,
          });
          console.log('After COnnector'+connector);
          
    
           config = {
            searchQuery: {
              facets: buildFacetConfigFromConfig(),
              ...buildSearchOptionsFromConfig(),
            },
            autocompleteQuery: buildAutocompleteQueryConfig(),
            apiConnector: connector,
            alwaysSearchOnInitialLoad: false,
          };  
        }
     
      return (
        <PageLayout>
          <AuthenticatedTemplate>
            <SearchProvider config={config}>
              <WithSearch
                mapContextToProps={({ wasSearched }) => ({ wasSearched })}
                 ........

使用此代码，出现以下错误：

Events.js:16 Uncaught 未提供 onSearch 处理程序，也未提供连接器。您必须配置其中一个。

任何想法，关于如何将访问令牌传递给 App 连接器？

标签： reactjsazuremsal.jsreact-aad-msal

解决方案

是的，有一种方法可以等到承诺完成。您可以在 promise 之前使用 await 关键字，当您使用 await 关键字时，您必须在函数声明中添加 async 关键字，因为在 promise 代码之前使用 await 关键字时需要添加 async 关键字。

当您完成承诺并使用 await 关键字时，您可以将访问令牌存储在某个变量中，最后将其发送到应用程序连接器。

推荐阅读