Связаться с намиПодключиться

Разработка навыка Алисы и сайта с авторизацией

Статья создана
Улучшена
Обновлена 27 марта 2025 г.

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

Смотреть видео на YouTube.

Чтобы развернуть проект:

  1. Подготовьте окружение.
  2. Создайте ресурсы.
  3. Задайте переменные проекта.
  4. Разверните проект.
  5. Зарегистрируйте навык Алисы.
  6. Проверьте работу навыка.

Подготовьте окружение

  1. Скачайте архив с файлами проекта или клонируйте репозиторий yc-alice-shareable-todolist с помощью Git.
  2. Создайте каталог, если его еще нет. Для удобства можно использовать отдельный каталог с именем alice-skill.
  3. Установите и инициализируйте следующие программы:
  4. Для доработки проекта дополнительно потребуются:

Создайте ресурсы

  1. Создайте бакет с ограниченным доступом в Yandex Object Storage.

  2. Создайте API-шлюз с именем gate-1. Для использования в конфигурации сохраните поля Идентификатор и Служебный домен.

  3. Создайте базу данных в режиме Serverless. Сохраните значение поля Эндпоинт из раздела Соединение. Оно понадобится при конфигурации проекта.

  4. Создайте приложение в Яндекс OAuth:

    1. Перейдите на сайт сервиса и авторизуйтесь.

    2. Нажмите кнопку Зарегистрировать новое приложение.

    3. Выберите подходящее имя приложения и загрузите иконку.

    4. В разделе Платформы отметьте пункт Веб-сервисы. Укажите два Callback URI:

      • https://social.yandex.net/broker/redirect.
      • https://<служебный_домен_API-шлюза>/receive-token.

      Обратите внимание, что указанный URL receive-token может быть недоступен до момента загрузки актуальной спецификации в API-шлюз. Спецификация будет загружена во время развертывания проекта.

    5. В разделе Доступы разверните API Яндекс ID (login) и отметьте пункт Доступ к портрету пользователя (login:avatar).

    Подробнее о возможностях сервиса Яндекс OAuth читайте в документации.

Задайте переменные проекта

Сконфигурируйте проект с помощью значений, которые получили при создании ресурсов.

Создайте файл variables.json

Файл variables.json содержит конфигурацию для развертывания проекта. Чтобы создать файл из шаблона variables-template.json, перейдите в каталог проекта и выполните команду:

cp variables-template.json variables.json

Задайте параметры проекта в файле variables.json:

  • folder-id — идентификатор каталога в облаке.
  • domain — служебный домен API-шлюза.
  • oauth-client-id — идентификатор приложения, зарегистрированного в Яндекс OAuth.
  • database-endpoint — эндпоинт: первая часть сохраненного ранее значения поля Эндпоинт (часть до вхождения /?database=). Например, grpcs://ydb.serverless.yandexcloud.net:2135.
  • database — размещение базы данных: вторая часть сохраненного ранее значения поля Эндпоинт (часть после вхождения /?database=). Например, /ru-central1/r1gra875baom********/g5n22e7ejfr1********.
  • yc-profile — название профиля Yandex Cloud CLI.
  • secure-config-path — путь к файлу секретов.
  • storage-bucket — имя созданного бакета для хранения статических данных.
  • gateway-id — идентификатор API-шлюза.

Создайте файл secure-config.json

Файл secure-config.json содержит секреты. Вы можете создать файл из шаблона secure-config-template.json. Для этого выполните команду:

cp secure-config-template.json secure-config.json

Подставьте значения переменных:

  • oauth_secret — пароль приложения, зарегистрированного в Яндекс OAuth.
  • hash — случайная строка длиной 64 байта, закодированная с помощью base64, например qrJagO5NVwOj0FeTmgYSwUN+XXkiQJMWifvrklF53wT55q80Xk8vmEB3kxhtpDnA1WDC893Z9Bh6QcqK********. Сгенерировать случайное значение можно в терминале с помощью команды openssl rand -base64 64 | tr -d '\n'.
  • block — случайная строка длиной 32 байта, закодированная с помощью base64, например uwk0duFgn2nYyfu2VzJe+MnWKWQrfKaiZijI********. Сгенерировать случайное значение можно в терминале с помощью команды openssl rand -base64 32 | tr -d '\n'.

Убедитесь, что в файле variables.json указан правильный путь к secure-config.json.

Разверните проект

Перенесите файлы проекта в Yandex Cloud и обновите конфигурацию.

Примените схему данных

Чтобы создать таблицы в базе данных, выполните команду:

./upload_ydb_schema.sh

Загрузите код бэкенда в Cloud Functions

Используйте Terraform для автоматизации действий. Перед использованием проинициализируйте его.

Для этого в папке с конфигурационным файлом app.tf выполните команду:

terraform init

После успешной инициализации выполните команду, передав значение OAuth-токена для авторизации в Yandex Cloud:

terraform apply -var-file ./variables.json -var yc-token=<OAuth-токен>

Terraform автоматически создаст или обновит требуемые ресурсы.

Загрузите код фронтенда в Object Storage

Чтобы развернуть веб-приложение фронтенда, скомпилируйте статические файлы и загрузите их в Object Storage.

  1. Перед компиляцией статических файлов убедитесь, что установлен Node.js и пакетный менеджер npm.

  2. Перейдите в подкаталог frontend и выполните компиляцию:

    npm run build

    Результат:

    npm run build

> todolist@0.1.0 build
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  75.93 KB  build/static/js/2.84be0fca.chunk.js
  23.26 KB  build/static/css/2.ef9168ec.chunk.css
  2.63 KB   build/static/js/main.d9e069c9.chunk.js
  776 B     build/static/js/runtime-main.676997b0.js
  402 B     build/static/css/main.e5cbab88.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

  3. Чтобы загрузить файлы в Object Storage, выполните команду:

    ./upload_static.sh

    Результат:

    ./upload_static.sh
upload: frontend/build/robots.txt to s3://frontent-statics/robots.txt
upload: frontend/build/manifest.json to s3://frontent-statics/manifest.json
upload: frontend/build/static/css/main.e5cbab88.chunk.css.map to s3://frontent-statics/static/css/main.e5cbab88.chunk.css.map
upload: frontend/build/index.html to s3://frontent-statics/index.html
upload: frontend/build/asset-manifest.json to s3://frontent-statics/asset-manifest.json
upload: frontend/build/static/js/2.84be0fca.chunk.js.LICENSE.txt to s3://frontent-statics/static/js/2.84be0fca.chunk.js.LICENSE.txt
upload: frontend/build/static/css/main.e5cbab88.chunk.css to s3://frontent-statics/static/css/main.e5cbab88.chunk.css
upload: frontend/build/static/js/main.d9e069c9.chunk.js to s3://frontent-statics/static/js/main.d9e069c9.chunk.js
upload: frontend/build/static/js/2.84be0fca.chunk.js to s3://frontent-statics/static/js/2.84be0fca.chunk.js
upload: frontend/build/static/js/runtime-main.676997b0.js to s3://frontent-statics/static/js/runtime-main.676997b0.js
upload: frontend/build/static/js/runtime-main.676997b0.js.map to s3://frontent-statics/static/js/runtime-main.676997b0.js.map
upload: frontend/build/static/js/main.d9e069c9.chunk.js.map to s3://frontent-statics/static/js/main.d9e069c9.chunk.js.map
upload: frontend/build/static/css/2.ef9168ec.chunk.css to s3://frontent-statics/static/css/2.ef9168ec.chunk.css
upload: frontend/build/static/css/2.ef9168ec.chunk.css.map to s3://frontent-statics/static/css/2.ef9168ec.chunk.css.map
upload: frontend/build/static/js/2.84be0fca.chunk.js.map to s3://frontent-statics/static/js/2.84be0fca.chunk.js.map

Обновите конфигурацию API-шлюза

Чтобы загрузить актуальную спецификацию в API Gateway, выполните команду:

./update_gateway.sh

Результат:

done (2s)
id: d5dc6k34opm********
folder_id: b1guj13dic14********
created_at: "2021-06-03T11:18:00.379Z"
name: gate-1
status: ACTIVE
domain: d5dm1lba80md********.i9******.apigw.yandexcloud.net
log_group_id: ckg57bweoekk********

Зарегистрируйте навык Алисы

Создайте диалог

  1. Перейдите на сайт Яндекс Диалоги и авторизуйтесь в консоли.
  2. Нажмите кнопку Создать диалог и выберите тип диалога — Навык в Алисе.
  3. В поле Имя навыка задайте Списки дел.
  4. В пункте Backend отметьте опцию Функция в Yandex Cloud и выберите из списка функцию todo-list-alice, которую вы ранее создали в сервисе Cloud Functions.
  5. Включите опцию Использовать хранилище данных в навыке.

Остальные параметры задайте по своим предпочтениям. Например, вы можете задать разные словоформы для активации навыка, выбрать голос или тип доступа к навыку.

Подробнее в документации сервиса Яндекс Диалоги.

Настройте авторизацию в Алисе

  1. На вкладке Главные настройки найдите раздел Связка аккаунтов.
  2. В строке Авторизация нажмите кнопку Создать.
  3. Введите:
    • Идентификатор и Секрет приложения — ID и пароль, которые вы получили при регистрации приложения на сайте Яндекс OAuth.
    • URL авторизации — https://oauth.yandex.ru/authorize.
    • URL для получения токена — https://oauth.yandex.ru/token.
    • URL для обновления токена — https://oauth.yandex.ru/token.

Подробнее о протоколе OAuth 2.0 читайте в RFC 6749.

Добавьте интенты

  1. Перейдите на вкладку Интенты и нажмите кнопку Создать.
  2. Добавьте интенты для каждого действия, возможного в диалоге. Разработанные интенты находятся в подкаталоге intents проекта.
  3. Введите:
    • Название — Произвольное имя, которое будет отображаться в интерфейсе.
    • ID — Идентификатор интента, равный имени файла в каталоге intents.
    • Грамматика — Текст грамматики, равный содержимому файла в каталоге intents.

Подробнее об интентах в документации Навыков Алисы.

Чтобы завершить создание диалога, в правой части страницы нажмите кнопку Опубликовать.

Проверьте работу навыка

Для отладки навыка используйте вкладку Тестирование в консоли Яндекс Диалогов или одну из поверхностей, выбранных при проектировании навыка.

В консоли

Перейдите на вкладку Тестирование. В левой части отображается чат с Алисой, в правой — протокол взаимодействия в формате JSON.

Ниже приведен пример диалога:

Давайте я помогу вам со списками!

	Алиса, привет. Создай список Продукты

Готово, создала список "продукты"

	Добавь молоко в Продукты

Готово, добавила "молоко" в "продукты"

	Добавь хлеб

В какой список записать "хлеб"?

	Продукты

Готово, добавила "хлеб" в "продукты"

	Добавь яйца

В какой список записать "яйца"?

	Продукты

Готово, добавила "яйца" в "продукты"

	Алиса, перечисли список Продукты

продукты:
1. молоко
2. хлеб
3. яйца

На поверхности

Чтобы начать диалог, используйте любое поддерживаемое Алисой устройство или сервис.

На сайте

В браузере перейдите по адресу, который указан в поле Служебный домен вашего API-шлюза, и авторизуйтесь. Загрузится страница «Мои списки». При переходе в любой из списков можно добавить или удалить пункты, а также предоставить доступ к списку другим пользователям.

Предыдущая
Развертывание веб-приложения с использованием Java Servlet API
Следующая
Разработка Slack-бота