时间戳

首页 > 解决方案 > 将 Google 身份验证添加到 Firebase 实时数据库

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

问题描述

我正在使用 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 providerID或此处描述的令牌？

这是无需身份验证即可存储数据的功能：

 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)
        })
    },

标签： javascriptfirebasevue.jsfirebase-realtime-databasefirebase-authentication

解决方案

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

第 1 步 - 连接

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

firebase.initializeApp(config)

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

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

第 2 步 - 身份验证

这基本上是在告诉 Firebase 谁已连接。这必须使用 Firebase 可以验证的令牌/方法来完成。使用 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}/`);
}

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

推荐阅读