Telegram login for websites

Receiving authorization data

After a successful authorization, the widget can return data in two ways:

Stay in control

After each login, Telegram will send you a summary message about the permissions you‘ve granted and the data you’ve passed to the website owner. You can revoke the authorization by tapping the appropriate button under the login summary.

Telegram for Android 4.8, also released today, includes a section in the Privacy & Security settings that lists all the websites where you logged in using Telegram. Other apps will soon follow.

This simple login tool is the first phase of the Telegram ID project, which we will be rolling out throughout this year.

February 6, 2022,The Telegram Team

Telegram позволил владельцам сайтов добавить авторизацию через мессенджер — офтоп на

А в Android-приложении теперь можно смотреть видео без предварительной загрузки.

Разработчики Telegram выпустили виджет для входа на сайты с помощью мессенджера — Telegram Login. Его могут добавить владельцы любых сайтов, говорится в официальном блоге компании.

При первой авторизации на каком-либо сайте, где установлен Telegram Login, пользователь должен будет ввести свой номер телефона, а затем — полученный код подтверждения. После этого он сможет заходить на сайт с помощью Telegram «в два клика», говорят создатели мессенджера.

После каждого входа на сайты Telegram будет присылать пользователю уведомление. В новой версии приложения для Android в настройках появился раздел со всеми сайтами, на которых пользователь авторизовался с помощью мессенджера.

Владелец сайта может также попросить разрешение на отправку пользователю сообщений в Telegram с помощью своих ботов. Раньше боты не могли самостоятельно начать беседу — пользователь должен был первым отправлять команду, отметили в Telegram.

Боты могут использоваться для поддержки клиентов, принятия платежей и отправки любых уведомлений, включая выписки по счетам, статус доставки посылки, информацию об авиарейсах и так далее, говорится в блоге Telegram.

В компании добавили, что новый виджет стал первой фазой проекта Telegram ID. Разработчики мессенджера пообещали выпускать новые функции в течение 2022 года.

Разработчики мессенджера также обновили официальное приложение для Android. Теперь оно поддерживает потоковое воспроизведение видео, что позволяет смотреть полученные ролики без предварительной загрузки в память устройства.

Также в приложении для Android появился автоматическое переключение на ночной режим — функция активируется при наступлении темноты или в условиях низкой освещённости.

В ближайшее время новые функции должно получить и приложение для iOS, говорится в блоге Telegram.

#новость#Telegram

Авторизация пользователя на сайте

Добавим в файл код вызова функции проверки

Встраивание на сайт

Создайте файл index.php со следующим содержанием

Какие бывают виджеты для телеграм

Виджеты для Телеграм делятся на 3 группы:

  • виджет для приглашения в группу или на канал;
  • виджет для диалога через Телеграм (аналог онлайн-консультантов и чат-ботов);
  • виджет в виде кнопки для перепоста материала или страницы в Телеграм.

Кастомизация кнопки

Сейчас из-за ограничений iframe нельзя изменить внешний вид кнопки. Однако, если возникла сильная необходимость, можно обойти это ограничения с помощью clickjacking.

Внимание! Это решение не рекомендуется к использованию. Clickjacking вводит пользователей в заблуждение, а поисковые системы могут понизить ваш сайт в выдаче в качестве наказания.

Идея состоит в том, чтобы разместить iframe с кнопкой поверх ссылки, оформленной по вашему вкусу. Если такой iframe сделать прозрачным, то пользователь кликнет внутрь него, пытаясь нажать на ссылку.

Настройка базовой авторизации

Перейдём к настройке базовой авторизации. Сейчас наш класс настройки Web Security выглядит так, но позже он сильно измениться:

Настройка бота

Для использования виджета вам понадобится Telegram-бот.

Настройка виджета

На сайте можно получить код виджета и выбрать его внешний вид. К сожалению, возможностей для его произвольного конфигурирования на данный момент нет т.к. виджет встраивается на сайт посредством iframe.

Telegram Login for Websites

Кастомизация виджета и получение кода для вставки на сайт

Отправка сообщение в браузер, об успешной авторизации

Последнее, что осталось сделать —

потанцевать с бубном

написать уведомление для браузера. Мы уже авторизуем браузер при подтверждении, но браузер об этом не знает. Мы должны вручную обновлять страничку, чтобы увидеть это. От этого будем пытаться избавиться.

Перепись авторизации на json формат

Наше приложение будет работать по такому алгоритму:
Алгоритм авторизации

Как вы видите, тут проверка пользователя идёт по порядку: спросили одно и ждём ответа, при получении ответа, если надо, спрашиваем второе. Перенаправлять пользователя со страницы на страницу было бы не очень удобно, а вот технологию AJAX применить можно было бы.

Для этого перепишем нашу авторизацию на JSON. Делать мы это будем с помощью AuthenticationSuccessHandler и AuthenticationFailureHandler, но для начала создадим модель, которую будем возвращать в качестве информации об авторизации:

public class AuthenticationInfo {
    private boolean success;
    private String redirectUrl;
    private String errorMessage;
    private Set<RequiredMfa> requiredMfas;

    public enum RequiredMfa {
        TELEGRAM_MFA
    }

    // getters, setters and no args constructor
}

Как вы видите, тут мы используем Set<RequiredMfa> requiredMfas вместо простого boolean askTelegramMfa. Как вы думаете почему?

Теперь напишем RequireTelegramMfaException. Это Exception, который мы будем выбрасывать, если пользователь должен авторизоваться с помощью Telegram. Почему? Пока пользователь не подтвердил авторизацию в Telegram, мы не должны его авторизовать, а значит мы должны выбросить Exception, что бы Spring этого не сделал.

Наш RequireTelegramMfaException обязательно должен наследоваться от AuthenticationException, а выглядеть будет так:

public class RequireTelegramMfaException extends AuthenticationException {
    public RequireTelegramMfaException(String msg) {
        super(msg);
    }
}

Теперь перейдём непосредственно к CustomAuthenticationFailureHandler. Наш код будет выглядеть вот так:

Получение данных через javascript callback

Выберите в конструкторе виджета опцию Authorization Type: Callback. Сгенерированный в результате код виджета содержит JavaScript функцию, которая будет вызвана после успешной авторизации.

Проверка данных пользователя


Чтобы удостовериться в правильности полученных данных, нужно проверить hash. Разработчики Telegram приводят пример кода проверки, добавим эту функцию в код из файла index.php

Разрешение разговора

Боты Telegram — это мощный инструмент связи, но до сегодняшнего дня они не могли написать первыми. Даже если бы вы захотели, чтобы они обратились к вам, сначала нужно было бы начать разговор с ними.

С новым виджетом, переход к взаимодействию с веб-сайтом происходит без всяких проблем.

С помощью плагинов

Если сайт на движке, например, на Вордпрессе — можно подключить и настроить плагин. Хотя и на движок можно добавить виджет через код. Но так как плагины существуют, опишем и этот способ.

Создание и настройка telegram бота

Теперь займёмся самим Telegram ботом. В нашем pom.xml должны быть две зависимости:

наркотическая и никотиновая

Создание проекта

Итак, для начала создадим проект. Для этого я использовал Spring Initializr. Для проекта нам понадобится Spring MVC, Spring Security и Spring WebSocket. В качестве базы данных будем использовать H2. Мои настройки выглядели вот так:
Spring Initializr Settings

Затем в наш pom.xml добавим дополнительные зависимости: библиотека для работы с Telegram и webjars: bootstrap (для красивого дизайна), stomp-websocket и sockjs-client для работы с Spring WebSocket.

В итоге наш pom.xml будет выглядеть вот так.

Через html-код

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

Сервисы, в которых можно создать Телеграм виджет:

Также есть конструктор виджетов от самого Телеграма. В нем доступно 4 типа виджетов: кнопка «Поделиться в Телеграм», виджет поста (с возможностью перейти на канал), виджет, позволяющий авторизоваться через Телеграм и виджет для комментариев.

Создаем виджет подписки на канал на примере сервиса T.website:

Итоги

Telegram выпустила полезный инструмент, который позволяет авторизовать пользователей на своём сайте и привязать их профиль к Telegram-аккаунту. К сожалению, пока не поддерживается свободная кастомизация их виджета, а также нет удобного API для аутентификации. Вероятно, в ближайшее время они добавят такие возможности.

Ссылки для подробного изучения

Похожее:  Регистрация в личном кабинете Ростелеком: пошаговая инструкция

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *