Question

我正在为像thi这样的有角网站添加电报登录支持

export class TelegramLoginWidgetComponent implements AfterContentInit {

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

  ngAfterContentInit(): void {
    this.convertToScript();
  }

}

脚本加载完美，问题在于脚本加载的iframe引发错误

Refused to display 'https://oauth.telegram.org/embed/...' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors http://127.0.0.1".

Answer 1

当Telegram API使用“使用Telegram登录”构建iframe时，它将发出请求像

https://oauth.telegram.org/embed/csssr_id_dev_bot?origin=http://127.0.0.1

并添加到响应标题Content-Security-Policy: http://127.0.0.1。

因为您是在http://127.0.0.1:3000（或其他开发端口）上运行应用程序政策不匹配（端口问题），并且发生了错误。

如何修复：

1）登录窗口小部件需要非本地主机域，并且无法在自定义帖子上使用，因此localhost:3000或任何其他端口均无法使用。您应该向BotFather注册您的漫游器域才能进行工作（例如my-app-dev.com）。参见https://core.telegram.org/widgets/login#linking-your-domain-to-the-bot。

2）将此域添加到/ etc / hosts行

127.0.0.1 my-app-dev.com

3）在端口80上运行应用程序，这需要sudo或与Docker和端口映射80:3000一起运行（在主机上打开端口80）。

Angular iframe错误中的电报登录小部件

1 个答案: