Firebase 和 VueJS：如何处理使用 Google 登录但未在我的应用中注册的用户？用户资料管理

Posted 2023-02-16

【中文标题】Firebase 和 VueJS：如何处理使用 Google 登录但未在我的应用中注册的用户？用户资料管理

【英文标题】：Firebase and VueJS: How to handle users that login with Google and don't register in my app? User profile management

【发布时间】：2020-11-29 04:21:33

【问题描述】：

我有一个带有登录页面和注册页面的应用程序。两个页面都有一个“使用 Google 登录”按钮，以及为不想使用 Google 登录的用户提供的常规登录名和密码输入表单。我还使用 FireStore 为注册用户创建用户配置文件。当用户也登录时，应用程序将查询用户的个人资料以在整个应用程序中使用。这一切都很好。

我注意到谷歌用户不需要“注册”......他仍然可以点击登录按钮，它会自动“注册”，因为这就是 Google Auth Provider 的工作方式。然而，由于他没有“注册”，他还没有个人资料。在这种情况下，我必须编写一些逻辑，以便为 Google 用户创建个人资料。虽然这个逻辑有效，但我只是想知道这是否是最好的方法。是否有针对跳过传统“注册”页面的人处理 Google/Social 登录的最佳做法？我知道大多数人可能会前往注册页面并进行注册，但毫无疑问会有一些人会跳过该页面并进入 LOGIN 页面并以这种方式通过 Google 登录。

以下是我使用 Google 登录按钮处理登录页面的方式：

login.vue

async logInWithGoogle() 
      try 
        const provider = new this.$fireAuthObj.GoogleAuthProvider()
        const userCredentials = await this.$fireAuth.signInWithRedirect(
          provider
        ) ....

然后在我的 Store（在我的例子中，Vuex 状态管理模式）中，我有以下操作：

store.js

首先，这个 onAuthStateChanged 观察者会注意到新的用户状态并执行以下代码：

  async onAuthStateChangedAction( commit, dispatch ,  authUser ) 
    if (authUser) 
      console.log('user committing from onAuthStateChangedAction...')
      commit('SET_CURRENT_USER', authUser)

      console.log(
        'fetchUserProfile action dispatching from onAuthStateChangedAction...'
      )
      await dispatch('fetchUserProfile', authUser)
     else 
      dispatch('logOutUser')
    
  

onAuthStateChanged 观察者将获取用户的个人资料（这是我关心的逻辑...不确定这是否是处理用户首次通过 Google 登录并绕过注册的理想方式：

 async fetchUserProfile( commit , user) 
    try 
      const docRef = this.$fireStore.collection('users').doc(user.uid)

      const profile = await docRef.get()
      if (profile.exists) 
        commit('SET_USER_PROFILE', await profile.data())
        console.log(
          'user profile EXISTS and set from fetchUserProfile action'
        )
       else 
        console.log('profile does not exist! Creating...')
        await docRef.set(
          displayName: user.displayName,
          email: user.email,
          uid: user.uid,
          photoUrl: user.photoURL,
          providerId: user.providerData[0].providerId,
          createdAt: this.$fireStoreObj.FieldValue.serverTimestamp()
        )
        const p = await docRef.get()
        commit('SET_USER_PROFILE', await p.data())
        console.log('user profile set')
      
     catch (error) 
      console.log('can not fetch profile', error)
    
  ,

感谢任何提示或保证我在处理此问题时走的是正确（或错误）的道路。谢谢！

【参考方案1】：

为什么不用用户的 uid 创建一个空文档并提示他们“完成他们的个人资料”？在他们这样做之前，强制将他们无限期地重定向回个人资料页面。

【讨论】：

我个人认为这不是一个好的用户体验。我想让他们使用这个应用程序变得简单，我希望他们留下来。他们随时可以在准备好后编辑他们的个人资料。谢谢你的建议！