NgxTelegramWidget

Compatible with Angular 14.0.0. This component allows you to implement the Telegram Login Widget without messing up with your code by dynamically inserting scripts.

Installation

NPM

npm install ngx-telegram-widget

Usage

Import it in a module:

import { NgxTelegramWidgetModule }  from 'ngx-telegram-widget';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    NgxTelegramWidgetModule
  ],

Use the component like this:

<ngx-telegram-widget
  [botName]="'SampleBot'"
  [buttonSize]="'large'"
  [showUserPhoto]="true"
  [redirectURL]="'login-with-telegram'">
</ngx-telegram-widget>

API

Inputs

| Input | Type | Default | Required | Description | | ------------- | ------------- | ------------- | ------------- | ------------- | | botName | string | "SampleBot" | yes | Your Telegram BOT's name | | buttonSize | string | "large" | no | Button size (possible values: large, medium, small) | | showUserPhoto | boolean | false | no | Choose whether to show the user profile picture near the button or not | | useCustomCorners | boolean | false | no | Choose whether to use custom round corners or not | | cornerRadius | number | 20 | no | Corner radius: applies only if useCustomCorners is true | | requestMessageAccess | boolean | false | no | If true, it allows your Telegram BOT to send messages to the user (if the user allows you to) | | redirectURL | string | '' | yes | URL to redirect the user to, after a successful auth |

Local usage

Use /setdomain on @BotFather to set a custom domain (example: telegram-login.local)

Register in your hosts file a new DNS entry for telegram-login.local, pointing to 127.0.0.1.

Start ng serve with the following parameters: --host telegram-login.local --port 80. You must start the server on port 80 or 443 for the login button to work, due to Telegram Content Security Policies.