Авторизация через Telegram-бота ITLife

Содержание

1 Хотите узнать, что необходимо для создания сайта?
2 Похожие статьи:
3 Что же делать и как быть в таких ситуациях?!
4 Хостинг
5 Telegram-бот
6 Создаем вебхук
7 Библиотека
8 Тест
9 Как решить проблему?
10 Выбираем решение 2
11 Резюме

Буквально позавчера Telegram выкатили нормальную OAuth авторизацию через мессенджер на сторонних ресурсах.

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

А теперь всё просто как в ВК или Facebook.

На нужен вебсайт. На localhost авторизацию проверить не получится, потому что к боту привязывается доменное имя.

Создать бота всё-таки придётся. Авторизовываться будут с помощью него. Разработчики Телеграм говорят, что бот сможет сам инициировать диалог с авторизованными таким способом пользователями. Я этого пока не проверял. Поверим на слово.

Подробно писать как создать бота я не буду, потому что про это написана и перенаписано миллион статей. Вот ссылка на мануал от Telegram https://core.telegram.org/bots#3-how-do-i-create-a-bot .

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

Нужно отправить боту @BotFather команду /setdomain , он сначала попросит выбрать бота, а потом нужно будет ввести адрес сайта.

На странице https://core.telegram.org/widgets/login находим конфигурацию виджета

Вводим username бота, который сами придумали в процессе создания бота.

Далее выбирает размер кнопки. Три варианта. При перещёлкивании кнопка внизу будет автоматически менять размер.

Затем нужно выбрать как мы будем обрабатывать данные полученные от телеграм. Тут два варианта. Либо мы делает под это отдельную страницу и пользователя перенаправить туда, мы обработаем данные и можем перенаправить обратно или, например в закрытую часть сайта. Либо же мы делаем всё это через callback без перезагрузки страницы. Второй вариант мне кажется правильнее и современнее. Его и выбираю.

Далее там самая галочка, которая видимо и отвечает за отсылку сообщений от имени бота

Ну дальше поле с получившимся кодом.

Тут два тега скрипт. В принципе можно всё это вставить в нужное место на сайте, но я вставил только верхний, который рисует кнопку. Из нижнего я взял callback функцию и вставил в общий js-файл для сайта.

Сейчас эта функция просто выводит стандартный alert в браузере с сообщением о том, что пользователь залогинен и некоторые его данные. Позже напишем сюда запрос к серверу.

Как уже написал чуть выше, скрипт, отрисовывающий кнопку входа в телеграм, я вставил в нужное место в разметке. В файл, где у меня прописаны основные js функции, я добавил ту самую callback-функцию. У меня на сайте установлен jquery, поэтому не стал выделываться и отправил запрос через него.

function onTelegramAuth(user) {

$.ajax({

url: ‘/login’,

method: ‘post’,

data: user,

dataType:’json’,

success: function (data) {

location.reload()

},

error: function (error) {

alert(error)

}

})

}

Сайт работает на 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({id:authData.id})

if(!user){

await mongo.users.insertOne(authData)

}else{

await mongo.users.updateOne({_id: new ObjectID(user._id)},{$set:{authData}})

}

/*Здесь я использовал jwt, чтобы сделать токен, в принципе можно написать это самому, но суть статьи не в этом*/

const token = await jwt.sign(authData, config.app.secret)

/* Ставлю куку с этим токеном */

ctx.cookies.set(‘tgUser’, token);

ctx.status = 200

ctx.body = {

user: authData

}

/*Теперь я добавлю перед всеми роутами 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

Этот пример чисто демонстративный, для реального сайта его нужно будет допилить.

__________

https://shogenov.com/

___________

Телграм канал — Я — программист!

Шутеечки в канале Дневнике программиста

Чат в телеге Клуб программистов

</p>

Разработка чат-бота (telegram + youtube)

Выходим из приложения:quit Запускаем приложение как демон например на порту 8089:/usr/local/src/tg/bin/telegram-cli --json -k /usr/local/src/tg/tg-server.pub -W -d -P 8089 & Теперь нам необходим скрипт который будет взаимодействовать с telegram-cli. По ключевым словам(telegram-cli php client) на GitHub было найдено готовое решение на PHP. Установка: git clone https://github.com/zyberspace/php-telegram-cli-client cd php-telegram-cli-client curl -sS https://getcomposer.org/installer | php php composer.phar install Создаем файл tg.php со следующим содержанием:

  require('vendor/autoload.php'); $telegram = new ZyberspaceTelegramCliClient('tcp://localhost:8089');  $USERNAME = '';  if($user = $telegram->exec("resolve_username {$USERNAME}")){  if($user->type == 'user'){  $code = mt_rand(10000, 99999); $message = "Hi {$user->first_name}! Your code: {$code}"; if($telegram->exec("msg user#{$user->id} {$message}")){ echo "Send message: Successrn"; } else { echo "Send message: Errorrn"; } }  } else { echo "User {$USERNAME} not found.rn"; }

В переменную $USERNAME вписываем username пользователя которому будет отправлено сообщение с кодом подтверждения. Запускаем скрипт:php tg.php Если все прошло успешно, пользователю будет отправлено сообщение с кодом. На базе данного примера можно легко реализовать регистрацию/авторизацию пользователей через Telegram. Спасибо за внимание!

Дата публикации: 2018-02-08

От автора: разработчики Telegram представили новый виджет для сайтов. С его помощью пользователи мессенджера смогут быстро авторизироваться на интернет-ресурсах, а их владельцы – наладить более тесное общение со своей аудиторией.

Команда мессенджера представила виджет для сайтов. Он позволяет авторизироваться в системе ресурса всего в два клика. Пресс-релиз нового функционала опубликован на официальном блоге Telegram.

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

За историей своих авторизаций пользователь может следить через мобильное приложение Telegram. Соответствующий раздел уже появился в новой версии приложения под Android. После каждого «захода» система мессенджера будет отправлять пользователю сообщение об авторизации на том или ином сайте.

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Источник: //vc.ru/

Редакция: Команда webformyself.

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео TypeScript — String concat()Урок 12. Плагин для Chrome Instant Wireframe –>

Метки:новости

Что же делать и как быть в таких ситуациях?!

Попробуем собрать альтернативный вариант решения данной задачи. Сообщения в телефон приходят не только при помощи SMS и электронной почты. Код доступа можно отправлять через социальные сети и мессенджеры. Разберемся на примере Telegram-бота.

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

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

Хостинг

У данного мессенджера есть ограничения. В РФ он запрещён, это не мешает ему работать через официальные приложения и прокси-сервера, но это определенное ограничение на сервер. Чтобы серверная часть отправки сообщений через telegram-бот работали необходимо чтобы сервер находил вне юрисдикции закона РФ. Возьмём один из самых дешевых вариантов fornex.com. Выбираем виртуальных хостинг, с самым дешёвым тарифом (73 руб/мес).

По ссылке вы ещё получите скидку 15% на виртуальный хостинг: https://fornex.com/code/foxhost/

Нажимаем “Заказать”.

Выбираем страну, где будет располагаться сервер (главное не Россия):

Регистрируемся, оплачиваем заказ на год, выбираем бесплатный домен, который у нас появился за годовую оплату. Ждём активации хостинга и домена.

Как сделать бота в Дискорд

После активации хостинга и домена необходимо перейти в панель вашего хостинга и сгенерировать бесплатный SSL-сертификат. Через какое-то время сертификат установится и сайт станет доступным по https.

Telegram-бот

Тем временем, пока мы ждём идём к https://telegram.me/botfather.

Создаем своего бота.

Пишем команду /newbot

Придумываем имя.

Получаем токен для получения доступа.

Создаем вебхук

Вебхук — это ретранслятор, который все запросы от бота будет передавать на адрес, указанный при регистрации вебхука. Зарегистрировать вебхук просто, нужно отправить запрос вида https: //api.telegram.org/bot~token~/setWebhook?url=https: //example.ru/path, где:

https: //example.ru/ — это ссылка на ваш сайт, куда будет перенаправлять бот запросы.

~token~ — это токен, который вы получили при регистрации своего бота.

path — это часть url, на которую будут приходить обращения, в нашем случае path = “api/”.

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

Библиотека

Для работы с API можно взять готовую библиотеку, которых масса. Для примера возьмём эту: https://github.com/TelegramBot/Api.

Напишем код, для отправки сообщений. Создаём папку api в нашем проекте. В папке api создаем index.php.

В файле index.php пишем код:

Так по обращению к адресу https://ваш.сайт/api/?phone=телефон в telegram отправляется сообщение с кодом авторизации.

Тест

Загружаем все данные на сайт и получаем:

Fatal error: Uncaught TelegramBotApiHttpException: Bad Request: chat not found.

В чём проблема? А проблема состоит в том, что для отправки сообщений телеграмм-бот должен знать не номер телефона, а chat_id, который создаётся только после разрешения пользователем отправки сообщений.

Как решить проблему?

Есть три варианта действий:

1. Интегрирем в наш сайт/приложение виджет авторизации, которая описана в официальной документации: https://core.telegram.org/widgets/login

2. Пересмотрим логику работы приложения и заставим изначально пообщаться с ботом для регистрации.

3. Возвращаемся к платному варианту с SMS.

Выбираем решение 2

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

Третий вариант всё ещё платный.

Чтобы авторизоваться в сервисе пользователь должен написать чат-боту команду /login, в ответ чат-бот генерирует уникальную уникальную ссылку для авторизации, по переходу на которую пользователь автоматически авторизируется.

Пишем описание команды в тот же самый /api/index.php:

Загружаем на сайт.

Теперь при отправке команды /login мы получаем ответ в виде:

Chat id: chat_id

Username: ваш_логин

Link for auth: http://ваш.сайт/login/?accept=хэш_созданный_из_вашего_логина

Теперь мы знаем пользовательский chat_id и username.

В методе login мы можем добавлять пользователя в базу данных, куда записываем chat_id, логин и accept

При переходе на страницу http://ваш.сайт/login/ мы проверяем верность accept. Если accept верный, то он авторизуется.

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

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

Минусы

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

Мы становимся заложниками одного мессенджера, что противоречит нашей задумке.

Плюсы

Если вам не важен номер телефона, то авторизация вообще не требует ввода никаких данных. Всё что нужно пользователю – ввести команду /login и ты уже в системе.

Бесплатно.

Резюме

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

Задуманная форма для входа.

Новая форма входа.

Используемые источники:

https://medium.com/@alexandershogenov/делаем-oauth-авторизацию-telegram-на-своём-сайте-74d0d63095b0
https://web-wost.ru/avtorizaciya-cherez-telegram-bota/
https://habr.com/ru/post/264301/
https://webformyself.com/telegram-login-bystryj-vidzhet-dlya-avtorizacii-polzovatelej-messendzhera/
https://zen.yandex.com/media/id/5ad4abdefd96b135b7cf5e4f/avtorizaciia-cherez-telegrambota-5d05e4e454904b0d650954b8

Авторизация через Telegram-бота