チュートリアル:Azure Functions を使用した Azure SignalR Service 認証

func init --worker-runtime node --language javascript --name my-app --model V4

func init --worker-runtime node --language javascript --name my-app --model V3

1. ルート プロジェクト フォルダーから、次のコマンドを使用して組み込みのテンプレートから negotiate 関数を作成します。

   func new --template "HTTP trigger" --name negotiate
   

2. src/functions/negotiate.js を開き、コンテンツを次のように更新します。

   const { app, input } = require('@azure/functions');
   
   const inputSignalR = input.generic({
       type: 'signalRConnectionInfo',
       name: 'connectionInfo',
       hubName: 'default',
       connectionStringSetting: 'AzureSignalRConnectionString',
   });
   
   app.post('negotiate', {
       authLevel: 'anonymous',
       handler: (request, context) => {
           return { body: JSON.stringify(context.extraInputs.get(inputSignalR)) }
       },
       route: 'negotiate',
       extraInputs: [inputSignalR],
   });
   

   この関数には、SignalR クライアントからの要求を受信するための HTTP トリガー バインドが含まれています。 この関数には、クライアントが default という名前の Azure SignalR Service ハブに接続するための有効な資格情報を生成する SignalR 入力バインドも含まれています。

   この関数は、入力バインドから SignalR の接続情報を受け取り、それを HTTP 応答の本文でクライアントに返します。

   ローカル開発用の signalRConnectionInfo バインディングには、userId プロパティがありません。 後で追加して、関数アプリを Azure にデプロイするときに SignalR 接続のユーザー名を設定します。

1. ルート プロジェクト フォルダーから、次のコマンドを使用して組み込みのテンプレートから negotiate 関数を作成します。

   func new --template "SignalR negotiate HTTP trigger" --name negotiate
   

2. negotiate/function.json を開いて、関数バインドの構成を表示します。

   この関数には、SignalR クライアントからの要求を受信するための HTTP トリガー バインドが含まれています。 この関数には、クライアントが default という名前の Azure SignalR Service ハブに接続するための有効な資格情報を生成する SignalR 入力バインドも含まれています。

   {
     "disabled": false,
     "bindings": [
       {
         "authLevel": "anonymous",
         "type": "httpTrigger",
         "direction": "in",
         "methods": ["post"],
         "name": "req",
         "route": "negotiate"
       },
       {
         "type": "http",
         "direction": "out",
         "name": "res"
       },
       {
         "type": "signalRConnectionInfo",
         "name": "connectionInfo",
         "hubName": "default",
         "connectionStringSetting": "AzureSignalRConnectionString",
         "direction": "in"
       }
     ]
   }
   

   ローカル開発用の signalRConnectionInfo バインディングには、userId プロパティがありません。 後で追加して、関数アプリを Azure にデプロイするときに SignalR 接続のユーザー名を設定します。

3. negotiate/function.json ファイルを閉じます。

4. negotiate/index.js を開き、関数の本文を表示します。

   module.exports = async function (context, req, connectionInfo) {
     context.res.body = connectionInfo;
   };
   

   この関数は、入力バインドから SignalR の接続情報を受け取り、それを HTTP 応答の本文でクライアントに返します。 SignalR クライアントにより、この情報が使用され Azure SignalR Service インスタンスに接続されます。

1. ルート プロジェクト フォルダーから、次のコマンドを使用して、テンプレートから sendMessage という名前の HTTP トリガー関数を作成します。

   func new --name sendMessage --template "Http trigger"
   

2. src/functions/sendMessage.js ファイルを開き、コンテンツを次のように更新します。

   const { app, output } = require('@azure/functions');
   
   const signalR = output.generic({
       type: 'signalR',
       name: 'signalR',
       hubName: 'default',
       connectionStringSetting: 'AzureSignalRConnectionString',
   });
   
   app.http('messages', {
       methods: ['POST'],
       authLevel: 'anonymous',
       extraOutputs: [signalR],
       handler: async (request, context) => {
           const message = await request.json();
           message.sender = request.headers && request.headers.get('x-ms-client-principal-name') || '';
   
           let recipientUserId = '';
           if (message.recipient) {
               recipientUserId = message.recipient;
               message.isPrivate = true;
           }
           context.extraOutputs.set(signalR,
               {
                   'userId': recipientUserId,
                   'target': 'newMessage',
                   'arguments': [message]
               });
       }
   });
   

   この関数には、HTTP トリガーと SignalR 出力バインドが含まれています。 HTTP 要求から本文を取り出し、Azure SignalR Service に接続されているクライアントに送信します。 各クライアントで newMessage という名前の関数を呼び出します。

   この関数は送信元の ID を読み取ることができます。また、メッセージ本文の recipient 値を受け取り、1 人のユーザーに限定してメッセージを送信することができます。 これらの機能はこのチュートリアルの後半で使用します。

3. ファイルを保存します。

1. ルート プロジェクト フォルダーから、次のコマンドを使用して、テンプレートから sendMessage という名前の HTTP トリガー関数を作成します。

   func new --name sendMessage --template "Http trigger"
   

2. 関数のバインドを構成するには、sendMessage/function.json の内容を次のコードに置き換えます。

   {
     "disabled": false,
     "bindings": [
       {
         "authLevel": "anonymous",
         "type": "httpTrigger",
         "direction": "in",
         "name": "req",
         "route": "messages",
         "methods": ["post"]
       },
       {
         "type": "http",
         "direction": "out",
         "name": "res"
       },
       {
         "type": "signalR",
         "name": "$return",
         "hubName": "default",
         "direction": "out"
       }
     ]
   }
   

   上記のコードは、元のファイルに次の 2 つの変更を加えます。

   • ルートを messages に変更し、HTTP トリガーを POST HTTP メソッドに制限します。
   • default という名前の Azure SignalR Service ハブに接続されているすべてのクライアントに、関数によって返されるメッセージを送信する Azure SignalR Service 出力バインドを追加します。

3. sendMessage/index.js の内容を次のコードに置き換えます。

   module.exports = async function (context, req) {
     const message = req.body;
     message.sender =
       (req.headers && req.headers["x-ms-client-principal-name"]) || "";
   
     let recipientUserId = "";
     if (message.recipient) {
       recipientUserId = message.recipient;
       message.isPrivate = true;
     }
   
     return {
       userId: recipientUserId,
       target: "newMessage",
       arguments: [message],
     };
   };
   

   この関数は、HTTP 要求から本文を取り出し、Azure SignalR Service に接続されているクライアントに送信します。 各クライアントで newMessage という名前の関数を呼び出します。

   この関数は送信元の ID を読み取ることができます。また、メッセージ本文の recipient 値を受け取り、1 人のユーザーに限定してメッセージを送信することができます。 これらの機能はこのチュートリアルの後半で使用します。

4. ファイルを保存します。

1. 関数プロジェクトのルート ディレクトリに index.html という名前のファイルを作成します。

2. index.html の内容をコピーしてファイルに貼り付けます。 ファイルを保存します。

3. ルート プロジェクト フォルダーから、次のコマンドを使用して、テンプレートから index という名前の HTTP トリガー関数を作成します。

   func new --name index --template "Http trigger"
   

4. src/functions/index.js のコンテンツを次のコードに変更します。

   const { app } = require('@azure/functions');
   const { readFile } = require('fs/promises');
   
   app.http('index', {
       methods: ['GET'],
       authLevel: 'anonymous',
       handler: async (context) => {
           const content = await readFile('index.html', 'utf8', (err, data) => {
               if (err) {
                   context.err(err)
                   return
               }
           });
   
           return {
               status: 200,
               headers: {
                   'Content-Type': 'text/html'
               },
               body: content,
           };
       }
   });
   

   この関数は静的 Web ページを読み取って、ユーザーに返します。

5. アプリをローカルでテストします。 次のコマンドを使用して関数アプリを起動します。

   func start
   

6. Web ブラウザーで http://localhost:7071/api/index を開きます。 チャット Web ページが表示されます。

   

7. チャット ボックスにメッセージを入力します。

   Enter キーを選択すると、Web ページにメッセージが表示されます。 SignalR クライアントのユーザー名が設定されていないため、すべてのメッセージを匿名で送信しています。

1. 関数プロジェクトのルート ディレクトリに content という名前のフォルダーを作成します。

2. content フォルダーに index.html という名前のファイルを作成します。

3. index.html の内容をコピーしてファイルに貼り付けます。 ファイルを保存します。

4. ルート プロジェクト フォルダーから、次のコマンドを使用して、テンプレートから index という名前の HTTP トリガー関数を作成します。

   func new --name index --template "Http trigger"
   

5. index/index.js の内容を次のコードに変更します。

   const fs = require("fs");
   
   module.exports = async function (context, req) {
     const fileContent = fs.readFileSync("content/index.html", "utf8");
   
     context.res = {
       // status: 200, /* Defaults to 200 */
       body: fileContent,
       headers: {
         "Content-Type": "text/html",
       },
     };
   };
   

   この関数は静的 Web ページを読み取って、ユーザーに返します。

6. index/function.json を開き、バインドの authLevel 値を anonymous に変更します。 これで、ファイル全体が次の例のようになります。

   {
     "bindings": [
       {
         "authLevel": "anonymous",
         "type": "httpTrigger",
         "direction": "in",
         "name": "req",
         "methods": ["get", "post"]
       },
       {
         "type": "http",
         "direction": "out",
         "name": "res"
       }
     ]
   }
   

7. アプリをローカルでテストします。 次のコマンドを使用して関数アプリを起動します。

   func start
   

8. Web ブラウザーで http://localhost:7071/api/index を開きます。 チャット Web ページが表示されます。

   

9. チャット ボックスにメッセージを入力します。

   Enter キーを選択すると、Web ページにメッセージが表示されます。 SignalR クライアントのユーザー名が設定されていないため、すべてのメッセージを匿名で送信しています。

1. src/functions/negotiate.js ファイルを開きます。

2. 値 {headers.x-ms-client-principal-name} を使用して、userId プロパティを inputSignalR バインドに挿入します。 この値は、SignalR クライアントのユーザー名を、認証されたユーザーの名前に設定するバインド式です。 バインドは次の例のようになります。

   const inputSignalR = input.generic({
       type: 'signalRConnectionInfo',
       name: 'connectionInfo',
       hubName: 'default',
       connectionStringSetting: 'AzureSignalRConnectionString',
       userId: '{headers.x-ms-client-principal-name}'
   });
   

3. ファイルを保存します。

1. negotiate/function.json を開きます。

2. 値 {headers.x-ms-client-principal-name} を使用して、userId プロパティを SignalRConnectionInfo バインドに挿入します。 この値は、SignalR クライアントのユーザー名を、認証されたユーザーの名前に設定するバインド式です。 バインドは次の例のようになります。

   {
     "type": "signalRConnectionInfo",
     "name": "connectionInfo",
     "userId": "{headers.x-ms-client-principal-name}",
     "hubName": "default",
     "direction": "in"
   }
   

3. ファイルを保存します。