Как добавить Яндекс ID в приложение Vue.js?

Question

[mambastick]

Коллеги, приветствую!
Как добавить Яндекс ID в мое приложение на Vue.js ?
В настройках Яндекс ID я сделал свое приложение, указал URL`ы, сделал кнопку, добавил на форму логина, а оно не загружается. Может быть проблема в том, что я тестирую у себя на локальной машине, а надо через внешку (на те URL`ы, которые я указал в Яндекс ID) ?

Вот код LoginForm.vue:

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Separator } from '@/components/ui/separator';

const buttonContainerId = ref('buttonContainerId');

const initYandexID = () => {
  if (window.YaAuthSuggest) {
    window.YaAuthSuggest.init(
        {
          client_id: '<client_id>',
          response_type: 'token',
          redirect_uri: 'https://domain.ru/main'
        },
        'https://domain.ru',
        {
          view: 'button',
          parentId: buttonContainerId.value,
          buttonSize: 'm',
          buttonView: 'main',
          buttonTheme: 'light',
          buttonBorderRadius: '10',
          buttonIcon: 'ya'
        }
    )
        .then(result => result.handler())
        .then(data => console.log('Сообщение с токеном:', data))
        .catch(error => console.log('Обработка ошибки:', error));
  } else {
    console.error('YaAuthSuggest не загрузился');
  }
};

onMounted(() => {
  initYandexID();
});
</script>

<template>
  <Card>
    <CardHeader>
      <CardTitle>Авторизация</CardTitle>
      <CardDescription>
        Введите вашу почту и пароль для входа в систему.
      </CardDescription>
    </CardHeader>
    <CardContent class="space-y-2">
      <div class="space-y-1">
        <Label for="email">Почта</Label>
        <Input id="email" type="email" placeholder="[e-mail]" />
      </div>
      <div class="space-y-1">
        <Label for="password">Пароль</Label>
        <Input id="password" type="password" placeholder="Введите ваш пароль" />
      </div>
    </CardContent>
    <CardFooter>
      <Button>Войти</Button>
    </CardFooter>
    <Separator class="my-10" label="или" />
    <div :id="buttonContainerId" style="min-height: 40px;"></div>
  </Card>
</template>