How to use Telegram authorization in Angular app

Question

I'm trying to implement telegram authorization in angular. I have created bot and put correct host settings in my Windows. Following this solution, my code looks the same. But it gives me an error

Refused to frame 'https://oauth.telegram.org/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors http://host.de".

@Component({
  selector: 'app-telegram-login-widget',
  template: `    
<div #script style.display="none">
  <ng-content></ng-content>
</div>`,
  styleUrls: ['./telegram-login-widget.component.css']
})
export class TelegramLoginWidgetComponent implements AfterViewInit {

  @ViewChild('script', {static: true}) script: ElementRef;

  convertToScript() {
    const element = this.script.nativeElement;
    const script = document.createElement('script');
    script.src = 'https://telegram.org/js/telegram-widget.js?5';
    script.setAttribute('data-telegram-login', environment.telegramBotName);
    script.setAttribute('data-size', 'large');
    // Callback function in global scope
    script.setAttribute('data-onauth', 'loginViaTelegram(user)');
    script.setAttribute('data-request-access', 'write');
    element.parentElement.replaceChild(script, element);
  }

  ngAfterViewInit() {
    this.convertToScript();
  }

}

score 2 · Accepted Answer · answered Jan 28 '21 at 23:09

The Content-Security-Policy of the Telegram widget only allows a limited list of hosts to include it as an iframe.

To add your domain to the allow-list you have to link the bot to your domain, see docs:

Once you have chosen a bot, send the /setdomain command to @Botfather to link your website's domain to the bot.

How to use Telegram authorization in Angular app

1 Answers1