Azure 関数を統合する

  • [アーティクル]

はじめに

このチュートリアルでは、ユーザー関連の情報を受け取るように Azure 関数を設定する方法に関する詳細なガイダンスを提供します。 Azure 関数を設定することを強くお勧めします。 そうすると、Contoso アプリでのアプリケーション パラメーターのハードコーディングを回避するのに役立ちます (ユーザー ID やユーザー トークンなど)。 これは非常に機密性の高い情報です。 さらに重要なのは、バックエンドでユーザー トークンが定期的に更新されることです。 ユーザー ID とトークンの組み合わせをハードコーディングすると、更新のたびに値を編集する必要があります。

前提条件

開始する前に、必ず次のことを行ってください。

  • アクティブなサブスクリプションがある Azure アカウントを作成します。 詳細については、アカウントの無料作成に関するページを参照してください。
  • Visual Studio Code をインストールします。

関数の設定

  1. Visual Studio Code で Azure 関数拡張機能をインストールします。 Visual Studio Code のプラグイン ブラウザーから、またはこちらのリンクに従って、インストールできます
  2. こちらのリンクに従って、ローカル環境の Azure 関数アプリを設定します。 JavaScript で HTTP トリガー テンプレートを使ってローカル関数を作成する必要があります。
  3. Azure Communication Services ライブラリをインストールします。 ID ライブラリを使って、ユーザー アクセス トークンを生成します。 ローカル環境の Azure 関数アプリ ディレクトリで npm install コマンドを実行して、Azure Communication Services Identity SDK for JavaScript をインストールします。
    npm install @azure/communication-identity --save
  1. 次のコードのように、index.js ファイルを変更します。
    const { CommunicationIdentityClient } = require('@azure/communication-identity');
    const connectionString = '<your_connection_string>'
    const acsEndpoint = "<your_ACS_endpoint>"
    
    module.exports = async function (context, req) {
        let tokenClient = new CommunicationIdentityClient(connectionString);
    
        const userIDHolder = await tokenClient.createUser();
        const userId = userIDHolder.communicationUserId
    
        const userToken = await (await tokenClient.getToken(userIDHolder, ["chat"])).token;
    
        context.res = {
            body: {
                acsEndpoint,
                userId,
                userToken
            }
        };
    }

上記のコードの説明: 最初の行では、CommunicationIdentityClient 用のインターフェイスをインポートします。 2 行目の接続文字列は、Azure portal の Azure Communication Services リソースで確認できます。 ACSEndpoint は、作成された Azure Communication Services リソースの URL です。

  1. Visual Studio Code でローカルの Azure 関数フォルダーを開きます。 index.js を開いて、ローカル環境の Azure 関数を実行します。 ローカル Azure 関数エンドポイントが作成され、ターミナルに出力されます。 次のようなメッセージが出力されます。
Functions:
HttpTrigger1: [GET,POST] http://localhost:7071/api/HttpTrigger1

ブラウザーでリンクを開きます。 結果は次の例のようになります。

    {
      "acsEndpoint": "<Azure Function endpoint>",
      "userId": "8:acs:a636364c-c565-435d-9818-95247f8a1471_00000014-f43f-b90f-9f3b-8e3a0d00c5d9",
      "userToken": "eyJhbGciOiJSUzI1NiIsImtpZCI6IjEwNiIsIng1dCI6Im9QMWFxQnlfR3hZU3pSaXhuQ25zdE5PU2p2cyIsInR5cCI6IkpXVCJ9.eyJza3lwZWlkIjoiYWNzOmE2MzYzNjRjLWM1NjUtNDM1ZC05ODE4LTk1MjQ3ZjhhMTQ3MV8wMDAwMDAxNC1mNDNmLWI5MGYtOWYzYi04ZTNhMGQwMGM1ZDkiLCJzY3AiOjE3OTIsImNzaSI6IjE2Njc4NjI3NjIiLCJleHAiOjE2Njc5NDkxNjIsImFjc1Njb3BlIjoiY2hhdCIsInJlc291cmNlSWQiOiJhNjM2MzY0Yy1jNTY1LTQzNWQtOTgxOC05NTI0N2Y4YTE0NzEiLCJyZXNvdXJjZUxvY2F0aW9uIjoidW5pdGVkc3RhdGVzIiwiaWF0IjoxNjY3ODYyNzYyfQ.t-WpaUUmLJaD0V2vgn3M5EKdJUQ_JnR2jnBUZq3J0zMADTnFss6TNHMIQ-Zvsumwy14T1rpw-1FMjR-zz2icxo_mcTEM6hG77gHzEgMR4ClGuE1uRN7O4-326ql5MDixczFeIvIG8s9kAeJQl8N9YjulvRkGS_JZaqMs2T8Mu7qzdIOiXxxlmcl0HeplxLaW59ICF_M4VPgUYFb4PWMRqLXWjKyQ_WhiaDC3FvhpE_Bdb5U1eQXDw793V1_CRyx9jMuOB8Ao7DzqLBQEhgNN3A9jfEvIE3gdwafpBWlQEdw-Uuf2p1_xzvr0Akf3ziWUsVXb9pxNlQQCc19ztl3MIQ"
    }

  1. ローカル関数をクラウドにデプロイします。 詳しくは、こちらのドキュメントをご覧ください。

  2. デプロイされた Azure 関数をテストします。 最初に、Azure portal で Azure 関数を見つけます。 次に、[関数の URL の取得] ボタンを使って、Azure 関数のエンドポイントを取得します。 表示される結果は、ステップ 5 で示したものと似ているはずです。 Azure 関数エンドポイントは、アプリでアプリケーション パラメーターを初期化するために使われます。

  3. UserTokenClient を実装します。これは、ターゲットの Azure 関数リソースを呼び出し、返された JSON オブジェクトから Azure Communication Services エンドポイント、ユーザー ID、ユーザー トークンを取得するために使われます。 使い方については、サンプル アプリを参照してください。

トラブルシューティング ガイド

  1. Azure 関数拡張機能がローカル関数を Azure クラウドにデプロイできなかった場合は、使われている Visual Studio Code と Azure 関数拡張機能のバージョンにバグがあることが原因である可能性があります。 Visual Studio Code バージョン 1.68.1 と Azure 関数拡張機能バージョン 1.2.1 の組み合わせが動作することがテストされています。
  2. アプリケーション定数を初期化する場所は、わかりにくいですが重要です。 Android のチャット クイック スタートに関する記事を再確認してください。 具体的には、「アプリケーションの定数を設定する」セクションの重要な注意事項を確認し、使っているバージョンのサンプル アプリと比較してください。

(省略可能) Azure 関数エンドポイントをセキュリティで保護する

このサンプルはデモンストレーション上、既定では、パブリックにアクセスできるエンドポイントを使用して、Azure Communication Services トークンをフェッチします。 運用のシナリオでの 1 つのオプションは、独自のセキュリティ保護されたエンドポイントを使って、独自のトークンをプロビジョニングすることです。

追加の構成により、このサンプルは、Microsoft Entra で保護されたエンドポイントへの接続をサポートし、アプリで Azure Communication Services のトークンをフェッチするにはユーザー ログが必要になります。 ユーザーがアプリにアクセスするには、Microsoft アカウントでサインインする必要があります。 このセットアップにより、ユーザーはログインが必要になりますが、セキュリティ レベルは向上します。 ユース ケースに基づいてそれを有効にするかどうかを決定します。

現在、サンプル コードでは Microsoft Entra ID をサポートしていないことに注意してください。 次のリンクに従って、アプリと Azure 関数でそれを有効にしてください。

(Android プラットフォームの設定を使って) Microsoft Entra ID にアプリを登録する。

Microsoft Entra ID ログインを使用するように App Service アプリまたは Azure Functions アプリを構成する。