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

Здравствуйте, коллеги! <br/> Как мне добавить Яндекс ID в приложение на Vue.js? <br/> Я создал приложение в настройках Яндекс ID, указал необходимые URL, добавил кнопку и интегрировал её в форму входа, но она не отображается. Может ли это быть связано с тем, что я тестирую локально, а требуется использовать указанные URL для внешнего доступа? <br/> <br/> Вот код из файла LoginForm.vue: <br/> <pre><code class="typescript">&lt;script setup lang="ts"&gt;
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 = () =&gt; {
  if (window.YaAuthSuggest) {
    window.YaAuthSuggest.init(
        {
          client_id: '&lt;client_id&gt;',
          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 =&gt; result.handler())
        .then(data =&gt; console.log('Сообщение с токеном:', data))
        .catch(error =&gt; console.log('Обработка ошибки:', error));
  } else {
    console.error('YaAuthSuggest не загрузился');
  }
};

onMounted(() =&gt; {
  initYandexID();
});
&lt;/script&gt;

&lt;template&gt;
  &lt;
  • 12 декабря 2024 г. 12:43
Ответы на вопрос 1 
Для интеграции Яндекс ID в ваше приложение на Vue.js, нужно учитывать несколько моментов, особенно касающихся тестирования локально и использования указанных URL.

1. **Локальное тестирование**: Яндекс ID (или любое другое OAuth решение) требует, чтобы URL перенаправления (redirect_uri) был корректным и доступным из Интернета. Если вы тестируете локально, то вам не удастся использовать `https://domain.ru` в `redirect_uri`, так как этого адреса не существует на локальном сервере. Если вам нужно тестировать локально, вы можете использовать сервисы вроде [ngrok](https://ngrok.com/) для проброса вашего локального сервера в Интернет. Это позволит вам указать ngrok-адрес как `redirect_uri`.

2. **Проблемы с инициализацией**: Убедитесь, что скрипт Яндекс ID загружается на страницу. Обычно, для этого используется CDN. Вам нужно добавить в HTML-код вашего приложения следующую строку в `<head>`:

   ```html
   <script src="https://yastatic.net/auth/client.js"></script>
   ```

3. **Кнопка Яндекс ID**: После загрузки скрипта, ваша кнопка должна быть инициализирована. Проверьте, что `YaAuthSuggest` действительно существует в `window`. Если ваша кнопка не отображается, возможно, у вас есть ошибка в настройках, или не сработало событие `onMounted`, или есть проблемы с самими параметрами.

4. **Обновленный пример кода**: Ваш код, в принципе, правильный, но вам важно убедиться, что кнопка действительно инициализируется. Вот обновленный пример:

   ```vue
   <template>
     <div id="buttonContainerId"></div>
   </template>

   <script setup lang="ts">
   import { onMounted, ref } from 'vue';

   const buttonContainerId = ref('buttonContainerId');

   const initYandexID = () => {
       if (window.YaAuthSuggest) {
           window.YaAuthSuggest.init(
               {
                   client_id: '<client_id>',
                   response_type: 'token',
                   redirect_uri: '<valid_redirect_uri>'
               },
               '<valid_redirect_uri>',
               {
                   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(() => {
       const script = document.createElement('script');
       script.src = 'https://yastatic.net/auth/client.js';
       script.onload = initYandexID;
       document.head.appendChild(script);
   });
   </script>
   ```

Не забудьте заменить `<client_id>` и `<valid_redirect_uri>` на свои значения. Убедитесь, что скрипт добавляется и событие `initYandexID` вызывается после его загрузки. 

Если после всех этих проверок у вас все еще не отображается кнопка, проверьте консоль разработчика в браузере на ошибки, которые могут помочь выяснить причину проблемы.
Похожие вопросы
    Показать ещё