#27: Видеоконференция с ACS и SWA

Добро пожаловать на неделю 4, день 6 из #30DaysOfSWA!!!

В одном из предыдущих примеров на этой неделе мы рассмотрели реальный пример с KlipTok, включающий интеграцию Azure Static Web Apps с несколькими внутренними службами для обеспечения желаемого пользовательского опыта. Сегодня мы рассмотрим еще один отличный пример сквозного рабочего процесса разработки, включающего интеграцию нескольких служб — на этот раз с упором на создание богатого опыта веб-приложения для видеоконференций. Давайте узнаем, как создать это приложение с помощью рабочего процесса, включающего Azure Static Web Apps, Azure Functions, Azure CosmosDB и Azure Communications Services (ACS).


Что мы рассмотрим

  • Что такое Azure Communications Services (ACS)?
  • Рабочий процесс аутентификации для видеоконференций
    • Статические веб-приложения Azure для социальной аутентификации
    • Azure CosmosDB для хранения идентификационной информации ACS
    • Функции Azure Functions для сопоставления социальной аутентификации с идентификацией ACS
  • Статическое веб-приложение — хостинг Metaverse? 🤯
  • Упражнение Разверните образец самостоятельно, следуя пошаговому руководству.

Об авторе

Дэвид Руссе (David Rousset) — старший менеджер программ в Microsoft, который в настоящее время занимается разработкой комплексных решений для разработчиков для таких продуктов, как Microsoft Teams, Azure Communication Services и Power Platform. Он является одним из создателей BabylonJS (популярного движка WebGL) и ранее возглавлял проект PWABuilder с открытым исходным кодом в Microsoft. Следите за ним @davrous и читайте о его приключениях в его блоге.


Что такое Azure Communications Services (ACS)?

Azure Communication Services (ACS) — это набор богатых API-интерфейсов связи, видео и SMS для развертывания ваших приложений на любом устройстве, на любой платформе. Если вы хотите включить электронную почту, чат, аудио/видеоконференции, телефонные звонки или SMS в существующее приложение, эта служба вам подойдет. Вы можете рассматривать ее как строительные блоки для создания собственной пользовательской версии Microsoft Teams, в ней используется та же базовая инфраструктура. Эта платформа CPaaS (Communications Platform As A Service) будет управлять масштабируемостью, качеством и доступностью этой услуги для вас. Эта платформа также построена на базе нашего безопасного и совместимого облака.

Посмотрите это короткое видео для быстрого введения 👇🏼.

Разумеется, эти услуги имеют свою цену. Стоимость каждой услуги можно узнать, посетив раздел Azure Communication Services pricing | Microsoft Azure.

ACS предоставляет свои услуги через различные SDK: Azure Communication Services — Samples and Tools, доступные для разработчиков JavaScript, .NET, Java, Android, iOS & Python.

Вы также можете использовать их поверх библиотеки ACS UI: Обзор — Страница ⋅ Storybook, которая состоит из компонентов на основе React, реализующих Microsoft Fluent Design, чтобы помочь вам создавать визуально привлекательные веб-приложения. Лучшим образцом, смешивающим все эти концепции, является образец Group calling hero — Обзор образца Azure Communication Services.

Чтобы дать вам краткое представление, посмотрите этот 2-минутный видеоурок, в котором показано, как получить внутренний токен аутентификации ACS для подключения к ее инфраструктуре. Затем я могу присоединиться к существующему собранию Teams с помощью простой веб-страницы и ACS JavaScript SDK:

Хотите следовать этому примеру дома? Вам просто нужно:

  • Создать ресурс Azure Communication Services в вашем Azure Portal.
    • Перейдите на https://aka.ms/acsquicktest и следуйте приведенному выше видеоуроку.

Вы обнаружите, что по умолчанию Azure Communication Services обеспечивает базовую аутентификацию & уровень идентификации. Но вам нужно построить его поверх, чтобы подключить собственную платформу идентификации. Давайте посмотрим, как это сделать!

Создание уровня аутентификации с помощью Azure Function, CosmosDB и Static Web App

1. Azure Static Web Apps — социальная аутентификация

Оказалось, что SWA обеспечивает потрясающую аутентификацию из коробки. Чтобы узнать об этом больше, пожалуйста, прочтите: Аутентификация и авторизация для Azure Static Web Apps. За считанные секунды, без необходимости написания дополнительного кода, вам будет предоставлен уровень аутентификации!

Мы будем использовать его в качестве фронт-энда для приветствия и аутентификации наших пользователей.

2. Функции Azure Functions — сопоставление с идентификатором ACS

Затем с помощью функции Azure Function мы сопоставим идентификатор социального аккаунта с внутренним идентификатором ACS. Функция Azure Function будет хранить сопоставление в небольшой таблице CosmosDB. Вот последовательность действий.

Сначала вы попадете на страницу, где вам будет предложено выбрать своего любимого социального провайдера:

Затем, после аутентификации, вы будете напрямую подключены к инфраструктуре Azure Communication Services. Не нужно генерировать токен или что-то еще, об этом позаботится функция Azure Function. Для примера на этом снимке экрана я использовал свою учетную запись Twitter:

Вы видите, что пользовательский интерфейс показывает, как мой аккаунт Twitter, davrous@twitter, сопоставлен с внутренним идентификатором пользователя ACS 8:acs:4ba98fcc… который вы обычно не должны предоставлять пользователям, конечно 😉.

Благодаря этому вы можете немедленно позвонить друзьям и коллегам или присоединиться к встрече Teams, просто используя в качестве адреса для звонка адрес электронной почты их социальной учетной записи.

3. Azure Functions + привязка CosmosDB

Давайте посмотрим на код Azure Function, позволяющий реализовать этот сценарий. Во-первых, в файле function.json видно, что я использую функцию привязки CosmosDB. Чтобы узнать больше об этой функции:

  • Azure Cosmos DB input binding for Functions 2.x и выше
  • Привязка вывода Azure Cosmos DB для Functions 2.x и выше

В двух словах, с помощью простого объявления в файле function.json вы получаете простой уровень доступа к данным, доступный в коде Azure Function бесплатно.

Если вы посмотрите на мой json-файл, я определяю маршрут users/{email}/{lookup:bool?}, который будет открыт для двух функций в моей Azure Function: setUser в качестве выходной привязки (для записи или обновления в CosmosDB) и getUser в качестве входной привязки (для чтения из CosmosDB).

В этом файле декларации я также прошу Azure Function использовать базу данных CosmosDB под названием «ACS» с таблицей под названием «users», используя параметр «email» в качестве ключа раздела.

Функция getUser будет вызвана с первым обязательным параметром, который является адресом электронной почты, связанным с внутренней идентификацией ACS. Он имеет второй необязательный параметр, который представляет собой булево значение. Это просит функцию Azure Function выполнить простой запрос resolve, чтобы вернуть внутренний идентификатор ACS, связанный с адресом электронной почты. Это полезно, когда вы хотите вызвать кого-то на ACS, просто указав его адрес электронной почты, а не вынуждены знать его внутренний идентификатор ACS (начинающийся с 8:acs:xxx).

setUser просто создает новую запись или обновляет ее.

Полный исходный код Azure Function можно найти здесь: acsauth/index.ts на main — davrous/acsauth (github.com).

Первый блок просто выполняет логику разрешения, о которой я упоминал чуть раньше. Второй блок сначала проверяет, был ли пользователь уже создан в таблице CosmosDB и действителен ли токен ACS. Действительно, ACS-токены действительны только в течение 24 часов. Если пользователя не существует или срок действия его токена истек, мы используем ACS JavaScript SDK для создания новой идентификации & токена аутентификации, чтобы сопоставить его с адресом электронной почты.

Если вас интересуют концепции идентификации ACS, пожалуйста, прочитайте:

  • Модель идентификации — концепция Azure Communication Services
  • Быстрый старт — Создание и управление маркерами доступа — быстрый старт Azure Communication Services

4. CosmosDB — хранит идентификационные данные ACS

Теперь давайте посмотрим, что хранится в таблице CosmosDB благодаря Azure Portal:

Вы можете найти всю необходимую информацию для моего сценария:

  • id: адрес электронной почты, полученный из социальной сети, который является моим ключом раздела и первичным ключом для моих запросов
  • userId: связанная внутренняя идентификация ACS в форме 8:acs:xxxx.
  • userToken: ассоциированный внутренний токен аутентификации ACS, необходимый для подключения к инфраструктуре ACS.
  • expiresOn: когда истечет срок действия маркера аутентификации ACS.

Прелесть функции привязки Azure Function заключается в том, что мне не пришлось писать никакого кода для управления чтением или записью записей. Она даже может обновить существующую запись, если это необходимо.

С помощью нескольких строк кода я смог создать небольшой уровень аутентификации поверх ACS для создания пользователей, сопоставленных с внутренней идентификацией ACS. Благодаря возможности аутентификации с помощью Static Web App мне даже не пришлось писать код для аутентификации пользователей с помощью их социальной идентификации!


Статическое веб-приложение, размещающее Metaverse? 🤯

В том же примере я создал на основе архитектуры, описанной выше, небольшую метаверсию, используя Babylon.js, движок WebGL с открытым исходным кодом, в разработку которого я принимал участие. Логика идентична той, что я описывал до сих пор.

Благодаря SWA я проверяю подлинность пользователя, используя его социальный профиль. Но затем я могу сделать видеозвонок другому пользователю ACS или кому-то в Teams из 3D-сцены. А внутри 3D-сцены все намного круче, верно?

Но подождите, есть еще лучше. Вы можете увидеть эту сцену Babylon.js в VR благодаря встроенной поддержке WebXR! Чтобы дать вам представление, вот видео, где я использую свой Valve Index, чтобы позвонить своей подруге в Teams, чтобы мы могли вместе посетить этот музей.

Если вы заинтересовались WebXR, я написал целую статью о том, что можно построить с его помощью, в которой поделился многими своими примерами: От игр до метаверсий, создание WebXR-приложений с Babylon.js — Дэвид Руссе (davrous.com).


Упражнение

Если вы хотите поиграть и поучиться на этом примере смешивания ACS, SWA, Azure Function, CosmosDB и Babylon.js, вы можете развернуть его менее чем за 10 минут, следуя пошаговому руководству, доступному в этом связанном репозитории: davrous/acsauth: Разверните менее чем за 10 минут образец Azure Communication Services для совместного использования и тестирования с коллегами и друзьями.

Наслаждайтесь и до встречи в метавселенной! 😊

Оцените статью
Procodings.ru
Добавить комментарий