Contact UsGet started

Developing a skill for Alice and a website with authorization

Written by
Improved by
Updated at November 18, 2024

In this scenario, you will 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 the skill.

Prepare the environment

  1. Download the archive with project files or clone the examples repository with Git.
  2. Create a folder if you do not have any. For convenience, you can use a separate folder named alice-skill.
  3. Install and initialize the following programs:
  4. To finalize the project, you will additionally need:

Create resources

  1. Create a bucket with restricted access in Yandex Object Storage.

  2. Create an API gateway named gate-1. Save the ID and Default domain field values to use them in the configuration.

  3. Create a database in Serverless mode. Save the value of the Endpoint field from the Connection section. You will need it when setting up your project.

  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

In the variables.json file, set the project parameters:

  • folder-id: ID of the cloud folder.
  • domain: API gateway service domain.
  • oauth-client-id: ID of the app registered in Yandex OAuth.
  • database-endpoint: Endpoint, the first part of the previously saved Endpoint field value (preceding /?database=), e.g., grpcs://ydb.serverless.yandexcloud.net:2135.
  • database: Database location, the second part of the previously saved Endpoint field value (following /?database=), e.g., /ru-central1/r1gra875baom********/g5n22e7ejfr1********.
  • 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.
  • gateway-id: API gateway ID.

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 following command:

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

Substitute the values from the variables:

  • oauth_secret: Password of the app registered in Yandex OAuth.
  • hash: Base64-encoded random 64-byte string (e.g., qrJagO5NVwOj0FeTmgYSwUN+XXkiQJMWifvrklF53wT55q80Xk8vmEB3kxhtpDnA1WDC893Z9Bh6QcqK********).
  • block: Base64-encoded random 32-byte string (e.g., uwk0duFgn2nYyfu2VzJe+MnWKWQrfKaiZijI********).

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, in the folder with the app.tf configuration file, run the following command:

terraform init

Once Terraform is initialized, run the command by delivering the OAuth token value 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

    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

    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

Result:

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********

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. In the list, choose the todo-list-alice function that you previously created in Cloud Functions.
  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: ID and password you obtained when registering your app with Yandex OAuth.
    • Authorization URL: https://oauth.yandex.com/authorize.
    • Get token URL: https://oauth.yandex.com/token.
    • Refresh token URL: https://oauth.yandex.com/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 will 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?

	Products

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

	Add eggs

What list should I add "eggs" to?

	Products

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 Default 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.

Previous
Developing CRUD APIs for movie services
Next
Building a CI/CD pipeline in GitLab