loginRedirect() method of msal.js package causes 'TypeError: Cannot read property 'then' of undefined'

Question

我目前正在使用 msal.js 包，这样我就可以为我自己的 Vue.js 应用程序使用 azure 授权。到目前为止，我已经创建了一个 Teams 应用程序，我可以在其中访问我的 Vue.js 网站，该网站使用 ngrok 进行隧道传输。

我在 Vue.js 中的代码如下所示（为了安全起见，我在此 Whosebug post 中用占位符替换了 clientId 和 authority）：

import * as Msal from 'msal';

export default {
  signIn: async () => {

    const aDConfig = {
      auth: {
        clientId: 'AZUREAPPID',
        authority: 'https://login.microsoftonline.com/AZURETENANTID',
        redirectUri: 'https://login.microsoftonline.com/common/oauth2/nativeclient',
      },
      cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: true,
      },
    };

    const aDAuth = new Msal.UserAgentApplication(aDConfig);

    const loginRequest = {
      scopes: ['user.read'],
    };

    await aDAuth.handleRedirectCallback((error, response) => {
      debugger;
      console.log(error);
      console.log(response);
    });

    await aDAuth.loginRedirect(loginRequest).then(async (loginResponse) => {
      console.log(loginResponse);

      debugger;
    }).catch((error) => {
      console.log(error);
    });
  },
};

基本上它所做的是设置要连接的 Azure 应用程序，然后尝试通过 loginRedirect() 方法静默登录。

但是当我尝试运行这段代码时，在 loginRedirect() 方法处脚本停止并且我会得到一个错误：

由于 loginRequest 不为空，我不确定错误指的是什么。

这可能是什么问题？

Answer 1

loginRedirect 不是 return Promise（因为它将用户带离当前页面）。如果你想处理重定向的结果，你需要实现 adAuth.handleRedirectCallback(callback)（这应该在页面加载时完成，在实例化 adAuth 之后立即完成），它将在 Msal 检测到页面正在被访问时调用在 returning 之后从重定向流加载。

参见：https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-core/README.md#1-instantiate-the-useragentapplication

编辑：误读了你的代码，我看到你已经这样做了。所以只需删除 loginRedirect 上的 .then 就可以了。

另外，handleRedirectCallback 不是 return Promise，所以你不应该 await 它。并且您需要实例化 Msal 并在 signIn 函数之外实现回调（例如在页面加载时）。

import * as Msal from 'msal';

const aDConfig = {
    auth: {
      clientId: 'AZUREAPPID',
      authority: 'https://login.microsoftonline.com/AZURETENANTID',
      redirectUri: 'https://login.microsoftonline.com/common/oauth2/nativeclient',
    },
    cache: {
      cacheLocation: 'localStorage',
      storeAuthStateInCookie: true,
    }
};

const aDAuth = new Msal.UserAgentApplication(aDConfig);

const loginRequest = {
    scopes: ['user.read']
};

aDAuth.handleRedirectCallback((error, response) => {
    debugger;
    console.log(error);
    console.log(response);
});


export default {
  signIn: async () => {
    aDAuth.loginRedirect(loginRequest);
  }
};

loginRedirect() method of msal.js package causes 'TypeError: Cannot read property 'then' of undefined'

loginRedirect() method of msal.js package causes 'TypeError: Cannot read property 'then' of undefined'

javascript

microsoft-teams

msal

msal.js

microsoft-graph-teams