Angular16中自定义asl-google-signin-button点击事件失效求助

不用试图触发原生asl-google-signin-button的点击事件（它被封装在iframe里，受同源策略限制无法直接操作），直接调用库提供的SocialAuthService登录方法即可实现自定义按钮功能，步骤如下：

实现步骤 #

• 在组件中注入SocialAuthService和GoogleLoginProvider
• 自定义按钮绑定点击事件，触发登录逻辑
• 订阅登录状态变化处理回调

组件代码示例 #

import { Component, OnInit } from '@angular/core';
import { SocialAuthService, GoogleLoginProvider, SocialUser } from '@abacritt/angularx-social-login';

@Component({
  selector: 'app-google-login',
  templateUrl: './google-login.component.html',
  styleUrls: ['./google-login.component.css']
})
export class GoogleLoginComponent implements OnInit {
  user?: SocialUser;
  isLoggedIn = false;

  constructor(private authService: SocialAuthService) {}

  ngOnInit(): void {
    // 监听登录状态变化
    this.authService.authState.subscribe((user) => {
      this.user = user;
      this.isLoggedIn = (user != null);
      // 此处处理登录成功后的逻辑，比如获取用户信息、页面跳转等
    });
  }

  // 自定义按钮点击触发的登录方法
  signInWithGoogle(): void {
    this.authService.signIn(GoogleLoginProvider.PROVIDER_ID);
  }
}

模板代码示例 #

<!-- 自定义样式的登录按钮 -->
<button class="custom-google-btn" (click)="signInWithGoogle()">
  <span>使用谷歌账号登录</span>
</button>

<!-- 无需保留原生asl-google-signin-button，直接删除即可 -->

补充说明 #

这种方式是库官方推荐的交互方案，完全绕开了iframe的限制，同时能完整获取登录后的用户信息与状态，比试图操作iframe内的原生按钮更稳定可靠。如果已配置好谷歌登录的client ID等参数，无需额外修改，保持原有配置即可。

内容的提问来源于stack exchange，提问作者Pedro Martins