idpiframe_initialization_ailed与Angular项目失败

Question

我在Google凭据的“授权JavaScript”来源中添加了http://localhost:4200。

但是，当我尝试单击“使用Google登录”时，仍然出现相同的错误。

这是我的代码：

我在index.html文件的js导入下面添加了

<script src="https://apis.google.com/js/platform.js" async defer></script>

组件文件代码：

declare const gapi: any;

clientId:string = '248871214048- 
rkg3p17piu27bl2o58fftdoq43cepb37.apps.googleusercontent.com';
 private scope = [
'profile',
'email',
'https://www.googleapis.com/auth/plus.me',
'https://www.googleapis.com/auth/contacts.readonly',
'https://www.googleapis.com/auth/admin.directory.user.readonly'
 ].join(' ');

public auth2: any;

  public googleInit() {
gapi.load('auth2', () => {
   this.auth2 = gapi.auth2.init({
     client_id: this.clientId,
     cookiepolicy: 'single_host_origin',
     scope: this.scope
   });
   this.attachSignin(this.element.nativeElement.firstChild);
 });
   }

   public attachSignin(element) {
this.auth2.attachClickHandler(element, {},
  (googleUser) => {
    let profile = googleUser.getBasicProfile();
    console.log('Token || ' + googleUser.getAuthResponse().id_token);
    console.log('ID: ' + profile.getId());
    // ...
  }, function (error) {
    console.log(JSON.stringify(error, undefined, 2));
  });
  }

  ngAfterViewInit() {
this.googleInit();
  }