0

我正在尝试在我的应用程序中使用 Google SSO。为此，我成功地使用了 angularx-social-login库。

但是我也想使用这里解释的谷歌按钮（用谷歌登录）。

但是，会出现以下问题。当用户单击登录按钮，然后使用他的 google 帐户登录时，浏览器 (Chrome) 会抛出以下错误：“popup_blocked_by_browser”。

似乎它发生是因为我在过程中也调用了我的后端，因此弹出窗口被阻止，因为浏览器认为它没有被用户打开。

你能帮忙找到解决这个问题的方法吗？

这里的代码：

<!-- login-component.html -->

<div id="g_id_onload"
   data-client_id="dummyClientCode"
   data-callback="googleLogin"
   data-auto_prompt="false">
</div>
<div class="g_id_signin"
   data-type="standard"
   data-size="large"
   data-theme="outline"
   data-text="sign_in_with"
   data-shape="rectangular"
   data-logo_alignment="left">
</div>

// login-component.ts
import { AfterViewInit, Component, ElementRef, EventEmitter, Output } from 
'@angular/core';

@Component({
  selector: 'demo-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements AfterViewInit {

  // the parent component shall perform api call
  @Output() login = new EventEmitter<null>(); 

  constructor(private elementRef: ElementRef) {
  }

  ngOnInit() {
    (window as any).googleLogin = this.login.emit.bind(this);
  }

  ngAfterViewInit() {
    const s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "https://accounts.google.com/gsi/client";
    this.elementRef.nativeElement.appendChild(s);
}
4

0 回答 0