javascript - 如何在 Angular 应用程序中使用 Telegram 授权

Question

我正在尝试以 Angular 实现 Telegram 授权。我已经创建了机器人并在我的 Windows 中放置了正确的主机设置。继此solution ，我的代码看起来是一样的。但它给了我一个错误

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();
  }

}

Answer 1

Content-Security-Policy Telegram 小部件的仅允许有限的主机列表将其包含为 iframe。

要将您的域添加到允许列表，您必须将机器人链接到您的域，请参阅 docs :

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