Get started
Language / Region
© 2022 Yandex.Cloud LLC
Yandex Cloud Functions

Developing a skill for Alice and a website with authorization

Written by
,
improved by

In this scenario, you'll develop a skill for Alice and deploy a web app for creating, reading and editing to-do lists with Alice's help, as well as for sharing the lists with other users on the website.

To deploy a project:

  1. Prepare the environment
  2. Create resources
  3. Set the project variables
  4. Deploy the project
  5. Register Alice's skill
  6. Test Alice's skill

Prepare the environment

  1. Download the archive with project files or clone the examples repository using Git.

  2. Create a folder if you don't have any. For convenience, you can use a separate folder named alice-skill.

  3. Install and initialize the following software programs:

  4. To finalize the project, you'll additionally need:

Create resources

  1. Create a bucket named frontend-statics in Object Storage.

  2. Create an API gateway named gate-1. Save the ID and Service domain field values from the General information section to use them in the configuration.

  3. Create a database in Serverless mode. Save the Database and Endpoint field values from the YDB endpoint section to use them in the configuration.

  4. Create an app in Yandex.OAuth:

    1. Go to the service website and log in.

    2. Click Create new client:

    3. Select the desired name for the client app and upload an icon.

    4. Under Platforms, select Web services. Specify two Callback URIs:

      • https://social.yandex.net/broker/redirect.
      • https://<API gateway service domain>/receive-token.

      Please note that the specified receive-token URL may be unavailable until the current specification is uploaded to the API gateway. The specification will be uploaded during the project's deployment.

    5. Under Permissions, expand Yandex ID API (login) and select Access to user avatar (login:avatar).

    For more information about the Yandex.OAuth features, see the documentation.

Set the project variables

Configure the project using the values you got when creating your resources.

Create a variables.json file

The variables.json file contains the project deployment configuration. To create a file from the variables-template.json template, go to the project folder and run the command:

cp variables-template.json variables.json

Set the project parameters in the variables.json file:

  • folder-id: ID of the cloud folder.
  • domain: API gateway service domain.
  • oauth-client-id: ID of the client app registered in Yandex.OAuth.
  • database: DB from the Managed Service for YDB configuration.
  • database-endpoint: Endpoint from the Managed Service for YDB configuration.
  • yc-profile: Yandex Cloud CLI profile name.
  • secure-config-path: Path to the secret file.
  • storage-bucket: Name of the bucket you created for storing static data, frontend-statics.
  • gateway-id: ID of the API gateway.

Create a secure-config.json file

The secure-config.json file contains secrets. You can create it from the secure-config-template.json template. To do this, run the command:

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

Substitute the values from the variables:

  • oauth_secret: Password of the client app registered in Yandex.OAuth.
  • hash: A random 64-byte string that is base64 encoded, such as qrJagO5NVwOj0FeTmgYSwUN+XXkiQJMWifvrklF53wT55q80Xk8vmEB3kxhtpDnA1WDC893Z9Bh6QcqKLbAUWQ==.
  • block: A random 32-byte string that is base64 encoded, such as uwk0duFgn2nYyfu2VzJe+MnWKWQrfKaiZijIzGZ8fqQ=.

You can generate random values at generate.plus.

Make sure the variables.json file contains the correct path to secure-config.json.

Deploy the project

Transfer the project files to Yandex Cloud and update the configuration.

Apply a data schema

To create tables in the database, run the command:

./upload_ydb_schema.sh

Upload the backend code to Cloud Functions

Use Terraform to automate your operations. Before you start, initialize it.

To do this, go to the folder with the app.tf config file and run the command:

terraform init

Once Terraform is initialized, run the command passing the OAuth token value to be used for authorization in Yandex Cloud:

terraform apply -var-file ./variables.json -var yc-token=<OAuth token>

As a result, Terraform automatically creates or updates the required resources.

Upload the frontend code to Object Storage

To deploy the frontend web app, compile static files and upload them to Object Storage.

  1. Before doing that, make sure you have Node.js and the npm package manager installed.

  2. Go to the frontend subfolder and perform the compilation:

    npm run build

    Execution result:

    $ 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. To upload the files to Object Storage, run the command:

    ./upload_static.sh

    Execution result:

    $ ./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

Update the API gateway configuration

To upload the current specification to API Gateway, run the command:

./update_gateway.sh

Execution result:

done (2s)
id: d5dc6k34opmskp7ela3d
folder_id: b1guj13dic1461knkpbw
created_at: "2021-06-03T11:18:00.379Z"
name: gate-1
status: ACTIVE
domain: d5dc6k87opmskp7elb3q.apigw.yandexcloud.net
log_group_id: ckg57bweoekkrkddsknd

Register Alice's skill

Create a dialog

  1. Go to the Yandex.Dialogs website and log in to the console.
  2. Click Create dialog and select the Alice skill dialog type.
  3. In the Skill name field, set To-do lists.
  4. Under Backend, select Yandex Cloud function and choose the todo-list-alice function that you previously created in Yandex Cloud Functions from the list.
  5. Enable Use data storage in the skill.

Set the other parameters as you wish. For example, you can specify different word forms to activate the skill and choose a voice or skill access type.
Learn more in the Yandex.Dialogs documentation.

Configure authorization on the Alice page

  1. Go to the Main settings tab and find the Account linking section.
  2. In the Authorization line, click Create.
  3. Enter the following:
    • ID and Application secret: The ID and password you got when you registered the app on the Yandex.OAuth website.
    • Authorization URL: https://oauth.yandex.ru/authorize.
    • Get token URL: https://oauth.yandex.ru/token.
    • Refresh token URL: https://oauth.yandex.ru/token.

For more information about OAuth 2.0, see RFC 6749.

Add intents

  1. Go to the Intents tab and click Create.
  2. Add intents for each action that is possible in the dialog. The available intents are in the project's intents subfolder.
  3. Enter the following:
    • Name: Any name that you want to be displayed in the interface.
    • ID: Intent ID that is the same as the filename in the intents folder.
    • Grammar: Grammar text that is the same as the contents of the file in the intents folder.

For more information about intents, see the documentation for Alice's skills.

To complete the dialog creation, click Publish on the right of the page.

Test the skill

To debug the skill, use the Testing tab in the Yandex.Dialogs console or one of the surfaces you selected when designing the skill.

In the console

Go to the Testing tab. You'll see a chat with Alice on the left and an interaction protocol in JSON format on the right.

Below is a sample dialog:

Let me help you with your lists!

	Hi Alice, Create a Grocery list.

Done, I've created the "grocery" list.

	Add milk to the Grocery.

Done, I've added "milk" to the "grocery".

	Add bread.

What list should I add "bread" to?

	Grocery.

Done, I've added "bread" to the "grocery".

	Add eggs.

What list should I add "eggs" to?

	Grocery.

Done, I've added "eggs" to the "grocery".

	Alice, tell me what's on the Grocery list.

Grocery:
1. Milk.
2. Bread.
3. Eggs.

Using a surface

To start a dialog, use any device or service supported by Alice.

On the website

In your browser, follow the URL specified in the Service domain field of your API gateway and log in. The "My lists" page opens. In any of the lists, you can add or remove items and grant other users access to the list.

Language / Region
© 2022 Yandex.Cloud LLC
In this article: