Раньше тоже можно было авторизовать пользователя через телеграм. Но для этого и пользователю и разработчику нужно было сделать много лишних телодвижений.
А теперь всё просто как в ВК или Facebook.
Что нам нужно?
На нужен вебсайт. На localhost авторизацию проверить не получится, потому что к боту привязывается доменное имя.
Создаём бота
Создать бота всё-таки придётся. Авторизовываться будут с помощью него. Разработчики Телеграм говорят, что бот сможет сам инициировать диалог с авторизованными таким способом пользователями. Я этого пока не проверял. Поверим на слово.
Подробно писать как создать бота я не буду, потому что про это написана и перенаписано миллион статей. Вот ссылка на мануал от Telegram https://core.telegram.org/bots#3-how-do-i-create-a-bot .
После создания бота нам дадут ключ api, который пригодится нам в дальнейшем.
Привязываем к боту домен
Виджет авторизации
На странице https://core.telegram.org/widgets/login находим конфигурацию виджета
Запуска аккаунтов tdata с помощью Telegram Portable/Launching tdata accounts with Telegram Portable
Вводим username бота, который сами придумали в процессе создания бота.
Далее выбирает размер кнопки. Три варианта. При перещёлкивании кнопка внизу будет автоматически менять размер.
Затем нужно выбрать как мы будем обрабатывать данные полученные от телеграм. Тут два варианта. Либо мы делает под это отдельную страницу и пользователя перенаправить туда, мы обработаем данные и можем перенаправить обратно или, например в закрытую часть сайта. Либо же мы делаем всё это через callback без перезагрузки страницы. Второй вариант мне кажется правильнее и современнее.
Его и выбираю.
Далее там самая галочка, которая видимо и отвечает за отсылку сообщений от имени бота
Ну дальше поле с получившимся кодом.
Тут два тега скрипт. В принципе можно всё это вставить в нужное место на сайте, но я вставил только верхний, который рисует кнопку. Из нижнего я взял callback функцию и вставил в общий js-файл для сайта.
Сейчас эта функция просто выводит стандартный alert в браузере с сообщением о том, что пользователь залогинен и некоторые его данные. Позже напишем сюда запрос к серверу.
На сайте
На клиенте
Как уже написал чуть выше, скрипт, отрисовывающий кнопку входа в телеграм, я вставил в нужное место в разметке. В файл, где у меня прописаны основные js функции, я добавил ту самую callback-функцию. У меня на сайте установлен jquery, поэтому не стал выделываться и отправил запрос через него.
function onTelegramAuth(user)
url: ‘/login’,
method: ‘post’,
data: user,
dataType:’json’,
success: function (data)
location.reload()
error: function (error)
alert(error)
На сервере
Сайт работает на nodejs на фреймворке koa, поэтому пример буду приводить на нём(в конце дам ссылку на php)
Как открыть/запустить телеграм аккаунты в формате tdata
Это контроллер 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())
// собственно функция логина
async function login(ctx,next)
// сюда методом post приходят данные в виде json
const authData = ctx.request.fields
//с помощью hash мы проверим целостность данных, то есть вообще с телеграма ли нам это пришло или кто-то нехороший копается
const checkHash = authData.hash
delete authData[‘hash’]
/* по инструкции телеграм мы должны взять все данные, кроме hash, которые пришла нам от телеграм и собрать из в одну строку в формате key=value , разделяя символом переноса строки n */
let dataCheck = []
for (let key in authData)
dataCheck.push(key + ‘=’ + authData[key])
dataCheck.sort();
dataCheck.join(«n»)
// Делаем из неё sha256
const secretKey = crypto.createHash(‘sha256’)
.update(config.oauth.telegram.botToken)
/* и проверяем если не ок, то шлём юзера куда подальше, если ок, то добавляем или обновляем пользователя в базе данных */
const hash = crypto.createHmac(‘sha256’, dataCheck.toString(), secretKey);
if (strcmp(hash, checkHash) === -1)
ctx.status = 401
ctx.body = ‘Data is NOT from Telegram’
if ( +(new Date()) — authData.auth_date > 86400)
ctx.status = 401
ctx.body = ‘Data is outdated’
const user = await mongo.users.findOne()
await mongo.users.insertOne(authData)
await mongo.users.updateOne(,>)
/*Здесь я использовал jwt, чтобы сделать токен, в принципе можно написать это самому, но суть статьи не в этом*/
const token = await jwt.sign(authData, config.app.secret)
/* Ставлю куку с этим токеном */
ctx.cookies.set(‘tgUser’, token);
ctx.status = 200
user: authData
/*Теперь я добавлю перед всеми роутами middlware. Я использую koa, там принять пользователя хранить в ctx.state.user*/
app.use(async (ctx,next) =>
const token = ctx.cookies.get(‘tgUser’)
ctx.state.user = await jwt.verify(token, config.app.secret)
>catch (error)
ctx.cookies.set(‘tgUser’, »);
await next(ctx)
После этого остаётся где нужно проверять переменную ctx.state.user.
PHP
Есть пример намного проще и на php от самих Телеграм. Вероятно, самые внимательные его уже нашли https://gist.github.com/anonymous/6516521b1fb3b464534fbc30ea3573c2
Этот пример чисто демонстративный, для реального сайта его нужно будет допилить.
Источник: dzen.ru
Телеграм виджет для авторизации на сайтах
Сегодня мы представляем виджет Telegram Login для внешних веб-сайтов . Когда вы впервые воспользуетесь виджетом на сайте, он запросит номер телефона и отправит вам подтверждение через Telegram для авторизации вашего браузера. Как только это будет сделано, вы получите логин с двумя кнопками на каждом веб-сайте, который поддерживает вход в Telegram:
Нажимая кнопку «Принять», будут отправлены: имя , имя пользователя и ваш профайл к владельцу сайта. Ваш номер телефона остается скрытым . Веб-сайт также может запросить разрешение на отправку сообщений от своего бота .
Разрешаем писать боту первым
Боты Telegram — это мощный инструмент коммуникации, но до сегодняшнего дня они не могли начать разговор первыми. Даже если бы вы хотели, чтобы они обратились к вам, сначала вам нужно было «стартануть» их.
Благодаря новому виджету входа, переход от взаимодействия с сайтом к разговору на Telegram становится абсолютно без трения .
Потенциальные варианты использования безграничны. Боты могут использоваться для предоставления поддержки клиентов, принятия платежей или отправки уведомлений любого рода, включая выписки со счета, отслеживание отгрузки, обновления рейсов и многое другое.
Все под контролем
После каждого входа,Telegram отправит вам сообщение о ваших разрешениях и данных, которые вы передали владельцу веб-сайта. Вы можете отменить авторизацию, нажав соответствующую кнопку в сводке входа.
Telegram for Android 4.8 , также включает раздел в настройках конфиденциальности и безопасности, в котором перечислены все сайты, на которых вы вошли в систему, используя Telegram. Другие приложения скоро последуют.
Этот простой инструмент для входа в систему — это первый этап проекта Telegram ID , который мы будем развертывать в течение всего этого года.
Как настроить виджет авторизации через телеграмм
Виджет входа Telegram — это простой способ авторизации пользователей на вашем веб-сайте.
Настраиваем бота
Чтобы использовать виджет входа, вам понадобится бот Telegram .