Teamsfx-react@3.1.3桌面端SSO重复请求凭证问题及解决

使用依赖包 #

"name": "@microsoft/teamsfx-react", 
"version": "3.1.3"
"name": "@microsoft/teamsfx",
"version": "2.3.3"
"name": "@azure/msal-browser"
"version": "3.27.0",

问题现象 #

• Teams桌面端即使会话处于登录状态，仍会重复请求凭证
• Edge浏览器中，登录启动页和结束页会弹出，但无需输入凭证即可访问
• 每次重启Teams客户端后，都需要重新登录

已完成配置 #

已在Azure门户配置可访问的重定向URI及Scope（相关配置见截图），以下是认证流程中使用的auth-start.html和auth-end.html代码：

auth-start.html 代码 #

<html>
  <head>
    <title>Login Start Page</title>
    <meta charset="utf-8" />
  </head>

  <body>
    <script
      src="https://res.cdn.office.net/teams-js/2.31.1/js/MicrosoftTeams.min.js"
      integrity="sha384-ihAqYgEJz9hzEU+HaYodG1aTzjebC/wKXQi1nWKZG7OLAUyOL9ZrzD/SfZu79Jeu"
      crossorigin="anonymous"
    ></script>
    <script
      async
      type="text/javascript"
      src="https://example.com/ui/static/js/msal-browser.min.js">
    </script>
    <script type="text/javascript">
      microsoftTeams.app.initialize().then(() => {
        microsoftTeams.app.getContext().then(async (context) => {
          // Generate random state string and store it, so we can verify it in the callback
          var currentURL = new URL(window.location);
          var clientId = currentURL.searchParams.get("clientId");
          var scope = currentURL.searchParams.get("scope");
          var loginHint = currentURL.searchParams.get("loginHint");

          const msalConfig = {
            auth: {
              clientId: clientId,
              authority: `https://login.microsoftonline.com/${context.user.tenant.id}`,
              navigateToLoginRequestUrl: false,
              redirectUri: window.location.origin + '/ui/blank-auth-end.html',
            },
            cache: {
              cacheLocation: "sessionStorage",
            },
          };

          const msalInstance = new msal.PublicClientApplication(msalConfig);
          await msalInstance.initialize();
          const scopesArray = scope.split(" ");
          const scopesRequest = {
            scopes: scopesArray,
            redirectUri: window.location.origin + `/ui/auth-end.html?clientId=${clientId}`,
            loginHint: loginHint,
          };
          
          // Handle the login redirect
          try {
            await msalInstance.loginRedirect(scopesRequest);
          } catch (error) {
            console.error("Login redirect failed: ", error);
          }
        });
      });
    </script>
  </body>
</html>

auth-end.html 代码 #

<!--This file is used during the Teams authentication flow to assist with retrieval of the access token.-->
<!--If you're not familiar with this, do not alter or remove this file from your project.-->
<html>
  <head>
    <title>Login End Page</title>
    <meta charset="utf-8" />
  </head>

  <body>
    <script
      src="https://res.cdn.office.net/teams-js/2.31.1/js/MicrosoftTeams.min.js"
      integrity="sha384-ihAqYgEJz9hzEU+HaYodG1aTzjebC/wKXQi1nWKZG7OLAUyOL9ZrzD/SfZu79Jeu"
      crossorigin="anonymous"
    ></script>
    <script
      async
      type="text/javascript"
      src="https://example.com/ui/static/js/msal-browser.min.js">
    </script>
    <script type="text/javascript">
      var currentURL = new URL(window.location);
      var clientId = currentURL.searchParams.get("clientId");

      microsoftTeams.app.initialize().then(() => {
        microsoftTeams.app.getContext().then(async (context) => {
          const msalConfig = {
            auth: {
              clientId: clientId,
              authority: `https://login.microsoftonline.com/${context.tid}`,
              navigateToLoginRequestUrl: false,
            },
            cache: {
              cacheLocation: "sessionStorage",
            },
          };

          const msalInstance = new window.msal.PublicClientApplication(msalConfig);
          await msalInstance.initialize();
          msalInstance
            .handleRedirectPromise()
            .then((tokenResponse) => {
              if (tokenResponse !== null) {
                microsoftTeams.authentication.notifySuccess(
                  JSON.stringify({
                    sessionStorage: sessionStorage,
                  })
                );
              } else {
                microsoftTeams.authentication.notifyFailure("Get empty response.");
              }
            })
            .catch((error) => {
              microsoftTeams.authentication.notifyFailure(JSON.stringify(error));
            });
        });
      });
    </script>
  </body>
</html>

已尝试操作 #

• 确保React应用与HTML页面使用的msal-browser版本一致（自行托管3.27.0版本），尝试不回滚旧版本解决问题

问题解决 #

问题根源在于getToken()请求的Scope设置错误，将Scope设为空值后，SSO功能恢复正常。修改后的React代码如下：

const {loading,error,data: teamsToken, reload} = useData(async () => {
      if (!teamsUserCredential){
        setTokenError("No Teams User Credential found");
        return;
      }

      try{
        const teamsToken = await teamsUserCredential.getToken("");
        setTokenError(null);
        return teamsToken;
      }catch(error){
        if (error.code === "UiRequiredError"){
          try{
            const scopes = ["access_as_user"];
            await teamsUserCredential.login(scopes);
            const teamsToken = await teamsUserCredential.getToken("");
            setTokenError(null);
            navigate("/tab");
            return teamsToken;
          }catch(loginError){
            console.error("Error during login: ", loginError);
            throw loginError;
          }
        }else{
          console.error("Error fetching token after login error: ",error);
          throw error;
        }
      }
    })

    useEffect(() => {
      if (teamsToken) {
        setToken(teamsToken);
      }
      if (error) {
        setTokenError("Failed to fetch token. Please ensure the pop-up blocker is disabled for this site and refresh the page.");
      }
      setTokenLoading(loading);
    }, [teamsToken, error, loading]);

内容的提问来源于stack exchange，提问作者Surakshith