build: upgrade teams-js (#1272)

OfficeDev · May 14, 2024 · f9367c4 · f9367c4
1 parent d2b34c0
commit f9367c4
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 95 deletions.
diff --git a/intelligent-data-chart-generator/package.json b/intelligent-data-chart-generator/package.json
@@ -9,7 +9,7 @@
     "@fluentui/react": "^8.114.2",
     "@fluentui/react-components": "^9.44.2",
     "@fluentui/react-icons": "^2.0.224",
-    "@microsoft/teams-js": "^2.18.0",
+    "@microsoft/teams-js": "^2.22.0",
     "@microsoft/teamsfx": "^2.3.0",
     "@microsoft/teamsfx-react": "^3.1.0",
     "axios": "^1.6.5",

diff --git a/intelligent-data-chart-generator/public/auth-end.html b/intelligent-data-chart-generator/public/auth-end.html
@@ -8,8 +8,8 @@
 
   <body>
     <script
-      src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js"
-      integrity="sha384-mhp2E+BLMiZLe7rDIzj19WjgXJeI32NkPvrvvZBrMi5IvWup/1NUfS5xuYN5S3VT"
+      src="https://res.cdn.office.net/teams-js/2.22.0/js/MicrosoftTeams.min.js"
+      integrity="sha384-WSG/sWulIv7rel5TnFlH8JTpxl2OxzZh9Lux2mIzBFiTRLFvMBeFv9VURu/3vQdx"
       crossorigin="anonymous"
     ></script>
     <script
@@ -22,34 +22,35 @@
       var currentURL = new URL(window.location);
       var clientId = currentURL.searchParams.get("clientId");
 
-      microsoftTeams.initialize();
-      microsoftTeams.getContext(async function (context) {
-        const msalConfig = {
-          auth: {
-            clientId: clientId,
-            authority: `https://login.microsoftonline.com/${context.tid}`,
-            navigateToLoginRequestUrl: false
-          },
-          cache: {
-            cacheLocation: "sessionStorage",
-          },
-        }
+      microsoftTeams.app.initialize().then(() => {
+        microsoftTeams.getContext(async function (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);
-        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));
-          });
-      })
+          const msalInstance = new window.msal.PublicClientApplication(msalConfig);
+          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>
diff --git a/intelligent-data-chart-generator/public/auth-start.html b/intelligent-data-chart-generator/public/auth-start.html
@@ -8,8 +8,8 @@
 
   <body>
     <script
-      src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js"
-      integrity="sha384-mhp2E+BLMiZLe7rDIzj19WjgXJeI32NkPvrvvZBrMi5IvWup/1NUfS5xuYN5S3VT"
+      src="https://res.cdn.office.net/teams-js/2.22.0/js/MicrosoftTeams.min.js"
+      integrity="sha384-WSG/sWulIv7rel5TnFlH8JTpxl2OxzZh9Lux2mIzBFiTRLFvMBeFv9VURu/3vQdx"
       crossorigin="anonymous"
     ></script>
     <script
@@ -19,36 +19,36 @@
       crossorigin="anonymous">
     </script>
     <script type="text/javascript">
-      microsoftTeams.initialize();
+      microsoftTeams.app.initialize().then(() => {
+        // Get the tab context, and use the information to navigate to Azure AD login page
+        microsoftTeams.getContext(async function (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");
 
-      // Get the tab context, and use the information to navigate to Azure AD login page
-      microsoftTeams.getContext(async function (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.tid}`,
+              navigateToLoginRequestUrl: false
+            },
+            cache: {
+              cacheLocation: "sessionStorage",
+            },
+          }
 
-        const msalConfig = {
-          auth: {
-            clientId: clientId,
-            authority: `https://login.microsoftonline.com/${context.tid}`,
-            navigateToLoginRequestUrl: false
-          },
-          cache: {
-            cacheLocation: "sessionStorage",
-          },
-        }
-
-        const msalInstance = new msal.PublicClientApplication(msalConfig);
-        const scopesArray = scope.split(" ");
-        const scopesRequest = {
-          scopes: scopesArray,
-          redirectUri: window.location.origin + `/auth-end.html?clientId=${clientId}`,
-          loginHint: loginHint,
-          prompt : "consent"
-        };
-        await msalInstance.loginRedirect(scopesRequest);
+          const msalInstance = new msal.PublicClientApplication(msalConfig);
+          const scopesArray = scope.split(" ");
+          const scopesRequest = {
+            scopes: scopesArray,
+            redirectUri: window.location.origin + `/auth-end.html?clientId=${clientId}`,
+            loginHint: loginHint,
+            prompt : "consent"
+          };
+          await msalInstance.loginRedirect(scopesRequest);
+        });
       });
     </script>
   </body>

diff --git a/team-central-dashboard/public/auth-end.html b/team-central-dashboard/public/auth-end.html
@@ -8,8 +8,8 @@
 
   <body>
     <script
-      src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js"
-      integrity="sha384-mhp2E+BLMiZLe7rDIzj19WjgXJeI32NkPvrvvZBrMi5IvWup/1NUfS5xuYN5S3VT"
+      src="https://res.cdn.office.net/teams-js/2.22.0/js/MicrosoftTeams.min.js"
+      integrity="sha384-WSG/sWulIv7rel5TnFlH8JTpxl2OxzZh9Lux2mIzBFiTRLFvMBeFv9VURu/3vQdx"
       crossorigin="anonymous"
     ></script>
     <script
@@ -22,8 +22,8 @@
       var currentURL = new URL(window.location);
       var clientId = currentURL.searchParams.get("clientId");
 
-      microsoftTeams.initialize();
-      microsoftTeams.getContext(async function (context) {
+      microsoftTeams.app.initialize().then(() => {
+        microsoftTeams.getContext(async function (context) {
         const msalConfig = {
           auth: {
             clientId: clientId,
@@ -49,7 +49,8 @@
           .catch((error) => {
             microsoftTeams.authentication.notifyFailure(JSON.stringify(error));
           });
-      })
+        });
+      });
     </script>
   </body>
 </html>
diff --git a/team-central-dashboard/public/auth-start.html b/team-central-dashboard/public/auth-start.html
@@ -8,8 +8,8 @@
 
   <body>
     <script
-      src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js"
-      integrity="sha384-mhp2E+BLMiZLe7rDIzj19WjgXJeI32NkPvrvvZBrMi5IvWup/1NUfS5xuYN5S3VT"
+      src="https://res.cdn.office.net/teams-js/2.22.0/js/MicrosoftTeams.min.js"
+      integrity="sha384-WSG/sWulIv7rel5TnFlH8JTpxl2OxzZh9Lux2mIzBFiTRLFvMBeFv9VURu/3vQdx"
       crossorigin="anonymous"
     ></script>
     <script
@@ -19,36 +19,36 @@
       crossorigin="anonymous">
     </script>
     <script type="text/javascript">
-      microsoftTeams.initialize();
+      microsoftTeams.app.initialize().then(() => {
+        // Get the tab context, and use the information to navigate to Azure AD login page
+        microsoftTeams.getContext(async function (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");
 
-      // Get the tab context, and use the information to navigate to Azure AD login page
-      microsoftTeams.getContext(async function (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.tid}`,
+              navigateToLoginRequestUrl: false
+            },
+            cache: {
+              cacheLocation: "sessionStorage",
+            },
+          }
 
-        const msalConfig = {
-          auth: {
-            clientId: clientId,
-            authority: `https://login.microsoftonline.com/${context.tid}`,
-            navigateToLoginRequestUrl: false
-          },
-          cache: {
-            cacheLocation: "sessionStorage",
-          },
-        }
-
-        const msalInstance = new msal.PublicClientApplication(msalConfig);
-        const scopesArray = scope.split(" ");
-        const scopesRequest = {
-          scopes: scopesArray,
-          redirectUri: window.location.origin + `/auth-end.html?clientId=${clientId}`,
-          loginHint: loginHint,
-          prompt : "consent"
-        };
-        await msalInstance.loginRedirect(scopesRequest);
+          const msalInstance = new msal.PublicClientApplication(msalConfig);
+          const scopesArray = scope.split(" ");
+          const scopesRequest = {
+            scopes: scopesArray,
+            redirectUri: window.location.origin + `/auth-end.html?clientId=${clientId}`,
+            loginHint: loginHint,
+            prompt : "consent"
+          };
+          await msalInstance.loginRedirect(scopesRequest);
+        });
       });
     </script>
   </body>