The Telegram login for your website on Django

An example of the widget.

A few days ago Telegram has presented a login widget for external websites. From now user has a possibility to provide his own data from his Telegram account instead of default registration. The widget looks like a button which developer can configure easily: callback or redirect system of receiving user data, size of a button, a corner radius of button and user’s avatar near a button.

I have created the reusable Django application called django-telegram-login to make implementation of Telegram login as much comfortable and fast as possible.

Disclaimer

The following article consists of introduction to the Telegram login, explanation on how the django-telegram-login works and how to pal up these two things.

The django-telegram-login works with both versions of Python. Also, it was tested with Django 1.11 and Django 2.0 successfully.

The article is full of illustration, pictures and examples.

Initial setup

Make sure you are familiar enough with the subject and have read the Telegram news and the widget documentation.

localtunnel

First of all, Telegram requires a domain of your website. The widget does not get any HTTP responses for the developer but Telegram sends requests to your web address on its own . This is a small problem in local development.

Install the localtunnel package via the npm (install it as well, in case if you do not have it).

$ npm install -g localtunnel

Then, run the localtunnel tool with a port which you are going to use with the manager’s runserver command.

$ lt --port 8000

As a result, you will get a random URL like https://kqmxkdqitb.localtunnel.me. You can share it with anybody on the Internet and he/she will get access to your website on localhost — actually what is needed for the Telegram.

Run the server to make sure you can reach your local website via the tunnel.

$ ./manage.py runserver 0.0.0.0:8000

Look at website address. It is a tunnel address over HTTPS.

Register domain with a bot

Telegram bots are a powerful tool and they provide a feature for the authorization on many websites. The Telegram login also based on bots.

To authorize on your website, you need to create a new Telegram bot and link your website’s address to it.

How to link a domain to the bot.

In the future, the bot’s token and username will be needed for the development and a verification (received Telegram user data).

Install the django-telegram-login

Install the package via pip with the following command.

$ pip install django-telegram-login

Add the application to the installed apps in the settings of the project.

INSTALLED_APPS = [
    ...     
    'django_telegram_login',
]

A good advise is to structure bot’s credentials within settings.py file.

TELEGRAM_BOT_NAME = 'HabrahabrTelegramLoginBot'
TELEGRAM_BOT_TOKEN = '459236585:AAEee0Ba4fRijf1BRNbBO9W-Ar15F2xgV98' TELEGRAM_LOGIN_REDIRECT_URL = 'https://kqmxkdqitb.localtunnel.me/'

(the redirect URL is needed for redirect widget)

Use it in the following way.

from django.conf import settings
bot_name = settings.TELEGRAM_BOT_NAME
bot_token = settings.TELEGRAM_BOT_TOKEN
redirect_url = settings.TELEGRAM_LOGIN_REDIRECT_URL

Widget

Telegram widget embed code is an external JavaScript file that accepts arguments passed in the <script> tag. Then it processes data and responses with the interface of the widget (a button) instantly and user data after authorization by request.

An example of Telegram widget embed code.

Configuring of widget

An example of widget’s interface (the button).

There is no requirements to visit the Telegram widget documentation to use it in development with django-telegram-login. You need only variable constants and a generator functions from the package box.

An example of widget generation.

As you see, there are constants for the widget size and disabling an user photo. Also look that the generators need a bot’s name and a redirect URL for the redirect widget.

Result which is generated result by the callback widget.

Variables and constants

Widgets wait for the following parameters:

1. bot_name — a bot name to inform Telegram which bot needs to handle requests from the website’s widget.
2. redirect_url — the Telegram will request your website to specified redirect URL and pass to it an user data as get parameters.
3. size — a size of the widget (small, medium, large)
4. corner_radius — an optional value in the range from 1 (material) to 20 (bootstrap). By default it is 20.
5. user_photo — developer is able to disable an user photo occurrence near the widget button.

How a generator create the widgets

Nothing special here. A generator contains parts of the widget embed code as the strings separated by variables, formats it according to the parameters that passed to the generator function. This process of widget creation follows the Telegram documentation.

The same as the Telegram widget embed code but generated by an user.

How to render a widget

The idea of rendering the generated widget is to pass its embed code to the view context and then use it within HTML template.

View with generated widget passed to context.

Remember that the generated widget in variable telegram_login_widget is a string, so to say HTML to use it like script — cover it into a autoescape or safe tags.

The widget is going to be rendered from view context.

The result is illustrated below.

Illustration of template interface with callback widget.

All of instructions above are the callback widget type implementation.

If a user authorizes himself via Telegram login at the first time, the confirmation window will appear.

Entering to the Telegram account.

If not, he can expect the following window — just to accept the invitation log in.

Accepting request to log in to website via Telegram account.

During one session, there will be no windows of authorization type. Pressing the button Log in as will raise an alert window with the result on the picture. This result may be configured in function onTelegramAuth(user).

It is a result of pressing the button.

The user is able to disconnect from the website by pressing the according button in the chat with Telegram.

Telegram shows login stats.

For the callback widget, the Telegram returns user first name, last name, id and username.

The another type of the widget — redirect

Illustration of template interface with redirect widget.

In case of the redirection, after pressing the Log in as button the user will be redirected to the specified redirect url (TELEGRAM_LOGIN_REDIRECT_URL). Also the widget will paste user data as get request parameters to the URL.

Pay attention to the URL.

The main point of this type of widget that you need to verify that received data really come real user.

An example of view that accepts redirect URL and verifies receive data.

The function verify_telegram_authentication provided by the django-telegram-admin — checks if received data has really come from the Telegram request but not from the third-party services. The verification is based on the Telegram instructions.

Last examples

The bot’s setting for the django-telegram-admin.

TELEGRAM_BOT_NAME = 'django_telegram_login_bot' 
TELEGRAM_BOT_TOKEN = '459236585:AAEee0Ba4fRijf1BRNbBO9W-Ar15F2xgV98' TELEGRAM_LOGIN_REDIRECT_URL = 'https://iyjjvnvszx.localtunnel.me/'

A template for the callback login widget — callback.html.

A template for the redirect login widget — redirect.html.

The Telegram logic via the django_telegram_login package.

I really appreciate an attention paid on the my article. If you want to use the django-telegram-login package or even to contribute, please visit the project’s Github page.