Vue3 + Pinia集成Firebase社交认证（谷歌/苹果登录）求助

先看你现有代码里的谷歌登录逻辑，有个明显问题——拿到登录结果后没把用户数据赋值给userData，而是设成了空对象，这会导致登录后状态不对。另外，Firebase的社交登录（谷歌/苹果）本身就同时支持登录和注册，新用户首次授权会自动创建账号，不用单独写注册逻辑。

下面是修正后的谷歌登录，以及新增的苹果登录实现，直接替换或添加到你的Pinia Store里即可：

export const useUserStore = defineStore("user", {
  state: () => ({
    userData: {},
    loadingUser: false,
    loading: false,
  }),
  actions: {
    // 保留你原有的currentUser、registerUser、loginUser、signOutUser方法
    
    // 修正后的谷歌登录/注册
    async googleSignIn() {
      this.loadingUser = true;
      try {
        const provider = new GoogleAuthProvider();
        // 可选：请求额外用户信息（昵称、头像）
        provider.addScope('profile');
        provider.addScope('email');
        
        const result = await signInWithPopup(auth, provider);
        const user = result.user;
        
        // 同步用户数据到state，和邮箱登录格式保持一致
        this.userData = {
          email: user.email,
          uid: user.uid,
          displayName: user.displayName, // 可选：新增昵称字段
          photoURL: user.photoURL // 可选：新增头像字段
        };
        
        console.log('谷歌登录成功:', user);
        router.push("/");
      } catch (error) {
        console.error('谷歌登录失败:', error.message);
        this.userData = {};
        // 这里可以根据错误码给用户弹出提示，比如账号已绑定其他方式等
      } finally {
        this.loadingUser = false;
      }
    },
    
    // 新增苹果登录/注册
    async appleSignIn() {
      this.loadingUser = true;
      try {
        const provider = new OAuthProvider('apple.com');
        // 苹果登录需明确请求邮箱和姓名权限
        provider.addScope('email');
        provider.addScope('name');
        
        const result = await signInWithPopup(auth, provider);
        const user = result.user;
        
        // 处理苹果用户姓名（仅首次登录返回，后续登录可能无此数据）
        const credential = OAuthProvider.credentialFromResult(result);
        const userInfo = credential?.additionalUserInfo?.profile;
        
        this.userData = {
          email: user.email,
          uid: user.uid,
          displayName: user.displayName || (userInfo?.name?.firstName + ' ' + userInfo?.name?.lastName) || 'Apple User'
        };
        
        console.log('苹果登录成功:', user);
        router.push("/");
      } catch (error) {
        console.error('苹果登录失败:', error.message);
        this.userData = {};
      } finally {
        this.loadingUser = false;
      }
    }
  }
});

关键说明： #

• 谷歌登录修正点：

  1. 从result.user中提取真实用户数据，替换原有的空对象赋值
  2. 可选添加scope请求更多用户信息，丰富userData内容
  3. 优化错误日志，方便定位问题

• 苹果登录注意事项：

  1. 需先在Firebase控制台完成苹果登录配置（上传苹果服务密钥）
  2. 首次登录时苹果会返回用户姓名，后续登录可能不再返回，需做兼容处理
  3. Firebase v9+版本统一用OAuthProvider('apple.com')创建苹果授权实例

• 通用逻辑：
  社交登录成功后，和邮箱登录流程一致更新userData状态并跳转首页；失败时清空userData，保证状态一致性。

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