javascript - 将 Google 身份验证添加到 Firebase 实时数据库

标签 javascript firebase vue.js firebase-realtime-database firebase-authentication

我正在使用 Firebase 实时数据库,我需要为其添加用户身份验证。用户只能以提供商身份登录 Google。

当前数据库模式:

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

新的模式应该是这样的:

// These rules grant access to a node matching the authenticated
// user's ID from the Firebase auth token
{
  "rules": {
    "users": {
      "$uid": {
        ".read": "$uid === auth.uid",
        ".write": "$uid === auth.uid"
      }
    }
  }
}

在我的案例中,我应该使用什么来进行身份验证? userID、Google providerIDtoken like described here

这是无认证存储数据的函数:

 createMeetup ({commit, getters}, payload) {
      console.log('index.js -> createMeetup')
      const meetup = {
        title: payload.title,
      }
      let imageUrl
      let key
      firebase.database().ref('meetups').push(meetup)
        .then((data) => {
          key = data.key
          return key
        })
        .then(() => {
          commit('createMeetup', {
            ...meetup,
            imageUrl: imageUrl,
            id: key
          })
        })
        .catch((error) => {
          console.log(error)
        })
    },

最佳答案

对于您的用例,您似乎需要整理几个步骤。我猜您的应用程序已经可以连接/使用 Firebase,但本质上就是这样:

第 1 步 - 连接

像往常一样使用您的 API key /配置连接到 Firebase,应该如下所示。

firebase.initializeApp(config)

另请参阅:https://firebase.google.com/docs/web/setup

您可能已经在某个地方找到了它。这不会改变,但如果您按照所述应用规则,您的用户将无法在连接后使用 Firebase。

第 2 步 - 身份验证

这基本上是告诉 Firebase 谁连接了。这必须使用 Firebase 可以验证的 token /方法来完成。使用 Google ID 是最常见的方法。

使用现有的 Google ID/用户登录名

// Initialize a generate OAuth provider with a `google.com` providerId.
var provider = new firebase.auth.OAuthProvider('google.com');
var credential = provider.credential(googleUser.getAuthResponse().id_token);
firebase.auth().signInWithCredential(credential)

另请参阅:https://firebase.google.com/docs/reference/js/firebase.auth.OAuthProvider#credential

或者让 Firebase SDK 做登录流程

var provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider).then(function(result) {
  // This gives you a Google Access Token. You can use it to access the Google API.
  var token = result.credential.accessToken;
  // The signed-in user info.
  var user = result.user;
  // ...
})

另请参阅:https://firebase.google.com/docs/auth/web/google-signin

您引用的文档首选/建议最后一个选项。

如果如您所述,用户已经可以使用 Google 登录到您的应用以使用其他功能,那么您应该已经在某处设置了登录流程。根据您的情况,为了简化您的应用程序,让 Firebase SDK/库接管此过程可能是明智的。

第 3 步 - 使用数据库

最后,在对用户进行身份验证并应用您建议的规则后,您还需要确保写入的路径在当前用户可访问的路径范围内。您可以将它放在一个简单的函数中以使其更容易。

const getUserRef = (ref) => {
  const user = firebase.auth().currentUser;
  return firebase.database().ref(`/users/${user.uid}/${ref}/`);
}

当然,您不应该在每次想要获取数据库引用时都检索当前用户,但我认为这清楚地说明了需要采取的步骤。

关于javascript - 将 Google 身份验证添加到 Firebase 实时数据库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53600301/

相关文章:

javascript - 如何在 vue js 中获取 ion-radio 值 - ionic

javascript - 从字符串中获取特定值

arrays - 如何获取三个包含三个或更少对象的数组?

javascript - Firebase Web 注销不会发送任何 XHR

javascript - 在 VueJS 中评估数组中的数组

javascript - 如何在 Vuejs 2 中导入组件

javascript - 如果 TD 不包含值,多个复选框会隐藏行

javascript - 选择所有分页并显示每页结果,同时使用 JQuery 禁用和启用按钮

javascript - Chrome Javascript 日期上午 |下午

ios - 按下按钮时如何添加谷歌地图标记?