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

时间:2018-12-03 19:09:36

标签: 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"
      }
    }
  }
}

在我的情况下,我应该使用什么进行身份验证? 用户ID ,Google 提供商ID 还是token 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)
        })
    },

4 个答案:

答案 0 :(得分:2)

您可以允许用户使用多种方法登录/认证。然后,您可以按照以下说明将它们合并到一个帐户中:

https://firebase.google.com/docs/auth/web/account-linking

所以实际上可以归结为两个选择:

  1. 允许用户使用Facebook,Google,Github,基本用户名/密码等多种方法登录。
  2. 或者仅允许一种登录方式,例如Google。

您选择的任何选项都将帮助您确定要使用的ID。

答案 1 :(得分:1)

对于您的用例,似乎您需要整理一些步骤。我猜您的应用程序已经可以连接/使用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}/`);
}

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

答案 2 :(得分:0)

您问题中的身份验证规则仅说明用户可以读取/写入自己的(可能是)用户数据。

我假设您是在寻找一种授权用户创建聚会数据的解决方案,并且应该创建类似于以下内容的规则:

这些规则允许任何已登录用户创建聚会

function copySuccess(msg) {
    // If file successfully copied
    const success = document.createElement('div');
    success.classList.add('payment__success');
    let successBody = document.createElement('div'),
        successPrimary = document.createElement('span'),
        successSecondary = document.createElement('span');
    successBody.classList.add('payment__body');
    successPrimary.classList.add('payment__body--primary');
    successSecondary.classList.add('payment__body--secondary');
    success.appendChild(successBody);
    successBody.appendChild(successPrimary);
    successBody.appendChild(successSecondary);
    document.body.appendChild(success);

    successPrimary.innerText = 'Successfully copied:';
    successSecondary.innerText = msg;

    function removeMsg() {
        document.body.removeChild(success);
    }

    let myVar = setTimeout(removeMsg, 2000);

    clearTimeout(myVar);
}

将新的Meetup数据推送到数据库的代码段将自动尝试成功或失败,具体取决于用户是否已登录。您无需专门告诉Firebase用户登录的方式。FirebaseSDK将为您处理身份验证。

但是,如果您要做,希望根据身份验证所使用的登录类型提供不同的机制,则可以在规则中进行检查。例如,如果您要确保用户不只是“匿名”登录。

请参阅文档:https://firebase.google.com/docs/database/security/user-security#section-variable

答案 3 :(得分:0)

您在此处介绍过的文档:Authenticate Using Google Sign-In with JavaScript

  

通过将Google登录功能集成到您的应用中,您可以让用户使用其Google帐户向Firebase进行身份验证。您可以使用Firebase SDK进行登录流程,也可以通过手动执行Google登录流程并将生成的ID令牌传递给Firebase来集成Google登录。

开始之前:

  • 将Firebase添加到您的JavaScript项目中。
  • 在Firebase控制台中启用Google登录:
  • 在Firebase控制台中,打开“身份验证”部分。
  • 在“登录方法”选项卡上,启用Google登录方法,然后单击“保存”。
  • 使用Firebase SDK处理登录流程 如果您要构建网络应用程序,则最简单的身份验证方法是 Firebase使用其Google帐户来处理登录流程, Firebase JavaScript SDK。 (如果您想在Node.js中对用户进行身份验证,或者 其他非浏览器环境,则必须手动处理登录流程。)

要使用Firebase JavaScript SDK处理登录流程,请按照以下步骤操作:

创建Google提供程序对象的实例:

var provider = new firebase.auth.GoogleAuthProvider();

可选:指定要从身份验证提供程序请求的其他OAuth 2.0范围。要添加范围,请调用addScope()

例如:

provider.addScope('https://www.googleapis.com/auth/contacts.readonly');

请参阅身份验证提供程序文档。 可选:要在不显式传递相关自定义OAuth参数的情况下将提供者的OAuth流本地化为用户的首选语言,请在启动OAuth流之前更新Auth实例上的语言代码。

例如:

firebase.auth().languageCode = 'pt';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();

可选:指定要与OAuth请求一起发送的其他自定义OAuth提供程序参数。要添加自定义参数,请使用包含OAuth提供程序文档中指定的键和相应值的对象在初始化的提供程序上调用setCustomParameters。

例如:

provider.setCustomParameters({
    'login_hint': 'user@example.com'
});

不允许使用保留的必需OAuth参数,这些参数将被忽略。有关更多详细信息,请参见身份验证提供程序参考。 使用Google提供程序对象向Firebase进行身份验证。您可以通过打开弹出窗口或重定向到登录页面来提示用户使用其Google帐户登录。在移动设备上首选重定向方法。

要使用弹出窗口登录,请调用signInWithPopup:

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;
    // ...

}).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
});

还要注意,您可以检索Google提供程序的OAuth令牌,该令牌可用于使用Google API提取其他数据。 这也是您可以捕获和处理错误的地方。有关错误代码的列表,请查看Auth Reference Docs。

要通过重定向到登录页面登录,请调用signInWithRedirect:

firebase.auth().signInWithRedirect(provider);

然后,您还可以在页面加载时通过调用getRedirectResult()来检索Google提供程序的OAuth令牌:

firebase.auth().getRedirectResult().then(function(result) {
    if (result.credential) {
        // 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;
}).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
});