Вход в личный кабинет Введение
Удобство использования корпоративных информационных систем из любой точки земли по сети интернет неоспоримо и, зачастую, необходимость самого доступа с использованием мобильных устройств, требуемая руководством, сводит на «нет» и без того робкие попытки внутренних ИТ-служб компаний обеспечить сохранность корпоративных секретов в условиях ограниченных бюджетов.
Что нам нужно?
На нужен вебсайт. На localhost авторизацию проверить не получится, потому что к боту привязывается доменное имя.
Авторизация пользователя на сайте
Добавим в файл код вызова функции проверки
Авторизация под контролем
После каждого входа Telegram отправит вам уведомление о разрешенных вами данных, которые вы передали владельцу веб-сайта. Вы можете отменить авторизацию, нажав соответствующую кнопку.
Telegram начиная с версии 4.8 включает соотвествующий раздел в настройках конфиденциальности и безопасности, в котором перечислены все сайты, на которых вы вошли в систему, используя Telegram. Пока что данная возможность доступна только на Android. Другие приложения скоро последуют обновлению.
Этот простой на первый взгляд инструмент для авторизации — лишь первый этап проекта Telegram ID, который мы будем реализовывать в течение всего этого года.
6 февраля 2022 года,Команда Telegram
В теории
OpenId Connect (OIDC) — это протокол аутентификации, основанный на семействе спецификаций OAuth 2.0. В нем процесс аутентификации может проходить по различным сценариям, называемым потоками (flow), и включает в себя три стороны:
Получаемая клиентом в результате аутентификации информация о пользователе представляется в виде JWT-токенов (JSON Web Token). Не будем сейчас углубляться в терминологию и детали спецификации OIDC, поскольку и без того есть немало статей, в том числе и на Хабре, позволяющих составить представление о базовых принципах работы OIDC.
Для решения поставленной задачи, помимо реализации основной функциональности бота, нам необходимо реализовать механизм авторизации: при получении каждого нового сообщения от пользователя необходимо проверять наличие и актуальность связки между данным Telegram-пользователем и учеткой в системе SSO. Неавторизованные пользователи при этом должны направляться на страницу аутентификации.
Для начала нам необходимо определиться с тем, какой поток аутентификации мы будем использовать. В спецификации OIDC описано несколько возможных сценариев аутентификации пользователей:
Войти через telegram (авторизация на сайте «ботобот»)
Один из несомненных плюсов недавней разблокировки Telegram – новый толчок к широкому распространению авторизации через Telegram на различных сайтах и сервисах.
Функция Войти через Telegram анонсирована в феврале 2022 года как Telegram Login for Websites, а в нынешнем виде существует с мая 2022 года. Понятно, что к этому моменту уже можно было авторизоваться где угодно с помощью других сервисов, включая таких монстров, как Google и Facebook, так что команде Telegram нужно было придумать какое-то объяснение тому, зачем вам вообще этим пользоваться. Посыл был очень простой: так вам станут доступнее множество новых разнообразных ботов. Сейчас, когда мессенджер выведен из-под запретов, лишние объяснения не нужны, можно сразу переходить к использованию.
Мы помогаем создавать магазины в Telegram, и конечно же у нас реализована функция Войти через Telegram.
Предупреждение. Чтение этого поста займет у вас гораздо больше времени, чем реальная авторизация через Telegram. Попробуйте сами – буквально несколько кликов за считанные секунды. Но для тех, кто заранее хочет все знать, наш пост будет полезен.
Синяя кнопка расположена на сайте в правом верхнем углу.
При нажатии на кнопку Войти через Telegram открывается окно. В нем вы вводите номер телефона, к которому привязан аккаунт в Telegram.
В Telegram приходит запрос на авторизацию (при этом в сообщении указываются сайт, браузер и IP). Вы можете отклонить (кнопка Decline) или одобрить (кнопка Confirm).
Я одобрил запрос и загорелась зеленая галочка в квадрате. Если вам кажется, что для авторизации приходится делать много действий, то вам не кажется. Для Telegram важна безопасность и все эти подтверждения нужны, чтобы подтвердить ваши намерения и повысить защищенность операций.
На этом действия не закончились. Теперь нужно одобрить операцию на сайте. Если вам все еще кажется избыточным алгоритм действий, почитайте свежие новости об утечках данных.
Нажали кнопку Accept и вот теперь в Telegram прилетело сообщение о том, что все свершилось.
Соответственно на сайте «Ботобот» в этот момент открывается личный кабинет вашего магазина.
Авторизация актуальна до тех пор, пока вы не разлогинитесь. То есть если закрыть сайт, а потом опять открыть кнопка Войти через Telegram станет персонализированной, а рядом появится аватарка. Но при нажатии на Войти, система лишний раз переспросит.
Напоследок.
Еще раз повторим, что в реальности все гораздо проще и быстрее, чем может показаться. Несколько кликов занимают 15 секунд, и вы уже можете заходить в свой личный кабинет и пользоваться сервисом «Ботобот».
Встраивание модуля в конфигурацию 1с
Встраивание модуля производится обычным объединением с рабочей конфигурацией.
1. Включите возможность изменения конфигурации.
2. Откройте конфигурацию в конфигураторе. Выберите пункт меню «Конфигурация» — «Сравнить, объединить с конфигурацией из файла». Выберите файл конфигурации с двухфакторной аутентификацией (смотри рисунок 6).
3. В открывшемся окне снимите флажок с корня конфигурации, как на рисунке ниже. Далее нажмите кнопку «Действия» и выберите пункт «Отметить по подсистемам файла».
4. Установите галочку напротив «ДвухфакторнаяАутентификацияТелеграм» и нажмите кнопку «Установить».
5. Нажмите кнопку «Выполнить».
6. Откройте модуль управляемого приложения. Найдите процедуру «ПередНачаломРаботыСистемы» или создайте при ее отсутствии. Вставьте следующий вызов:
7. Настройте права. Для пользователя с административными правами добавьте роль «АдминистрированиеДвухфакторнойАутентификацииТелеграм». Для остальных пользователей добавьте роль «ДвухфакторнаяАутентификацияТелеграм».
Встраивание на сайт
Создайте файл index.php со следующим содержанием
Кастомизация кнопки
Сейчас из-за ограничений iframe нельзя изменить внешний вид кнопки. Однако, если возникла сильная необходимость, можно обойти это ограничения с помощью clickjacking.
Внимание! Это решение не рекомендуется к использованию. Clickjacking вводит пользователей в заблуждение, а поисковые системы могут понизить ваш сайт в выдаче в качестве наказания.
Идея состоит в том, чтобы разместить iframe с кнопкой поверх ссылки, оформленной по вашему вкусу. Если такой iframe сделать прозрачным, то пользователь кликнет внутрь него, пытаясь нажать на ссылку.
На клиенте
Как уже написал чуть выше, скрипт, отрисовывающий кнопку входа в телеграм, я вставил в нужное место в разметке. В файл, где у меня прописаны основные js функции, я добавил ту самую callback-функцию. У меня на сайте установлен jquery, поэтому не стал выделываться и отправил запрос через него.
На практике
Итак, перейдем к реализации, вооружившись следующими инструментами:
На сервере
Сайт работает на nodejs на фреймворке koa, поэтому пример буду приводить на нём(в конце дам ссылку на php)
Это контроллер login
//подключаем необходимые модулиconst Router = require(‘koa-router’)const router = new Router()const jwt = require(‘jsonwebtoken’)const config = require(‘../config/config’)const mongo = require(‘../config/mongo’)const crypto = require(‘crypto’);const { strcmp } = require(‘../lib/utils’)const ObjectID = require(‘../config/mongo’).ObjectID// тут роутexports.init = function (app) { router.post(‘/login’, login) app.use(router.routes())}
Настройка бота
Для использования виджета вам понадобится Telegram-бот.
Настройка виджета
На сайте можно получить код виджета и выбрать его внешний вид. К сожалению, возможностей для его произвольного конфигурирования на данный момент нет т.к. виджет встраивается на сайт посредством iframe.
Настройка параметров модуля
Для настройки модуля необходимо включить его использование и указать ряд настроек:
Подробнее о разрешениях
Боты Telegram – это мощный инструмент общения, но до сегодняшнего обновления они не могли начинать диалог. В каждом из существующих ботов пользователям приходилось писать первыми.
Вместе с новым виджетом авторизации взаимодействие с сайтом будет перетекать в чат в Telegram максимально плавно.
Практическое применение этой функции безгранично. Ботов можно использовать в службе поддержки клиентов, для приема платежей или отправки любых уведомлений – к примеру, выписки со счета, отслеживание доставки, обновления расписания рейсов и других.
Получение данных через javascript callback
Выберите в конструкторе виджета опцию Authorization Type: Callback. Сгенерированный в результате код виджета содержит JavaScript функцию, которая будет вызвана после успешной авторизации.
Проверка данных пользователя
Чтобы удостовериться в правильности полученных данных, нужно проверить hash. Разработчики Telegram приводят пример кода проверки, добавим эту функцию в код из файла index.php
Создаём бота
Создать бота всё-таки придётся. Авторизовываться будут с помощью него. Разработчики Телеграм говорят, что бот сможет сам инициировать диалог с авторизованными таким способом пользователями. Я этого пока не проверял. Поверим на слово.
Итоги
Telegram выпустила полезный инструмент, который позволяет авторизовать пользователей на своём сайте и привязать их профиль к Telegram-аккаунту. К сожалению, пока не поддерживается свободная кастомизация их виджета, а также нет удобного API для аутентификации. Вероятно, в ближайшее время они добавят такие возможности.
Ссылки для подробного изучения
В заключение
Поставленная задача решена, но за кадром остался еще ряд вопросов, которые необходимо решить, прежде, чем катить это в прод. Например, офлайн-токены необходимо держать в персистентном хранилище, это позволит не направлять пользователей на повторную аутентификацию после каждого перезапуска/обновления бота.
Эти вопросы уже решены за нас в более развесистых OAuth-клиентах вроде Spring Security и Google OAuth Client. Но для демонстрационных целей нам и так ок 🙂
Все исходники можно найти на GitHub.
Заключение
Ждем ваших отзывов, критики и пожеланий под катом.