Разработка навыка Алисы и сайта с авторизацией
В этом сценарии вы разработаете навык Алисы и развернете веб-приложение, которое позволит создавать, читать и редактировать списки дел с помощью Алисы, а также делиться списками с другими пользователями на сайте.
Чтобы развернуть проект:
- Подготовьте окружение.
- Создайте ресурсы.
- Задайте переменные проекта.
- Разверните проект.
- Зарегистрируйте навык Алисы.
- Проверьте работу навыка.
Подготовьте окружение
- Скачайте архив
с файлами проекта или клонируйте репозиторий examples с помощью Git. - Создайте каталог, если его еще нет. Для удобства можно использовать отдельный каталог с именем
alice-skill
. - Установите и инициализируйте следующие программы:
- Для доработки проекта дополнительно потребуются:
- Язык программирования Go
. - Утилита go-swagger
. - Утилита api-spec-converter
.
- Язык программирования Go
Создайте ресурсы
-
Создайте бакет с ограниченным доступом в Yandex Object Storage.
-
Создайте API-шлюз с именем
gate-1
. Для использования в конфигурации сохраните поля Идентификатор и Служебный домен из раздела Общая информация. -
Создайте базу данных в режиме Serverless. Сохраните значение поля Эндпоинт из раздела Соединение. Оно понадобится при конфигурации проекта.
-
Создайте приложение
в Яндекс OAuth:-
Перейдите на сайт сервиса
и авторизуйтесь. -
Нажмите кнопку Зарегистрировать новое приложение.
-
Выберите подходящее имя приложения и загрузите иконку.
-
В разделе Платформы отметьте пункт Веб-сервисы. Укажите два Callback URI:
https://social.yandex.net/broker/redirect
.https://<служебный_домен_API-шлюза>/receive-token
.
Обратите внимание, что указанный URL
receive-token
может быть недоступен до момента загрузки актуальной спецификации в API-шлюз. Спецификация будет загружена во время развертывания проекта. -
В разделе Доступы разверните 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********
.block
— случайная строка длиной 32 байта, закодированная с помощью base64, напримерuwk0duFgn2nYyfu2VzJe+MnWKWQrfKaiZijI********
.
Сгенерировать случайные значения можно с помощью сайта generate.plus
Убедитесь, что в файле 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.
-
Перед компиляцией статических файлов убедитесь, что установлен Node.js и пакетный менеджер npm.
-
Перейдите в подкаталог
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
-
Чтобы загрузить файлы в 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: d5dc6k87opms********.apigw.yandexcloud.net
log_group_id: ckg57bweoekk********
Зарегистрируйте навык Алисы
Создайте диалог
- Перейдите на сайт Яндекс Диалоги
и авторизуйтесь в консоли. - Нажмите кнопку Создать диалог и выберите тип диалога — Навык в Алисе.
- В поле Имя навыка задайте Списки дел.
- В пункте Backend отметьте опцию Функция в Yandex Cloud и выберите из списка функцию
todo-list-alice
, которую вы ранее создали в сервисе Cloud Functions. - Включите опцию Использовать хранилище данных в навыке.
Остальные параметры задайте по своим предпочтениям. Например, вы можете задать разные словоформы для активации навыка, выбрать голос или тип доступа к навыку.
Подробнее в документации
Настройте авторизацию в Алисе
- На вкладке Главные настройки найдите раздел Связка аккаунтов.
- В строке Авторизация нажмите кнопку Создать.
- Введите:
- Идентификатор и Секрет приложения — ID и пароль, которые вы получили при регистрации приложения на сайте Яндекс OAuth
. - URL авторизации —
https://oauth.yandex.ru/authorize
. - URL для получения токена —
https://oauth.yandex.ru/token
. - URL для обновления токена —
https://oauth.yandex.ru/token
.
- Идентификатор и Секрет приложения — ID и пароль, которые вы получили при регистрации приложения на сайте Яндекс OAuth
Подробнее о протоколе OAuth 2.0 читайте в RFC 6749
Добавьте интенты
- Перейдите на вкладку Интенты и нажмите кнопку Создать.
- Добавьте интенты для каждого действия, возможного в диалоге. Разработанные интенты находятся в подкаталоге
intents
проекта. - Введите:
- Название — Произвольное имя, которое будет отображаться в интерфейсе.
- ID — Идентификатор интента, равный имени файла в каталоге
intents
. - Грамматика — Текст грамматики, равный содержимому файла в каталоге
intents
.
Подробнее об интентах в документации Навыков Алисы
Чтобы завершить создание диалога, в правой части страницы нажмите кнопку Опубликовать.
Проверьте работу навыка
Для отладки навыка используйте вкладку Тестирование в консоли Яндекс Диалогов
В консоли
Перейдите на вкладку Тестирование. В левой части отображается чат с Алисой, в правой — протокол взаимодействия в формате JSON.
Ниже приведен пример диалога:
Давайте я помогу вам со списками!
Алиса, привет. Создай список Продукты
Готово, создала список "продукты"
Добавь молоко в Продукты
Готово, добавила "молоко" в "продукты"
Добавь хлеб
В какой список записать "хлеб"?
Продукты
Готово, добавила "хлеб" в "продукты"
Добавь яйца
В какой список записать "яйца"?
Продукты
Готово, добавила "яйца" в "продукты"
Алиса, перечисли список Продукты
продукты:
1. молоко
2. хлеб
3. яйца
На поверхности
Чтобы начать диалог, используйте любое поддерживаемое Алисой
На сайте
В браузере перейдите по адресу, который указан в поле Служебный домен вашего API-шлюза, и авторизуйтесь. Загрузится страница «Мои списки». При переходе в любой из списков можно добавить или удалить пункты, а также предоставить доступ к списку другим пользователям.