Angular集成Facebook SSO调用Auth.federatedSignIn时遇token未定义错误

调用Auth.federatedSignIn(provider)实现Facebook单点登录时，触发以下错误：

ERROR Error: Uncaught (in promise): 
TypeError: Cannot read properties of undefined (reading 'token')

相关代码 #

signup.page.ts

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { Router } from '@angular/router';
import { Amplify, Auth, Hub } from 'aws-amplify';
import { CognitoHostedUIIdentityProvider } from '@aws-amplify/auth';
import awsConfig from '../../aws-exports';

Amplify.configure(awsConfig);

@Component({
  selector: 'app-signup',
  templateUrl: './signup.page.html',
  styleUrls: ['./signup.page.scss'],
  standalone: true,
  imports: [IonicModule, CommonModule, FormsModule],
})
export class SignupPage implements OnInit {
  constructor(private router: Router) {}
  user: any;
  customState: any;

  ngOnInit() {
    Hub.listen('auth', ({ payload: { event, data } }) => {
      switch (event) {
        case 'signIn':
          this.setUser(data);
          break;
        case 'signOut':
          this.setUser(null);
          break;
        case 'customOAuthState':
          this.setCustomState(data);
          break;
      }
      if (data.payload.event === 'signIn_failure') {
        console.log(data);
      }
    });
    Auth.currentAuthenticatedUser()
      .then((currentUser) => this.setUser(currentUser))
      .catch(() => console.log('Not signed in'));
  }

  openHostedUI(): void {
    Auth.federatedSignIn();
  }

  openFederatedSignIn(provider: any): void {
    Auth.federatedSignIn(provider);
  }

  setUser(user: any) {
    this.user = user;
  }

  setCustomState(customState: any) {
    this.customState = customState;
  }

  signup() {
    alert('Redirecting to Tabs page...');
    this.router.navigate(['/tabs/tab1']);
  }
}

signup.page.html

<ion-button
  (click)="openFederatedSignIn('Facebook')"
  expand="block"
  fill="outline"
  color="dark"
>

解决方向 #

1. 修正提供商参数传递方式
   不要直接传字符串'Facebook'，改用官方枚举值：

   • 在组件类中暴露枚举：

     CognitoHostedUIIdentityProvider = CognitoHostedUIIdentityProvider;
     

   • 修改HTML调用：

     <ion-button
       (click)="openFederatedSignIn(CognitoHostedUIIdentityProvider.Facebook)"
       expand="block"
       fill="outline"
       color="dark"
     >
     

2. 检查AWS Amplify OAuth配置

   • 确认aws-exports.js中oauth字段的redirectSignIn、redirectSignOut与Facebook开发者平台的Valid OAuth Redirect URIs完全一致
   • 确保oauth.scopes包含Facebook所需权限（如public_profile、email）
   • 验证oauth.providers中Facebook的clientId和authorizeUrl配置正确

3. 修复Hub监听逻辑的潜在错误
   当前代码中data.payload.event的判断可能因event类型不同导致data.payload未定义，调整为：

   Hub.listen('auth', ({ payload: { event, data } }) => {
     switch (event) {
       case 'signIn':
         this.setUser(data);
         break;
       case 'signOut':
         this.setUser(null);
         break;
       case 'customOAuthState':
         this.setCustomState(data);
         break;
       case 'signIn_failure':
         console.log(data);
         break;
     }
   });
   

4. 验证Facebook应用配置

   • 确认Facebook应用状态为「Live」，沙盒模式可能限制访问
   • 检查Facebook登录产品中是否已正确配置回调地址
   • 确认所需权限已启用并通过审核（公开访问场景需审核）

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