Виджет входа в Telegram не отображается в приложении React SPA
У меня есть интерфейсное приложение React (загруженное с помощью create-react-app) и django на бэкэнде. У нас есть среда разработки и производственная среда, у них разные домены. Теперь я пытаюсь реализовать виджет в dev env.
Я хочу входить в систему через виджет входа в Telegram. Я слежу за официальной основной документацией Telegram . Но кнопка не отображается на странице входа, хотя в дереве DOM есть скрипт.
Я пытаюсь переместить скрипт в <body> в index.html за пределами корня div, где монтируется React, но поведение было таким же.
Никаких ошибок в консоли
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Впервые столкнулись с такой проблемой
Мы пытались добавить скрипт виджета напрямую в JSX-компонент, но ничего не происходит.
Эту проблему решено путем создания элемента сценария в хуке useEffect (или может быть в компонентеDidMount):
- Создал ссылку, куда будет вставлен виджет Telegram iframe:
// Refs
const telegramWrapperRef = useRef<HTMLDivElement>(null);
...
return (
<div ref = {telegramWrapperRef}></div>
);- Определено создание элемента скрипта в useEffect:
useEffect(() => {
const scriptElement = document.createElement('script');
scriptElement.src = 'https://telegram.org/js/telegram-widget.js?22';
scriptElement.setAttribute('data-telegram-login', 'paste-bot-name');
scriptElement.setAttribute('data-size', 'large');
scriptElement.setAttribute('data-auth-url', 'paste-redirect-url');
scriptElement.async = true;
telegramWrapperRef.current.appendChild(scriptElement);
}, []);- После этого все будет работать
Должен отметить, что на localhost это тоже будет заметно, так как в месте вставки виджета (внутри telegramWrapperRef) будет отображаться ошибка "Домен бота недействителен".
Чтобы он работал правильно, вам необходимо развернуть его с помощью HTTPS.
Отличный ответ! Я ценю тебя! К счастью, такое же решение я уже придумал самостоятельно) но без рефа