TeamsFx SDK

  • [アーティクル]

TeamsFx は、Microsoft Teams シングル サインオン (SSO) を使用し、構成がゼロの単一行ステートメントにクラウド リソースにアクセスすることで、タスクを削減するのに役立ちます。 ブラウザーとNode.js環境で TeamsFx SDK を使用できます。 TeamsFx のコア機能は、クライアント環境とサーバー環境でアクセスできます。 次のユーザー認証コードを記述できます。

  • [Teams] タブ
  • Teams ボット。
  • Azure 関数

前提条件

次のツールをインストールし、開発環境を設定する必要があります。

  インストール 使用するには...
  Visual Studio Code JavaScript、TypeScript、または SharePoint Framework (SPFx) ビルド環境。 バージョン 1.55 以降を使用してください。
  Teams ツールキット アプリのプロジェクト スキャフォールディングを作成する Microsoft Visual Studio Code 拡張機能。 4.0.0 バージョンを使用します。
  Node.js バックエンド JavaScript ランタイム環境。 詳細については、「 プロジェクトの種類Node.jsバージョン互換性テーブル」を参照してください。
  Microsoft Teams Microsoft Teams は、チャット、会議、通話、すべてのアプリを通じて作業するすべてのユーザーと 1 か所で共同作業を行います。
  Microsoft Edge (推奨) または Google Chrome 開発者ツールを備えたブラウザー。

バージョンの互換性Node.js詳細については、「Visual Studio Code を使用して Teams アプリを作成するための前提条件 」を参照してください。

注:

プロジェクトに関連するパッケージが依存関係としてインストールされているbotbuilder場合は、それらが同じバージョンであることを確認します。

以下に関する実用的な知識が必要です。

概要

TeamsFx SDK は、TeamsFx ツールキットまたは CLI を使用してスキャフォールディングされたプロジェクトで事前構成されています。 詳細については、「Teams アプリのアイコンの作成に関するガイダンス」を参照してください。

ヒント

コード スニペットは、最新の TeamsFx SDK バージョン 2 用に更新されます。

@microsoft/teamsfx パッケージをインストールします。

npm を使用して TeamsFx SDK for TypeScript または JavaScript をインストールします。

npm install @microsoft/teamsfx

TeamsFx のコア機能

TeamsFx クラス

TeamsFx クラス インスタンスは、既定ですべての TeamsFx 設定に環境変数からアクセスします。 カスタマイズされた構成値を設定して、既定値をオーバーライドできます。 詳細については、「 構成のオーバーライド 」を参照してください。 TeamsFx インスタンスを作成するときは、ID の種類を指定する必要があります。

次の一覧では、2 種類の ID を示します。

  • ユーザー ID: Teams の現在のユーザーを表します。

  • アプリケーション ID: アプリケーション自体を表します。

    注:

    TeamsFx のコンストラクターとメソッドは、これら 2 つの ID 型では同じではありません。

ユーザー ID とアプリケーション ID の詳細については、次のセクションを参照してください。

ユーザー ID
コマンド 説明
new TeamsFx(IdentityType.User) アプリケーションは、現在の Teams ユーザーとして認証されます。
TeamsFx:setSsoToken() Node.js 環境のユーザー ID (ブラウザーなし)。
TeamsFx:getUserInfo() ユーザーの基礎情報を取得する。
TeamsFx:login() これは、SSO を使用して特定の OAuth スコープのアクセス トークンを取得する場合に、ユーザーが同意プロセスを実行できるようにするために使用されます。

注:

現在の Teams ユーザーに代わってリソースにアクセスできます。

アプリケーション ID
コマンド 説明
new TeamsFx(IdentityType.App) アプリケーションはアプリケーションとして認証されます。 通常、アクセス許可には管理者の承認が必要です。
TeamsFx:getCredential() ID の種類に対応する資格情報インスタンスが自動的に提供されます。

注:

リソースの管理者の同意が必要です。

Credential

資格情報クラスは、特定の TokenCredential スコープのアクセス トークンを提供するように設計された Azure ライブラリ API で広く使用されるインターフェイスを実装します。 資格情報と認証フローに関連するクラスの詳細については、「 credential フォルダー」を参照してください。

認証を簡略化するための資格情報クラスは 3 つあります。 資格情報クラスターゲットごとに対応するシナリオを次に示します。

ブラウザー環境でのユーザー ID

TeamsUserCredential は、現在 Teams ユーザーの ID を表します。 ユーザーの資格情報が初めて認証されると、Teams SSO によってトークン交換の On-Behalf-Of フローが実行されます。 SDK では、ブラウザー環境でユーザー ID を選択するときに、この資格情報が使用されます。

次のコードは、作成 TeamsUserCredentialする例です。

const authConfig: TeamsUserCredentialAuthConfig = {
  clientId: process.env.REACT_APP_CLIENT_ID,
  initiateLoginEndpoint: process.env.REACT_APP_START_LOGIN_PAGE_URL,
};

const credential = new TeamsUserCredential(authConfig);

必要な構成は initiateLoginEndpoint であり clientId 、 型 TeamsUserCredentialAuthConfig内にあります。

Node.js環境のユーザー ID

OnBehalfOfUserCredential は、Azure 関数またはボットのシナリオでは、On-Behalf-Of フローを使用し、Teams SSO トークンを必要とします。 TeamsFx SDK では、Node.js環境でユーザー ID を選択するときに、次の資格情報が使用されます。

次のコードは、作成 OnBehalfOfUserCredentialする例です。

const oboAuthConfig: OnBehalfOfCredentialAuthConfig = {
  authorityHost: process.env.M365_AUTHORITY_HOST,
  clientId: process.env.M365_CLIENT_ID,
  tenantId: process.env.M365_TENANT_ID,
  clientSecret: process.env.M365_CLIENT_SECRET,
};

const oboCredential = new OnBehalfOfUserCredential(ssoToken, oboAuthConfig);

必要な構成は、tenantIdclientSecretclientIdauthorityHostまたは certificateContent 型OnBehalfOfCredentialAuthConfig内にあります。

Node.js環境のアプリ ID

AppCredential はアプリ ID を表します。 ユーザーが関与していない場合 (たとえば、タイム トリガーされた自動化ジョブなど) にアプリ ID を使用できます。 TeamsFx SDK では、Node.js環境でアプリ ID を選択するときに、次の資格情報が使用されます。

次のコードは、作成 AppCredentialする例です。

const appAuthConfig: AppCredentialAuthConfig = {
  authorityHost: process.env.M365_AUTHORITY_HOST,
  clientId: process.env.M365_CLIENT_ID,
  tenantId: process.env.M365_TENANT_ID,
  clientSecret: process.env.M365_CLIENT_SECRET,
};
const appCredential = new AppCredential(appAuthConfig);

必要な構成は、tenantIdauthorityHostclientId、clientSecret、またはcertificateContent型内にあるです。AppCredentialAuthConfig

Bot SSO

ボット関連のクラスは、ボット フォルダーの下に格納されます。

TeamsBotSsoPrompt はボット フレームワークと統合されます。 これにより、ボット アプリケーションを開発し、ボット SSO を使用する場合の認証プロセスが簡略化されます。

次のコードは、作成 TeamsBotSsoPromptする例です。

const TeamsBotSsoPromptId = "TEAMS_BOT_SSO_PROMPT";

const settings: TeamsBotSsoPromptSettings = {
  scopes: ["User.Read"],
  timeout: 900000,
  endOnInvalidMessage: true,
};

const authConfig: OnBehalfOfCredentialAuthConfig = {
  authorityHost: process.env.M365_AUTHORITY_HOST,
  clientId: process.env.M365_CLIENT_ID,
  tenantId: process.env.M365_TENANT_ID,
  clientSecret: process.env.M365_CLIENT_SECRET,
};
const loginUrl = process.env.INITIATE_LOGIN_ENDPOINT;
const ssoPrompt = new TeamsBotSsoPrompt(authConfig, loginUrl, TeamsBotSsoPromptId, settings);

サポートされているワークシート関数

TeamsFx SDK には、サード パーティ製ライブラリの構成を容易にするためのいくつかの機能が用意されています。 これらはコア フォルダーの下にあります。

  • Microsoft Graph Service:createMicrosoftGraphClient、、および MsGraphAuthProvider は、createMicrosoftGraphClientWithCredential認証済みの Graph インスタンスを作成するのに役立ちます。

    注:

    createMicrosoftGraphClient 関数は非推奨になりました。 コーディング エクスペリエンスを向上させるために、代わりに を使用 createMicrosoftGraphClientWithCredential することをお勧めします。

  • SQL: は getTediousConnectionConfig 、面倒な接続構成を返します。

    必要な構成:

    • ユーザー ID を使用する場合は、、sqlServerEndpointsqlUsername、 がsqlPassword必要です。
    • MSI ID を使用する場合は、 と sqlServerEndpointsqlIdentityId が必要です。

    注:

    関数は getTediousConnectionConfig 非推奨になりました。 柔軟性を高めるために、独自の面倒な構成を作成することをお勧めします。

TeamsFx クラスの構成をオーバーライドする

注:

TeamsFx クラスは非推奨になりました。 代わりに、、OnBehalfOfUserCredential、および をAppCredential使用TeamsUserCredentialします。

新しい TeamsFx インスタンスを作成するときにカスタム構成を渡して、既定の構成をオーバーライドしたり、不足している場合に必要なフィールドを environment variables 設定したりできます。

タブ プロジェクトの場合

Microsoft Visual Studio Code Toolkit を使用してタブ プロジェクトを作成した場合は、事前構成済みの環境変数から次の構成値が使用されます。

  • authorityHost (REACT_APP_AUTHORITY_HOST)
  • tenantId (REACT_APP_TENANT_ID)
  • clientId (REACT_APP_CLIENT_ID)
  • initiateLoginEndpoint (REACT_APP_START_LOGIN_PAGE_URL)
  • applicationIdUri (REACT_APP_START_LOGIN_PAGE_URL)
  • apiEndpoint (REACT_APP_FUNC_ENDPOINT) // はバックエンド関数がある場合にのみ使用されます
  • apiName (REACT_APP_FUNC_NAME) // はバックエンド関数がある場合にのみ使用されます
Azure 関数またはボット プロジェクトの場合

Visual Studio Code Toolkit を使用して Azure 関数またはボット プロジェクトを作成した場合は、事前構成済みの環境変数から次の構成値が使用されます。

  • initiateLoginEndpoint (INITIATE_LOGIN_ENDPOINT)

  • authorityHost (M365_AUTHORITY_HOST)

  • tenantId (M365_TENANT_ID)

  • clientId (M365_CLIENT_ID)

  • clientSecret (M365_CLIENT_SECRET)

  • applicationIdUri (M365_APPLICATION_ID_URI)

  • apiEndpoint (API_ENDPOINT)

  • sqlServerEndpoint (SQL_ENDPOINT) // は、sql インスタンスがある場合にのみ使用されます

  • sqlUsername (SQL_USER_NAME) // は、sql インスタンスがある場合にのみ使用されます

  • sqlPassword (SQL_PASSWORD) // は、sql インスタンスがある場合にのみ使用されます

  • sqlDatabaseName (SQL_DATABASE_NAME) // は、SQL インスタンスがある場合にのみ使用されます

  • sqlIdentityId (IDENTITY_ID) // は、SQL インスタンスがある場合にのみ使用されます

エラー処理

API エラー応答の基本的な種類は です ErrorWithCode。この応答には、エラー コードとエラー メッセージが含まれています。 たとえば、特定のエラーを除外するには、次のスニペットを使用します。

try {
  const teamsfx = new TeamsFx();
  await teamsfx.login("User.Read");
} catch (err: unknown) {
  if (err instanceof ErrorWithCode && err.code !== ErrorCode.ConsentFailed) {
    throw err;
  } else {
    // Silently fail because user cancels the consent dialog
    return;
  }
}

注:

TeamsFx クラスは非推奨であり ErrorWithCode 、推奨されていません。 代わりに を使用 TeamsUserCredential できます。

try {
  const authConfig: TeamsUserCredentialAuthConfig = {
    clientId: process.env.REACT_APP_CLIENT_ID,
    initiateLoginEndpoint: process.env.REACT_APP_START_LOGIN_PAGE_URL,
  };

  const credential = new TeamsUserCredential(authConfig);  
  await credential.login("User.Read");
} catch (err: unknown) {
  if (err instanceof ErrorWithCode && err.code !== ErrorCode.ConsentFailed) {
    throw err;
  } else {
    // Silently fail because user cancels the consent dialog
    return;
  }
}

Microsoft Graph などの他のライブラリで資格情報インスタンスが使用されている場合は、エラーがキャッチされて変換される可能性があります。

Microsoft Graph シナリオ

このセクションでは、Microsoft Graph に関連する一般的なシナリオに関するいくつかのコード スニペットを示します。 このようなシナリオでは、ユーザーはフロントエンドまたはバックエンドで異なるアクセス許可を使用して API を呼び出すことができます。

  • フロントエンドでのユーザー 委任アクセス許可 (使用 TeamsUserCredential)

    タブ アプリで Graph API を使用する

    このコード スニペットでは、タブ アプリで、 と createMicrosoftGraphClientWithCredential を使用TeamsUserCredentialして Microsoft Graph からユーザー プロファイルを取得する方法を示します。 また、 をキャッチして解決 GraphErrorする方法も示します。

    1. 必要なクラスをインポートします。

      import {
 createMicrosoftGraphClientWithCredential,
 TeamsUserCredential,
} from "@microsoft/teamsfx";

    2. インスタンスを作成 TeamsUserCredential します。

      const authConfig: TeamsUserCredentialAuthConfig = {
clientId: process.env.REACT_APP_CLIENT_ID!,
initiateLoginEndpoint: process.env.REACT_APP_START_LOGIN_PAGE_URL!,
};

const teamsUserCredential = new TeamsUserCredential(authConfig);

    3. を使用して teamsUserCredential.login() 、ユーザーの同意を取得します。

      // Put these code in a call-to-action callback function to avoid browser blocking automatically showing up pop-ups.
await teamsUserCredential.login(["User.Read"]); // Login with scope

    4. TeamsFx インスタンスとグラフ クライアントを初期化し、このクライアントによって Microsoft Graph から情報を取得できます。

      try {
 const graphClient = createMicrosoftGraphClientWithCredential(teamsUserCredential, ["User.Read"]); // Initializes MS Graph SDK using our MsGraphAuthProvider
 const profile = await graphClient.api("/me").get();
} catch (err: unknown) {
 // ErrorWithCode is handled by Graph client
 if (err instanceof GraphError && err.code?.includes(ErrorCode.UiRequiredError)) {
   // Need to show login button to ask for user consent.
 }
}

    タブ アプリでGraph APIを使用するサンプルの詳細については、「hello-world-tab サンプル」を参照してください。

    Microsoft Graph Toolkit との統合

    Microsoft Graph Toolkit ライブラリは、Microsoft Graph を利用したさまざまな認証プロバイダーと UI コンポーネントのコレクションです。

    パッケージは @microsoft/mgt-teamsfx-provider 、クラスを TeamsFxProvider 使用 TeamsFx してユーザーにサインインし、Microsoft Graph で使用するトークンを取得するクラスを公開します。

    1. 次の必須パッケージをインストールできます。

         npm install @microsoft/mgt-element @microsoft/mgt-teamsfx-provider @microsoft/teamsfx

    2. コンポーネント内のプロバイダーを初期化します。

      // Import the providers and credential at the top of the page
import {Providers} from '@microsoft/mgt-element';
import {TeamsFxProvider} from '@microsoft/mgt-teamsfx-provider';
import {TeamsUserCredential} from "@microsoft/teamsfx";

const scope = ["User.Read"];
const teamsfx = new TeamsFx();
const provider = new TeamsFxProvider(teamsfx, scope);
Providers.globalProvider = provider;

    3. メソッドを teamsfx.login(scopes) 使用して、必要なアクセス トークンを取得できます。

      // Put these code in a call-to-action callback function to avoid browser blocking automatically showing up pop-ups. 
await teamsfx.login(this.scope);
Providers.globalProvider.setState(ProviderState.SignedIn);

    4. コンテキストを使用して Microsoft Graph にアクセスするには、REACTを使用して、HTML ページまたはrender()メソッドに任意のコンポーネントをTeamsFx追加できます。

      <mgt-person query="me" view="threeLines"></mgt-person>

      public render(): void {
return (
 <div>
     <Person personQuery="me" view={PersonViewType.threelines}></Person>
 </div>
);
}

    TeamsFx プロバイダーを初期化するためのサンプルの詳細については、 連絡先エクスポーターのサンプルを参照してください。

  • バックエンドでのユーザー 委任アクセス許可 (使用 OnBehalfOfUserCredential)

    ボット アプリケーションでGraph APIを使用する

    このコード スニペットでは、 を使用 TeamsBotSsoPrompt してダイアログを設定し、サインインしてアクセス トークンを取得する方法を示します。

    1. ダイアログ セットを初期化して追加 TeamsBotSsoPrompt します。

      const { ConversationState, MemoryStorage } = require("botbuilder");
const { DialogSet, WaterfallDialog } = require("botbuilder-dialogs");
const { TeamsBotSsoPrompt, OnBehalfOfCredentialAuthConfig, TeamsBotSsoPromptSettings } = require("@microsoft/teamsfx");

const convoState = new ConversationState(new MemoryStorage());
const dialogState = convoState.createProperty("dialogState");
const dialogs = new DialogSet(dialogState);

const TeamsBotSsoPromptId = "TEAMS_BOT_SSO_PROMPT";

const settings: TeamsBotSsoPromptSettings = {
scopes: ["User.Read"],
timeout: 900000,
endOnInvalidMessage: true,
};

const authConfig: OnBehalfOfCredentialAuthConfig = {
 authorityHost: process.env.M365_AUTHORITY_HOST,
 clientId: process.env.M365_CLIENT_ID,
 tenantId: process.env.M365_TENANT_ID,
 clientSecret: process.env.M365_CLIENT_SECRET,
};
const loginUrl = process.env.INITIATE_LOGIN_ENDPOINT;
const ssoPrompt = new TeamsBotSsoPrompt(authConfig, loginUrl, TeamsBotSsoPromptId, settings);

dialogs.add(ssoPrompt);

    2. ダイアログを開始し、サインインします。

      dialogs.add(
  new WaterfallDialog("taskNeedingLogin", [
   async (step) => {
     return await step.beginDialog("TeamsBotSsoPrompt");
   },
   async (step) => {
    const token = step.result;
    if (token) {
      // ... continue with task needing access token ...
    } else {
     await step.context.sendActivity(`Sorry... We couldn't log you in. Try again later.`);
     return await step.endDialog();
    }
  },
 ])
);

    ボット アプリケーションで Graph API を使用するためのサンプルの詳細については、「 bot-sso サンプル」を参照してください。

    メッセージ拡張機能でGraph APIを使用する

    次のコード スニペットは、 からTeamsActivityHandler拡張された をオーバーライドhandleTeamsMessagingExtensionQueryし、TeamsFx SDK によって提供される を使用handleMessageExtensionQueryWithSSOしてサインインしてアクセス トークンを取得する方法を示しています。

    
 const authConfig: OnBehalfOfCredentialAuthConfig = {
  authorityHost: process.env.M365_AUTHORITY_HOST,
  clientId: process.env.M365_CLIENT_ID,
  tenantId: process.env.M365_TENANT_ID,
  clientSecret: process.env.M365_CLIENT_SECRET,
 };
 const loginUrl = process.env.INITIATE_LOGIN_ENDPOINT;
 public async handleTeamsMessagingExtensionQuery(context: TurnContext, query: any): Promise<any> {
  return await handleMessageExtensionQueryWithSSO(context, authConfig, loginUrl, 'User.Read', 
    async (token: MessageExtensionTokenResponse) => {
      // ... continue to query with access token ...
    });
 }

    メッセージ拡張機能で graph API を使用するサンプルの詳細については、「 message-extension-sso-sample」を参照してください。

    コマンド ボットでGraph APIを使用する

    このコード スニペットは、コマンド ボットが Microsoft API を呼び出すために実装 TeamsFxBotSsoCommandHandler する方法を示しています。

     import { Activity, TurnContext } from "botbuilder";
 import {
  CommandMessage,
  TriggerPatterns,
  createMicrosoftGraphClientWithCredential,
  TeamsFxBotSsoCommandHandler,
  TeamsBotSsoPromptTokenResponse,
 } from "@microsoft/teamsfx";

 const authConfig: OnBehalfOfCredentialAuthConfig = {
  authorityHost: process.env.M365_AUTHORITY_HOST,
  clientId: process.env.M365_CLIENT_ID,
  tenantId: process.env.M365_TENANT_ID,
  clientSecret: process.env.M365_CLIENT_SECRET,
 };
 const loginUrl = process.env.INITIATE_LOGIN_ENDPOINT;

 export class ProfileSsoCommandHandler implements TeamsFxBotSsoCommandHandler {
  triggerPatterns: TriggerPatterns = "profile";

  async handleCommandReceived(
    context: TurnContext,
    message: CommandMessage,
    tokenResponse: TeamsBotSsoPromptTokenResponse,
  ): Promise<string | Partial<Activity> | void> {

    const oboCredential = new OnBehalfOfUserCredential(tokenResponse.ssoToken, oboAuthConfig);

    // Add scope for your Azure AD app. For example: Mail.Read, etc.
    const graphClient = createMicrosoftGraphClientWithCredential(oboCredential, ["User.Read"]);

    // Call graph api use `graph` instance to get user profile information
    const me = await graphClient.api("/me").get();

    if (me) {
      // Bot will send the user profile info to user
      return `Your command is '${message.text}' and you're logged in as ${me.displayName}`;
    } else {
      return "Could not retrieve profile information from Microsoft Graph.";
    }
  }
 }

    コマンド ボットで SSO コマンド ハンドラーを実装する方法の詳細については、「 Teams アプリにシングル サインオンを追加する」を参照してください。 また、 SSO コマンド ボットを試すことができる command-bot-with-sso サンプル プロジェクトがあります。

    タブ アプリで Azure 関数を呼び出す: On-Behalf-Of フロー

    このコード スニペットでは、または axios ライブラリを使用CreateApiClientして Azure Function を呼び出す方法と、Azure Function で Graph APIを呼び出してユーザー プロファイルを取得する方法を示します。

    1. TeamsFx sdk で提供されている を使用 CreateApiClient して、Azure 関数を呼び出すことができます。

      async function callFunction() {
  const authConfig: TeamsUserCredentialAuthConfig = {
 clientId: process.env.REACT_APP_CLIENT_ID,
 initiateLoginEndpoint: process.env.REACT_APP_START_LOGIN_PAGE_URL,
  };
 const teamsUserCredential = new TeamsUserCredential(authConfig);
 // Create an API client by providing the token and endpoint.
 const apiClient = CreateApiClient(
   "https://YOUR_API_ENDPOINT", // Create an API Client that uses SSO token to authenticate requests
   new BearerTokenAuthProvider(async () =>  (await teamsUserCredential.getToken(""))!.token) // Call API hosted in Azure Functions on behalf of user to inject token to request header
 );
 // Send a GET request to "RELATIVE_API_PATH", "/api/functionName" for example.
  const response = await apiClient.get("RELATIVE_API_PATH");
  return response.data;
}

      ライブラリを使用 axios して Azure 関数を呼び出すこともできます。

      async function callFunction() {
  const authConfig: TeamsUserCredentialAuthConfig = {
    clientId: process.env.REACT_APP_CLIENT_ID,
    initiateLoginEndpoint: process.env.REACT_APP_START_LOGIN_PAGE_URL,
  };
  const teamsUserCredential = new TeamsUserCredential(authConfig);
  const accessToken = await teamsUserCredential.getToken(""); // Get SSO token 
  const endpoint = "https://YOUR_API_ENDPOINT";
  const response = await axios.default.get(endpoint + "/api/" + functionName, {
    headers: {
      authorization: "Bearer " + accessToken.token,
    },
  });
  return response.data;
}

    2. 応答としてユーザーの代わりに Azure 関数でGraph APIを呼び出します。

      
export default async function run(
context: Context,
req: HttpRequest,
teamsfxContext: TeamsfxContext
): Promise<Response> {
 const res: Response = { status: 200, body: {},};

 const authConfig: OnBehalfOfCredentialAuthConfig = {
   authorityHost: process.env.M365_AUTHORITY_HOST,
   clientId: process.env.M365_CLIENT_ID,
   tenantId: process.env.M365_TENANT_ID,
   clientSecret: process.env.M365_CLIENT_SECRET,
 };
 const oboCredential = new OnBehalfOfUserCredential(tokenResponse.ssoToken, oboAuthConfig);

 // Query user's information from the access token.
 try {
  const currentUser: UserInfo = await oboCredential.getUserInfo();
  if (currentUser && currentUser.displayName) {
    res.body.userInfoMessage = `User display name is ${currentUser.displayName}.`;
  } else {
    res.body.userInfoMessage = "No user information was found in access token.";
  }
 } catch (e) {
 }
 // Create a graph client to access user's Microsoft 365 data after user has consented.
 try {
  const graphClient: Client = createMicrosoftGraphClientWithCredential(oboCredential, [".default"]);
  const profile: any = await graphClient.api("/me").get();
  res.body.graphClientMessage = profile;
 } catch (e) {
 }
 return res;
 }

    ボット アプリケーションで Graph API を使用するためのサンプルの詳細については、「 hello-world-tab-with-backend サンプル」を参照してください。

  • バックエンドでのアプリケーションのアクセス許可

    Azure 関数で証明書ベースの認証を使用する

    このコード スニペットでは、証明書ベースのアプリケーションアクセス許可を使用して、Graph APIの呼び出しに使用できるトークンを取得する方法を示します。

    1. を指定して をappAuthConfigPEM-encoded key certificate初期化できます。

       const appAuthConfig: AppCredentialAuthConfig = {
   authorityHost: process.env.M365_AUTHORITY_HOST,
   clientId: process.env.M365_CLIENT_ID,
   tenantId: process.env.M365_TENANT_ID,
   certificateContent: 'PEM-encoded key certificate',
  };

    2. を使用 AppCredential してトークンを取得できます。

      const appCredential = new AppCredential(appAuthConfig);
const token = appCredential.getToken();
    Azure 関数でクライアント シークレット認証を使用する

    このコード スニペットでは、クライアント シークレット アプリケーションのアクセス許可を使用して、Graph APIの呼び出しに使用されるトークンを取得する方法を示します。

    1. を指定して をauthConfigclient secret初期化できます。

      const appAuthConfig: AppCredentialAuthConfig = {
 authorityHost: process.env.M365_AUTHORITY_HOST,
 clientId: process.env.M365_CLIENT_ID,
 tenantId: process.env.M365_TENANT_ID,
 clientSecret: process.env.M365_CLIENT_SECRET,
};

    2. を authConfig 使用してトークンを取得できます。

      const appCredential = new AppCredential(appAuthConfig);
const token = appCredential.getToken();

    ボット アプリケーションで Graph API を使用するためのサンプルの詳細については、 hello-world-tab-with-backend サンプルを参照してください。

その他のシナリオ

このセクションでは、Microsoft Graph に関連するその他のシナリオに関するいくつかのコード スニペットを示します。 ボットまたは Azure 関数で API クライアントを作成し、Azure Function で SQL データベースにアクセスできます。

ボットまたは Azure 関数で既存の API を呼び出す API クライアントを作成する

このコード スニペットは、 によってボット内の既存の API を呼び出す方法を ApiKeyProvider示しています。

// Create an API Key auth provider. In addition to APiKeyProvider, following auth providers are also available:
// BearerTokenAuthProvider, BasicAuthProvider, CertificateAuthProvider.
const authProvider = new ApiKeyProvider("YOUR_API_KEY_NAME",
  "YOUR_API_KEY_VALUE",
  ApiKeyLocation.Header
);

// Create an API client using above auth provider.
// You can also implement AuthProvider interface and use it here.
const apiClient = createApiClient(
  "YOUR_API_ENDPOINT",
  authProvider
);

// Send a GET request to "RELATIVE_API_PATH", "/api/apiname" for example.
const response = await apiClient.get("RELATIVE_API_PATH");
Azure 関数で SQL データベースにアクセスする

ライブラリを使用して tedious SQL にアクセスし、認証を管理する を使用 DefaultTediousConnectionConfiguration します。 の結果に基づいて、他の SQL ライブラリの sqlConnectionConfig.getConfig()接続構成を作成することもできます。

  1. 接続構成を設定します。

    // Equivalent to:
// const sqlConnectConfig = new DefaultTediousConnectionConfiguration({
//    sqlServerEndpoint: process.env.SQL_ENDPOINT,
//    sqlUsername: process.env.SQL_USER_NAME,
//    sqlPassword: process.env.SQL_PASSWORD,
// });
const teamsfx = new TeamsFx();
// If there's only one SQL database
const config = await getTediousConnectionConfig(teamsfx);
// If there are multiple SQL databases
const config2 = await getTediousConnectionConfig(teamsfx, "your database name");

  2. データベースに接続します。

    const connection = new Connection(config);
connection.on("connect", (error) => {
if (error) {
 console.log(error);
 }
});

    注:

    関数は getTediousConnectionConfig 非推奨になりました。柔軟性を高めるために、独自の面倒な構成を作成することをお勧めします。

Azure 関数で SQL データベースにアクセスするためのサンプルの詳細については、「 share-now サンプル」を参照してください。

高度なカスタマイズ

ログを構成する

このライブラリを使用する場合は、顧客ログ レベルを設定し、出力をリダイレクトできます。

注:

ログは既定でオフになっています。ログ レベルを設定することで有効にすることができます。

ログ レベルを設定してログを有効にする

ログ レベルを設定すると、ログ記録が有効になります。 既定では、ログ情報がコンソールに出力されます。

次のスニペットを使用してログ レベルを設定します。

// Only need the warning and error messages.
setLogLevel(LogLevel.Warn);

注:

カスタム ロガーまたはログ関数を設定することで、ログ出力をリダイレクトできます。

カスタム ロガーを設定してリダイレクトする

setLogLevel(LogLevel.Info);
// Set another logger if you want to redirect to Application Insights in Azure Function
setLogger(context.log);

カスタム ログ関数を設定してリダイレクトする

setLogLevel(LogLevel.Info);
// Only log error message to Application Insights in bot application.
setLogFunction((level: LogLevel, message: string) => {
  if (level === LogLevel.Error) {
    this.telemetryClient.trackTrace({
      message: message,
      severityLevel: Severity.Error,
    });
  }
});

注:

カスタム ロガーを設定した場合、ログ関数は有効になりません。

最新の SDK バージョンをアップグレードする

がある SDK のバージョンを使用している場合は loadConfiguration()、次の手順に従って最新の SDK バージョンにアップグレードできます。

  1. を使用して、カスタマイズした設定を削除 loadConfiguration() して new TeamsFx(IdentityType.User, { ...customConfig })渡します。
  2. new TeamsUserCredential() をnew TeamsFx() に置き換えます。
  3. new M365TenantCredential() をnew TeamsFx(IdentityType.App) に置き換えます。
  4. new OnBehalfOfUserCredential(ssoToken) をnew TeamsFx().setSsoToken(ssoToken) に置き換えます。
  5. のインスタンス TeamsFx をヘルパー関数に渡して、資格情報インスタンスを置き換えます。

関連項目