Как включить виджет входа в Telegram в приложение Angular? - PullRequest
Новая
       97

Как включить виджет входа в Telegram в приложение Angular?

0 голосов
/ 01 июня 2019

Я хочу включить виджет входа в Telegram в моем приложении Angular.Для этого вам необходимо включить следующий скрипт: 

<script async src="https://telegram.org/js/telegram-widget.js?5"
  data-telegram-login="bot_name" data-size="large"
  data-auth-url="https://myurl.example/api/telegram"
  data-request-access="write"></script>

Встраивание скриптов в шаблоны Angular не допускается , оно будет просто удалено.(Тем не менее, можно включить тег сценария через этот хак .)

Есть ли нехакерский способ включения этого виджета?

Ответы [ 2 ]

1 голос
/ 01 июня 2019

Не отображать script теги в коде шаблона - это действительно выбор дизайна от команды Angular.

Способ сделать это так:

  1. Добавьте ваши сценарии в index.html - актуально только в том случае, если имеет смысл загружать сценарий глобально.
  2. Или Добавьте ваш скрипт программно . Ссылка, на которую вы ссылаетесь, может быть решением, но вносит дополнительные сложности, поскольку она берет входные данные из кода шаблона. Более короткое решение дается здесь, когда вы довольны вводом параметров со стороны кода (и полный выпуск также поучителен): Github issue # 4903 . Предупреждение: добавление к head не подходит, если вы не удалите его в OnDestroy. Предпочитайте добавлять в правильный элемент DOM вашего компонента.
0 голосов
/ 13 июня 2019

Я создал следующий компонент для виджета входа в Telegram:

Компонент динамически создает тег сценария и добавляет функцию обратного вызова loginViaTelegram(user): 

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

}

Я добавил функцию обратного вызова loginViaTelegram к объекту window (глобальное пространство) в выделенной службе: 

@Injectable({
  providedIn: 'root'
})
export class TelegramLoginService {    
  init() {
    window['loginViaTelegram'] = loginData => this.loginViaTelegram(loginData);
  }

  private loginViaTelegram(loginData: TelegramLoginData) {
    // If the login should trigger view changes, run it within the NgZone.
    this.ngZone.run(() => process(loginRequest));
  }
}
...