Teams でダッシュボードを構築する

Microsoft Entra アプリ マニフェストを作成するには、次の手順に従います。

1. Visual Studio Code で、[エクスプローラー] に移動 します。

2. aad.manifest.json ファイルを作成します。

3. aad.manifest.json ファイルに次のコード を 追加します。

   {
     "id": "${{AAD_APP_OBJECT_ID}}",
     "appId": "${{AAD_APP_CLIENT_ID}}",
     "name": "dashboardDemo",
     "accessTokenAcceptedVersion": 2,
     "signInAudience": "AzureADMyOrg",
     "optionalClaims": {
         "idToken": [],
         "accessToken": [
             {
               "name": "idtyp",
               "source": null,
               "essential": false,
               "additionalProperties": []
             }
         ],
         "saml2Token": []
     },
     "requiredResourceAccess": [
         {
           "resourceAppId": "Microsoft Graph",
           "resourceAccess": [
               {
                 "id": "User.Read", 
                 "type": "Scope"
               }
           ]
         }
     ],
      "oauth2Permissions": [
         {
           "adminConsentDescription": "Allows Teams to call the app's web APIs as the current user.",
           "adminConsentDisplayName": "Teams can access app's web APIs",
           "id": "${{AAD_APP_ACCESS_AS_USER_PERMISSION_ID}}",
           "isEnabled": true,
           "type": "User",
           "userConsentDescription": "Enable Teams to call this app's web APIs with the same rights that you have",
           "userConsentDisplayName": "Teams can access app's web APIs and make requests on your behalf",
           "value": "access_as_user"
         }
     ],
     "preAuthorizedApplications": [
         {
             "appId": "1fec8e78-bce4-4aaf-ab1b-5451cc387264",
             "permissionIds": 
             ["${{AAD_APP_ACCESS_AS_USER_PERMISSION_ID}}"]
         },
         {
             "appId": "5e3ce6c0-2b1f-4285-8d4b-75ee78787346",
             "permissionIds": 
             ["${{AAD_APP_ACCESS_AS_USER_PERMISSION_ID}}"]
         },
         {
             "appId": "d3590ed6-52b3-4102-aeff-aad2292ab01c",
             "permissionIds": 
             ["${{AAD_APP_ACCESS_AS_USER_PERMISSION_ID}}"]
         },
         {
             "appId": "00000002-0000-0ff1-ce00-000000000000",
             "permissionIds": 
             ["${{AAD_APP_ACCESS_AS_USER_PERMISSION_ID}}"]
         },
         {
             "appId": "bc59ab01-8403-45c6-8796-ac3ef710b3e3",
             "permissionIds": 
             ["${{AAD_APP_ACCESS_AS_USER_PERMISSION_ID}}"]
         },
         {
             "appId": "0ec893e0-5785-4de6-99da-4ed124e5296c",
             "permissionIds": 
             ["${{AAD_APP_ACCESS_AS_USER_PERMISSION_ID}}"]
         },
         {
             "appId": "4765445b-32c6-49b0-83e6-1d93765276ca",
             "permissionIds": 
             ["${{AAD_APP_ACCESS_AS_USER_PERMISSION_ID}}"]
         },
         {
             "appId": "4345a7b9-9a63-4910-a426-35363201d503",
             "permissionIds": 
             ["${{AAD_APP_ACCESS_AS_USER_PERMISSION_ID}}"]
         }
     ],
     "identifierUris": 
     ["api://${{TAB_DOMAIN}}/${{AAD_APP_CLIENT_ID}}"],
     "replyUrlsWithType": [
       {
         "url": "${{TAB_ENDPOINT}}/auth-end.html",
         "type": "Web"
       },
       {
         "url": "${{TAB_ENDPOINT}}/auth-end.html?clientId=${{AAD_APP_CLIENT_ID}}",
         "type": "Spa"
       },
       {
         "url": "${{TAB_ENDPOINT}}/blank-auth-end.html",
         "type": "Spa"
       }
     ]
   }        
   

   

Teams アプリ マニフェストを更新するには、次の手順に従います。

1. Visual Studio Code で、 EXPLORER>appPackage>manifest.json に移動します。

2. manifest.json ファイルの有効な domains プロパティの後に、次のコードを追加します。

     "webApplicationInfo": {
     "id": "${{AAD_APP_CLIENT_ID}}",
     "resource": "api://${{TAB_DOMAIN}}/${{AAD_APP_CLIENT_ID}}"
     }
   

   

teamsapp.yml および teamsapp.local.yml ファイルの Teams Toolkit 構成コードを更新するには、次の手順に従います。

1. パブリック フォルダー にauth-start.html ファイルと auth-end.html ファイルを作成します。

   

2. auth-start.htmlファイルと auth-end.html ファイルにコード を 追加します。

   • auth-start
   • auth-end

   auth-start.htmlに次のコード を 追加します。

     <!--The Teams authentication flow process uses this file to assist with retrieval of the access token.-->
     <!--If you're not familiar with this process, don't alter or remove this file from your project.-->
     <html>
       <head>
         <title>Sign-in Start Page</title>
         <meta charset="utf-8" />
       </head>
   
       <body>
       <script src="https://res.cdn.office.net/teams-js/2.7.1/js/MicrosoftTeams.min.js" integrity="sha384-4Gy2G+qxzDVdrdemcVqKVQvaSK1Ghg3x6xcsaMLPc/pw7KPtiogHGM97LTWF2PWg" crossorigin="anonymous"></script>
         <script
           type="text/javascript"
           src="https://alcdn.msauth.net/browser/2.21.0/js/msal-browser.min.js"
           integrity="sha384-s/NxjjAgw1QgpDhOlVjTceLl4axrp5nqpUbCPOEQy1PqbFit9On6uw2XmEF1eq0s"
           crossorigin="anonymous">
         </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
                 },
                 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
               };
               await msalInstance.loginRedirect(scopesRequest);
             });
           });
           </script>
       </body>
     </html>