javascript - Hur man använder Telegram-auktorisering i Angular-app

Jag försöker implementera Telegram-auktorisering i Angular. Jag har skapat en bot och lagt in korrekta värdinställningar i min Windows. Följande lösning, min kod ser likadan ut. Men den ger mig ett fel.

Nekade att rama in 'https://oauth.telegram.org/' eftersom en förfader bryter mot följande direktiv för innehållssäkerhetspolicy: "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();
  }

}

Svar #1

Content-Security-Policy för Telegram-widgeten tillåter endast en begränsad lista över värdar att inkludera den som en iframe.

För att lägga till din domän på tillåt-listan måste du länka boten till din domän, se dokumentationen:

När du har valt en bot, skicka kommandot /setdomain till @Botfather för att länka din webbplats domän till boten.