Как сделать кастомную кнопку телеграм авторизации на сайте?

HTML PHP Telegram

1 ответ

Добрый день, подскажите как можно кастомизировать кнопку на сайте, https://core.telegram.org/widgets/login

Вижу вариант вызвать функцию через onClick, но официальной документации не представлено таким методом.

Без фреймворка. Чистый html, php, js

Дополнительно:

Там в конце твоей ссылочки на телегу - пример на PHP - чем не подошел ?

ksnk, Пример не рабочий

UPD:
Пример заработал, кнопка в примере используется официальная.

А если заменить в строке на if (isset($_GET['logout'])) {
?
Пример рабочий, если на глюки довольно старого кода не обращать внимания

К примеру нужен бот, у которого настроен домен. Имя бота в коде должно быть указано без @

ksnk, С этим нет проблем, вопрос в другом, в том как сделать открытие их iframe на свою кнопку.

WhiteHat, Тоже не нашел вменяемого способа кастомизировать кнопку входа через телегу. В качестве грязного варианта можно что-то такое предложить -

&lt;div style="width:240px;height:40px;display:inline-block;position:relative;"&gt; &lt;script async ...&gt;&lt;/script&gt; &lt;div style="pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;background:gray;" &lt;/div&gt;

Обрамить телеграмный фрейм своим с размещенным поверх него элементом с pointer-events:none;. Вот туда уже можно рисовать в бякграунде что угодно.
Если по размеру не подходит - можно даже и clip использовать...
Когда-то, когда деревья были большими, таким нехитрым образом нажималась кнопка загрузки файлов

ksnk, Способ сработал, спасибо!

Пришлось дополнительно делать отступы по 20px слева и справа, чтобы не проявлялась сзади кнопка Телеграма.

ksnk, Хотя я уверен что существует более правильный способ, вот нашел пример реализации https://zelenka.guru/

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Максим Павлов Ответ

Для создания кастомной кнопки Telegram авторизации на сайте, вам потребуется следовать нескольким шагам:

1. Получите данные для авторизации Telegram Bot API:
- Создайте бота через BotFather в Telegram и получите токен для вашего бота.
- Узнайте идентификатор вашего бота.

2. Создайте HTML-элемент кнопки на вашем сайте:

<button>Войти через Telegram</button>

<button>Войти через Telegram</button>

3. Добавьте скрипт для обработки нажатия кнопки и отправки запроса к Telegram API:

function authWithTelegram() {
  var botToken = 'YOUR_BOT_TOKEN';
  var botUsername = 'YOUR_BOT_USERNAME';
  var botId = 'YOUR_BOT_ID';
 
  var redirectUrl = window.location.href; // URL, на который пользователь будет перенаправлен после авторизации
 
  var authUrl = `https://telegram.me/${botUsername}?start=${botId}&amp;redirect_url=${encodeURIComponent(redirectUrl)}`;
 
  window.location.href = authUrl;
}

4. Настройте обработчик для получения данных после авторизации:

if(isset($_GET['start'])) {
  $userId = $_GET['start'];
 
  // Далее вы можете выполнить необходимые действия, связанные с авторизацией пользователя
}

if(isset($_GET['start'])) { $userId = $_GET['start']; // Далее вы можете выполнить необходимые действия, связанные с авторизацией пользователя }

5. Дополнительно вы можете стилизовать кнопку с помощью CSS и добавить дополнительные параметры при необходимости.

Этот код позволит вам создать кастомную кнопку Telegram авторизации на вашем сайте и обеспечить пользователей удобным способом входа через Telegram.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Искусственный интеллект Что делать, если OpenRouter ограничивает доступ к моделям? 1 ответ Proxy Может ли замедляться трафик в Tlg с российских хостингов? 1 ответ

Как сделать кастомную кнопку телеграм авторизации на сайте?

Дополнительно:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно