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

Question

我正在尝试在 angular 中实施电报授权。我已经创建了 bot 并在我的 Windows 中设置了正确的主机设置。在这个之后，我的代码看起来是一样的。但它给了我一个错误

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

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

要将您的域添加到允许列表，您必须 link 将 bot 添加到您的域，请参阅 docs:

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

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

How to use Telegram authorization in Angular app

javascript

content-security-policy

typescript

telegram

angular