Telegram Login for Websites

Telegram Login for Websites

Today we present a Telegram Login Widget for external websites. When you use Telegram login for the first time, our widget asks for your phone number and sends you a confirmation message via Telegram to authorize your browser.

Once this is done, you get a two-click login on every website that supports signing in with Telegram. Try it here:

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

Logging in will send your Telegram name, username, and your profile picture to the website owner. Your phone number remains hidden. The website can also request permission to send you messages from their bot.

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

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

Permission to speak

Telegram bots are a powerful communication tool, but until today they couldn't start a conversation. Even if you wanted them to reach out to you, you had to chat them up first.

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

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

With the new login widget, moving from interacting with a website to a conversation on Telegram becomes completely frictionless.

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

Message from a bot

The potential use cases are limitless. Bots could be used for providing customer support, accepting payments, or sending notifications of any kind – including account statements, shipment tracking, flight updates, and so much more.

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

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.

Оставайтесь под контролем

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

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

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

• Check out the widget documentation for developers
• Feel free to play with a demo widget here

February 6, 2018,

The Telegram Team

Этот простой инструмент для входа в систему - это первый этап проекта Telegram ID, который мы будем развертывать в течение всего этого года.

• Проверьте документацию виджета для разработчиков
• Не стесняйтесь играть с демо-виджетами здесь

6 февраля 2018 года,

Команда Telegram

P.S.

Don‘t miss the other updates we’ve launched in the last few days:

• Streaming and Auto-Night Mode on Android.
• Telegram X for iOS and Android, two new experimental official apps.
• TDLib, a powerful and easy-to-use tool to make custom Telegram apps.

Постскриптум

Не пропустите другие обновления, которые мы запустили за последние несколько дней:

• Streaming и Auto-Night Mode на Android.
• Telegram X для iOS и Android, два новых экспериментальных официальных приложения.
• TDLib, мощный и простой в использовании инструмент для создания пользовательских приложений Telegram.

____________________________________________________________________________

Telegram Login Widget

The Telegram login widget is a simple way to authorize users on your website.

Check out this post for a general overview of the widget.

Setting up a bot

To use the login widget, you'll need a Telegram bot.

We strongly recommend that the profile picture of the bot you use for authorization corresponds with your website‘s logo, and that the bot’s name reflects that connection.

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

Чтобы использовать виджет входа, вам понадобится бот Telegram.

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

Users will see this message when they log into your website:

It is more likely that users will log in if your bot has a name and logo they expect to see.

Linking your domain to the bot

Once you have chosen a bot, send the /setdomain command to @Botfather to link your website's domain to the bot. Then configure your widget below and embed the code on your website.

Пользователи будут видеть это сообщение при входе на ваш сайт:

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

Связывание вашего домена с ботом

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

Widget configuration

Bot Username:

Log in below to load your bots with linked domains

Button Style:

Large

Medium

Small

Show User Photo

Corner Radius:

Default

Custom

Authorization Type:

Callback

Redirect to URL

Request Access:

to send messages from your bot

Embed Code:

Конфигурация виджета

Имя пользователя:

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

Стиль кнопки:

большой

средний

Маленький

Показать фото пользователя

Угловой радиус:

По умолчанию

изготовленный на заказ

Тип авторизации:

Перезвони

Перенаправление на URL

Запрос доступа:

отправлять сообщения от своего бота

Код для вставки:

Receiving authorization data

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

• by redirecting the user to the URL specified in the data-auth-url attribute with the following parameters: id, first_name, last_name, username, photo_url, auth_date and hash;
• by calling the callback function data-onauth with the JSON-object containing id, first_name, last_name, username, photo_url, auth_date and hash fields.

Получение данных авторизации

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

• перенаправляя пользователя к URL-адресу, указанному в атрибуте data-auth-url, со следующими параметрами: id, first_name, last_name, username, photo_url, auth_date и hash;
• путем вызова функции callback-onauth с JSON-объектом, содержащим id, first_name, last_name, имя пользователя, photo_url, auth_date и хэш-поля.

Checking authorization

You can verify the authentication and the integrity of the data received by comparing the received hash parameter with the hexadecimal representation of the HMAC-SHA-256 signature of the data-check-string with the SHA256hash of the bot's token used as a secret key.

Data-check-string is a concatenation of all received fields, sorted in alphabetical order, in the format key=<value>with a line feed character ('\n', 0xA0) used as separator – e.g., 'auth_date=<auth_date>\nfirst_name=<first_name>\nid=<id>\nusername=<username>'.

The full check might look like:

data_check_string = ...
secret_key = SHA256(<bot_token>)
if (hex(HMAC_SHA256(data_check_string, secret_key)) == hash) {
  // data is from Telegram
}

To prevent the use of outdated data, you can additionally check the auth_date field, which contains a Unix timestamp when the authentication was received.

Проверка авторизации

Вы можете проверить аутентификацию и целостность полученных данных путем сравнения полученного хэш-параметра с шестнадцатеричным представлением подписи HMAC-SHA-256 строки проверки данных с помощью SHA256hash токена бота, используемого в качестве секретного ключа.

Строка проверки данных представляет собой конкатенацию всех полученных полей, отсортированных в алфавитном порядке, в формате key = <значение> с символом перевода строки ('\ n', 0xA0), используемым в качестве разделителя - например, 'auth_date = <auth_date > \ nfirst_name = <first_name> \ нидь = <идентификатор> \ nИмя пользователя = <имя пользователя>».

Полная проверка может выглядеть так:

Чтобы предотвратить использование устаревших данных, вы можете дополнительно проверить поле auth_date, которое содержит отметку времени Unix при получении аутентификации.

Sample implementation

You can find sample PHP code for checking authorization and receiving data about a logged in user on this page.

Пример внедрения

Вы можете найти образец кода PHP для проверки авторизации и получения данных о зарегистрированном пользователе на этой странице.