次の方法で共有

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

資格情報クラスは、特定のスコープのアクセス トークンを提供するように設計された Azure ライブラリ API で広く使用される TokenCredential インターフェイスを実装します。 資格情報と認証フローに関連するクラスの詳細については、「 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);

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

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);

必要な構成は、型OnBehalfOfCredentialAuthConfig内にあるauthorityHost、tenantId、clientId、clientSecret、またはcertificateContentです。

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);

必要な構成は、型内の authorityHost、 tenantId、 clientId、 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、 createMicrosoftGraphClientWithCredential、 MsGraphAuthProvider は、認証された Graph インスタンスを作成するのに役立ちます。

    注:

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

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

    必要な構成:

    • ユーザー ID を使用する場合は、 sqlServerEndpoint、 sqlUsername、および sqlPassword が必要です。
    • MSI ID を使用する場合は、 sqlServerEndpointと sqlIdentityId が必要です。

    注:

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

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

注:

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

新しい 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 を使用する

    このコード スニペットでは、 TeamsUserCredential と createMicrosoftGraphClientWithCredential を使用して、タブ アプリで 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 を使用するためのサンプルの詳細については、「 Graph Conector アプリのサンプル」を参照してください。

    Microsoft Graph Toolkit との統合

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

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

    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. React を使用して HTML ページまたは render() メソッドに任意のコンポーネントを追加して、 TeamsFx コンテキストを使用して Microsoft Graph にアクセスできます。

      <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 フロー

    このコード スニペットでは、 CreateApiClient または axios ライブラリを使用して 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 Function を呼び出すこともできます。

      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. PEM-encoded key certificateを指定することで、appAuthConfigを初期化できます。

       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. client secretを指定することで、authConfigを初期化できます。

      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 クライアントを作成する

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

// 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を使用します。 また、 sqlConnectionConfig.getConfig()の結果に基づいて、他の SQL ライブラリの接続構成を作成することもできます。

  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 バージョンにアップグレードする

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

  1. loadConfiguration()を呼び出す代わりに、特定の認証構成クラスを使用して、資格情報の種類ごとに設定をカスタマイズします。 たとえば、AppCredentialにはAppCredentialAuthConfig、OnBehalfOfUserCredentialにはOnBehalfOfUserCredentialAuthConfig、TeamsUserCredentialにはTeamsUserCredentialAuthConfigを使用します。
  2. new TeamsUserCredential() をnew TeamsUserCredential(authConfig) に置き換えます。
  3. new M365TenantCredential() をnew AppCredential(authConfig) に置き換えます。
  4. new OnBehalfOfUserCredential(ssoToken) をnew OnBehalfOfUserCredential(authConfig) に置き換えます。

関連項目