Мне нужно реализовать авторизацию пользователей через Telegram на моем сайте. В документации Telegram API не мог разобраться, в интернете одни мануалы по созданию ботов. Подскажите, как это можно сделать?
Отслеживать
20k 6 6 золотых знаков 37 37 серебряных знаков 81 81 бронзовый знак
задан 17 сен 2017 в 7:46
Арыстан Калиакпаров Арыстан Калиакпаров
43 1 1 серебряный знак 6 6 бронзовых знаков
У телеграма есть виджет авторизации.
Читайте документацию
23 окт 2020 в 16:22
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
На сайте уже есть авторизация? какова структура сайта? Есл не ошибаюсь, официальной oauth2 авторизации через Телеграм нет. Наиболее простой вариант — авторизировать через бота. Пользователь может начать чат с ботом по ссылке, передав дополнительные параметры. На стороне сайта вы просто можете сохранять в базу всех, кто постучит боту.
За счет параметров в ссылке можно точно определить что пользователь пришел с сайта и проверять актуальность ключа. В качестве логина можно использовать ID телеграма, высылать пароль при регистрации или восстановлении.
Как сделать вход на сайт через соц сеть
Этот называется Deep linking и описано в официальной документации.
Вот минимальный пример кода из некогда рабочего бота.
select( ‘users’, $chat_id ); if ( !$user )< $userPassword = generatePassword(); $DB->insert( ‘users’, makeUser( $chat, $userPassword, $full_name, $date ) ); send_keyb( $chat, «Добро пожаловать, . Вы зарегистрированы как ! Пароль для доступа к сайту: «, mainMenu() ); > else < send_keyb( $chat, «Вы уже зарегистрированы как ! Чтобы восстановить пароль, нажмите: /forot_password», mainMenu() ); > > ?>
Формат данных от пользователя при переходе по ссылке:
, «chat»:, «date»:1505645689, /// USER TOKEN FROM SITE «text»:»/start 2a79RhELHUoC5stlOqI6pnz1bTmjuFMWSdye8xKZi4XcG0VNrJPBA3gfQDwkYv», «entities»:[]>>
так же есть реально рабочий пример на github.com
Источник: ru.stackoverflow.com
Авторизация на сайте через Telegram (альтернатива официального виджета)
Пару недель назад появилась мысль сделать регистрацию на сайте через Telegram бота, у меня уже был опыт создания такого инструмента и вышло успешно, но теперь встал вопрос, а могу ли я сделать этот инструмент для всех? Ну и есть ли аналоги этого?
Полез в интернет и начал искать что-то подобное, для авторизации через телеграм.
И сначала разочаровался, так как увидел на официальном сайте телеграмма инструмент для создания виджета, чтобы регистрироваться на сайте через телеграм.
Думал “ну вот, фича уже сделана”, НО, не отпускала мысль, а почему этого до сих пор почти нигде нету?
Регистрация/авторизация через Telegram бота
Ответ я получил читая документацию
И когда я долистал до конца, я понял почему
ЭТО ЖЕ ПИПЕЦ КАК сложно
Во первых, для понимания, а во вторых для реализации
Тогда я успокоился, полистал интернет и понял, что пока удобного и доступного инструмента нету.
Мною была поставлена задача, сделать как можно более простой в интеграции на сайты инструмент, но при надобности, чтобы его фишек хватало на более сложные задачи и интеграции с бекендом, а так же, чтобы пользователю сайта вся регистрация занимала нажатие 3-4 кнопок.
Представляю вам свою реализацию https://verificate-tg. ru
Для интеграции на сайт надо добавить кнопку и обязательный класс и подгрузить JS скрипт. Всё, дальше уже зависит от вашей фантазии, стиль кнопки, что делать, если человек зарегался и тд
Документация есть на сайте.
И как-бы всё сделал, но встало пару вопросов, на которые я сам не могу ответить, и у меня нету так много друзей веб разработчиков:( (буду рад, если вы ими станете)
Нужно ли веб разработчикам регистрация через телеграм?
Поговорив со своими знакомыми (юзерами сайтов), они мне сказали, что хотели бы видеть такую фишку на сайте и пользоваться ею.
Если такая фишка нужна, то я буду мучиться и всё таки использую инструмент телеграмма или же мне не так важно, если уже всё сделали, использую готовое?
Мне бы хотелось узнать мнение веб разработчиков, как они относятся к моей задумке и хоте ли бы использовать её в своих работах?
Ну и хотел бы услышать просто мнение людей, о моей задумке!
Сейчас реализованы только базовые функции, но если я увижу интерес, то в скорейшем времени буду допиливать под запросы)
Источник: vc.ru
Делаем OAuth авторизацию Telegram на своём сайте
Раньше тоже можно было авторизовать пользователя через телеграм. Но для этого и пользователю и разработчику нужно было сделать много лишних телодвижений.
А теперь всё просто как в ВК или Facebook.
Что нам нужно?
На нужен вебсайт. На localhost авторизацию проверить не получится, потому что к боту привязывается доменное имя.
Создаём бота
Создать бота всё-таки придётся. Авторизовываться будут с помощью него. Разработчики Телеграм говорят, что бот сможет сам инициировать диалог с авторизованными таким способом пользователями. Я этого пока не проверял. Поверим на слово.
Подробно писать как создать бота я не буду, потому что про это написана и перенаписано миллион статей. Вот ссылка на мануал от Telegram https://core.telegram.org/bots#3-how-do-i-create-a-bot .
После создания бота нам дадут ключ api, который пригодится нам в дальнейшем.
Привязываем к боту домен
Виджет авторизации
На странице https://core.telegram.org/widgets/login находим конфигурацию виджета
Вводим username бота, который сами придумали в процессе создания бота.
Далее выбирает размер кнопки. Три варианта. При перещёлкивании кнопка внизу будет автоматически менять размер.
Затем нужно выбрать как мы будем обрабатывать данные полученные от телеграм. Тут два варианта. Либо мы делает под это отдельную страницу и пользователя перенаправить туда, мы обработаем данные и можем перенаправить обратно или, например в закрытую часть сайта. Либо же мы делаем всё это через callback без перезагрузки страницы. Второй вариант мне кажется правильнее и современнее.
Его и выбираю.
Далее там самая галочка, которая видимо и отвечает за отсылку сообщений от имени бота
Ну дальше поле с получившимся кодом.
Тут два тега скрипт. В принципе можно всё это вставить в нужное место на сайте, но я вставил только верхний, который рисует кнопку. Из нижнего я взял callback функцию и вставил в общий js-файл для сайта.
Сейчас эта функция просто выводит стандартный alert в браузере с сообщением о том, что пользователь залогинен и некоторые его данные. Позже напишем сюда запрос к серверу.
На сайте
На клиенте
Как уже написал чуть выше, скрипт, отрисовывающий кнопку входа в телеграм, я вставил в нужное место в разметке. В файл, где у меня прописаны основные 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())
>
// собственно функция логина
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()
if(!user)
await mongo.users.insertOne(authData)
>else
await mongo.users.updateOne(,>)
>
/*Здесь я использовал jwt, чтобы сделать токен, в принципе можно написать это самому, но суть статьи не в этом*/
const token = await jwt.sign(authData, config.app.secret)
/* Ставлю куку с этим токеном */
/*Теперь я добавлю перед всеми роутами middlware. Я использую koa, там принять пользователя хранить в ctx.state.user*/
app.use(async (ctx,next) =>
const token = ctx.cookies.get(‘tgUser’)
if(token)
try
ctx.state.user = await jwt.verify(token, config.app.secret)
>catch (error)
ctx.cookies.set(‘tgUser’, ‘’);
>
>
await next(ctx)
>)
После этого остаётся где нужно проверять переменную ctx.state.user.
Есть пример намного проще и на php от самих Телеграм. Вероятно, самые внимательные его уже нашли https://gist.github.com/anonymous/6516521b1fb3b464534fbc30ea3573c2
Этот пример чисто демонстративный, для реального сайта его нужно будет допилить.
Источник: medium.com