Руководство по аутентификации в службе Azure SignalR с помощью Функций Azure

В этом пошаговом руководстве вы создадите комнату чата с проверкой подлинности и частным обменом сообщениями с помощью следующих технологий:

• Функции Azure: внутренний API для проверки подлинности пользователей и отправки сообщений чата.
• Служба Azure SignalR: служба трансляции новых сообщений в подключенные клиенты чата.
• служба хранилища Azure: требуется служба служба хранилища, требуемая Функции Azure.
• служба приложение Azure: служба, предоставляющая проверку подлинности пользователей.

Модель версии 4

Примечание.

Код можно получить упоминание в этой статье из GitHub.

Модель версии 3

Примечание.

Код можно получить упоминание в этой статье из GitHub.

Необходимые компоненты

• Учетная запись Azure с активной подпиской. Если у вас нет учетной записи, вы можете создать ее бесплатно.
• Node.js (версия 20.x).
• Функции Azure Core Tools (версия 4).

Возникли проблемы? Сообщите нам об этом.

Создание основных ресурсов в Azure

Создание ресурса Служба Azure SignalR

Приложение получит доступ к Служба Azure SignalR экземпляру. Выполните следующие действия, чтобы создать экземпляр Служба Azure SignalR с помощью портал Azure:

1. В портал Azure нажмите кнопку "Создать ресурс" (+).

2. Выполните поиск по строке служба SignalR и выберите эту службу.

3. Нажмите кнопку создания.

4. Введите следующую информацию.

   Имя.	Значение
   Группа ресурсов	Создайте новую группу ресурсов с уникальным именем.
   Имя ресурса	Введите уникальное имя для экземпляра Служба Azure SignalR.
   Регион	Выберите ближайший регион.
   Ценовая категория	Выберите Бесплатно.
   Режим службы	Выберите Бессерверный.

5. Выберите Review + Create (Просмотреть и создать).

6. Нажмите кнопку создания.

Возникли проблемы? Сообщите нам об этом.

Создание приложения-функции Azure и учетной записи хранения Azure

1. На домашней странице в портал Azure выберите "Создать ресурс" (+).

2. Найдите приложение-функцию и выберите его.

3. Нажмите кнопку создания.

4. Введите следующую информацию.

   Имя.	Значение
   Группа ресурсов	Используйте ту же группу ресурсов с экземпляром Служба Azure SignalR.
   Имя приложения-функции	Введите уникальное имя приложения-функции.
   Стек среды выполнения	Выберите Node.js.
   Регион	Выберите ближайший регион.

5. По умолчанию новая учетная запись хранения Azure создается в той же группе ресурсов вместе с приложением-функцией. Если вы хотите использовать другую учетную запись хранения в приложении-функции, перейдите на вкладку "Размещение ", чтобы выбрать учетную запись.

6. Выберите Просмотр и создание, а затем нажмите кнопку Создать.

Создание проекта Функции Azure локально

Инициализация приложения-функции

1. В командной строке создайте корневую папку для проекта и перейдите в папку.

2. Выполните следующую команду в терминале, чтобы создать проект функций JavaScript:

Модель версии 4

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

Модель версии 3

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

По умолчанию созданный проект включает host.json-файл , содержащий пакеты расширений, которые включают расширение SignalR. Дополнительные сведения о пакетах расширений см. в разделе "Регистрация Функции Azure расширений привязки".

Настройка параметров приложения

При локальном запуске и отладке среды выполнения Функции Azure приложение-функция считывает параметры приложения из local.settings.json. Обновите этот файл с помощью строка подключения экземпляра Служба Azure SignalR и созданной ранее учетной записи хранения.

Замените содержимое local.settings.json следующим кодом:

{
  "IsEncrypted": false,
  "Values": {
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "AzureWebJobsStorage": "<your-storage-account-connection-string>",
    "AzureSignalRConnectionString": "<your-Azure-SignalR-connection-string>"
  }
}

В предыдущем коде:

• Введите Служба Azure SignalR строка подключения в AzureSignalRConnectionString параметр.

  Чтобы получить строку, перейдите к экземпляру Служба Azure SignalR в портал Azure. В разделе Параметры найдите параметр "Ключи". Нажмите кнопку "Копировать" справа от строка подключения, чтобы скопировать ее в буфер обмена. Вы можете использовать основной или вторичный строка подключения.

• Введите строка подключения учетной записи хранения в AzureWebJobsStorage параметр.

  Чтобы получить строку, перейдите в учетную запись хранения в портал Azure. В разделе Безопасность и сеть найдите параметр Ключи доступа. Нажмите кнопку "Копировать" справа от строка подключения, чтобы скопировать ее в буфер обмена. Вы можете использовать основной или вторичный строка подключения.

Возникли проблемы? Сообщите нам об этом.

Создание функции для проверки подлинности пользователей в Служба Azure SignalR

При первом открытии приложения чата в браузере оно запросит допустимые учетные данные для подключения к службе Azure SignalR. Создайте функцию триггера HTTP с именем negotiate в приложении-функции, чтобы вернуть эти сведения о подключении.

Примечание.

Эта функция должна быть названа negotiate , так как для клиента SignalR требуется конечная точка, которая заканчивается /negotiate.

Модель версии 4

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],
   });
   

   Функция содержит привязку триггера HTTP для получения запросов от клиентов SignalR. Функция также содержит входную привязку SignalR для создания допустимых учетных данных для клиента для подключения к Служба Azure SignalR концентратору с именем default.

   Эта функция принимает сведения о подключении SignalR из входной привязки и возвращает его клиенту в тексте ответа HTTP.

   В привязке для локальной разработки signalRConnectionInfo нет userId свойства. Позже вы добавите его, чтобы задать имя пользователя подключения SignalR при развертывании приложения-функции в Azure.

Модель версии 3

1. В корневой папке проекта создайте negotiate функцию из встроенного шаблона с помощью следующей команды:

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

2. Откройте согласование или function.json для просмотра конфигурации привязки функции.

   Функция содержит привязку триггера HTTP для получения запросов от клиентов SignalR. Функция также содержит входную привязку SignalR для создания допустимых учетных данных для клиента для подключения к Служба Azure SignalR концентратору с именем default.

   {
     "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 свойства. Позже вы добавите его, чтобы задать имя пользователя подключения SignalR при развертывании приложения-функции в Azure.

3. Закройте файл переговоров или function.json.

4. Откройте переговоры или index.js , чтобы просмотреть текст функции:

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

   Эта функция принимает сведения о подключении SignalR из входной привязки и возвращает их клиенту в тексте ответа HTTP. Клиент SignalR использует эти сведения для подключения к экземпляру Служба Azure SignalR.

Возникли проблемы? Сообщите нам об этом.

Создание функции для отправки сообщений чата

Также этому веб-приложению нужен API-интерфейс HTTP для отправки сообщений чата. Создайте функцию триггера HTTP, которая отправляет сообщения всем подключенным клиентам, используюющим Служба Azure SignalR:

Модель версии 4

1. В корневой папке проекта создайте функцию триггера HTTP с именем sendMessage из шаблона с помощью следующей команды:

   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. Он вызывает функцию с именем newMessage на каждом клиенте.

   Функция может считывать удостоверение отправителя и принимать recipient значение в тексте сообщения, чтобы вы могли отправлять сообщение в частном порядке одному пользователю. Эти функции будут использоваться далее в руководстве.

3. Сохраните файл.

Модель версии 3

1. В корневой папке проекта создайте функцию триггера HTTP с именем sendMessage из шаблона с помощью следующей команды:

   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"
       }
     ]
   }
   

   Предыдущий код вносит два изменения в исходный файл:

   • Он изменяет маршрут messages на и ограничивает триггер HTTP методом POST HTTP.
   • Он добавляет Служба Azure SignalR выходную привязку, которая отправляет сообщение, возвращаемое функцией всем клиентам, подключенным к Служба Azure SignalR концентраторуdefault.

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. Он вызывает функцию с именем newMessage на каждом клиенте.

   Функция может считывать удостоверение отправителя и принимать recipient значение в тексте сообщения, чтобы вы могли отправлять сообщение в частном порядке одному пользователю. Эти функции будут использоваться далее в руководстве.

4. Сохраните файл.

Возникли проблемы? Сообщите нам об этом.

Размещение веб-интерфейса клиента чата

Пользовательский интерфейс приложения чата — это простое одностраничное приложение (SPA), созданное с помощью платформы JavaScript Vue, с помощью клиента JavaScript ASP.NET Core SignalR. Для простоты приложение-функция размещает веб-страницу. В рабочей среде можно использовать Статические веб-приложения для размещения веб-страницы.

Модель версии 4

1. Создайте файл с именем index.html в корневом каталоге проекта функции.

2. Скопируйте и вставьте содержимое index.html в файл. Сохраните файл.

3. В корневой папке проекта создайте функцию триггера HTTP с именем index из шаблона с помощью следующей команды:

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

   Функция считывает статическую веб-страницу и возвращает ее пользователю.

5. Тестирование приложения локально. Запустите приложение-функцию с помощью следующей команды:

   func start
   

6. Откройте http://localhost:7071/api/index веб-браузер. Должна появиться веб-страница чата.

   

7. Введите сообщение в поле чата.

   Выбрав клавишу ВВОД, на веб-странице появится сообщение. Так как имя пользователя клиента SignalR не задано, вы отправляете все сообщения анонимно.

Модель версии 3

1. Создайте папку с именем содержимого в корневом каталоге проекта функции.

2. В папке содержимого создайте файл с именем index.html.

3. Скопируйте и вставьте содержимое index.html в файл. Сохраните файл.

4. В корневой папке проекта создайте функцию триггера HTTP с именем index из шаблона с помощью следующей команды:

   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",
       },
     };
   };
   

   Функция считывает статическую веб-страницу и возвращает ее пользователю.

6. Откройте индекс/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. Откройте http://localhost:7071/api/index веб-браузер. Должна появиться веб-страница чата.

   

9. Введите сообщение в поле чата.

   Выбрав клавишу ВВОД, на веб-странице появится сообщение. Так как имя пользователя клиента SignalR не задано, вы отправляете все сообщения анонимно.

Возникли проблемы? Сообщите нам об этом.

Развертывание в Azure и включение аутентификации

Вы работали с приложением-функцией и приложением чата локально. Теперь разверните их в Azure и включите проверку подлинности и частные сообщения.

Настройка приложения-функции для проверки подлинности

Сейчас приложение чата работает анонимно. В Azure вы будете использовать проверку подлинности Служба приложений для проверки подлинности пользователя. Идентификатор пользователя или имя пользователя, прошедшего проверку подлинности, передается SignalRConnectionInfo в привязку для создания сведений о подключении, прошедших проверку подлинности от имени пользователя.

Модель версии 4

1. Откройте файл src/functions/negotiate.js .

2. userId Вставьте свойство в привязку inputSignalR со значением{headers.x-ms-client-principal-name}. Это значение является выражением привязки, которое задает имя пользователя клиента SignalR именем пользователя, прошедшего проверку подлинности. Теперь привязка должна выглядеть следующим образом:

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

3. Сохраните файл.

Модель версии 3

1. Откройте переговоры или function.json.

2. userId Вставьте свойство в привязку SignalRConnectionInfo со значением{headers.x-ms-client-principal-name}. Это значение является выражением привязки, которое задает имя пользователя клиента SignalR именем пользователя, прошедшего проверку подлинности. Теперь привязка должна выглядеть следующим образом:

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

3. Сохраните файл.

Развертывание приложения-функции в Azure

Разверните приложение-функцию в Azure с помощью следующей команды:

func azure functionapp publish <your-function-app-name> --publish-local-settings

Параметр --publish-local-settings публикует локальные параметры из файла local.settings.json в Azure, поэтому вам не нужно снова настраивать их в Azure.

Включение аутентификации в Службе приложений

Функции Azure поддерживает проверку подлинности с помощью идентификатора Microsoft Entra, Facebook, Twitter, учетной записи Майкрософт и Google. Вы будете использовать Корпорацию Майкрософт в качестве поставщика удостоверений для этого руководства.

1. В портал Azure перейдите на страницу ресурсов приложения-функции.

2. Выберите Параметры> Authentication.

3. Выберите Добавить поставщик удостоверений.

   

4. В списке поставщиков удостоверений выберите Майкрософт. Нажмите кнопку Добавить.

   

Завершенные параметры создают регистрацию приложения, которая связывает поставщика удостоверений с приложением-функцией.

Дополнительные сведения о поддерживаемых поставщиках удостоверений см. в следующих статьях:

• Microsoft Entra ID
• Facebook
• Twitter
• Учетная запись Майкрософт
• Google

Проверка работы приложения

1. Открыть https://<YOUR-FUNCTION-APP-NAME>.azurewebsites.net/api/index.
2. Выберите Вход, чтобы выполнить аутентификацию с помощью выбранного поставщика проверки подлинности.
3. Отправьте общедоступные сообщения, введя их в поле главного чата.
4. Отправьте частные сообщения, выбрав имя пользователя в журнале чата. Только выбранный получатель получает эти сообщения.

Поздравляем! Вы развернули приложение чата без сервера в режиме реального времени.

Возникли проблемы? Сообщите нам об этом.

Очистка ресурсов

Чтобы очистить ресурсы, созданные в этом руководстве, удалите группу ресурсов с помощью портал Azure.

Внимание

При удалении группы ресурсов удаляются все содержащиеся в ней ресурсы. Если группа ресурсов содержит ресурсы за пределами область этого руководства, они также удаляются.

Возникли проблемы? Сообщите нам об этом.

Следующие шаги

Из этого руководства вы узнали, как использовать Функции Azure со службой Azure SignalR. Дополнительные сведения о создании бессерверных приложений в режиме реального времени с привязками Служба Azure SignalR для Функции Azure:

Приложения в режиме реального времени с Служба Azure SignalR и Функции Azure

Возникли проблемы? Сообщите нам об этом.