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

Question

[WhiteHat]

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

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

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

Comments

[ksnk]

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

[WhiteHat]

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

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

[ksnk]

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

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

[WhiteHat]

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

[ksnk]

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

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

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

[WhiteHat]

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

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

[WhiteHat]

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

Answer 1

[parserpro]

Вот тут толковый ответ, у меня так получилось сделать просто кружок.
https://stackoverflow.com/questions/56347902/teleg...