Firebase React Native:脱机身份验证

我在React Native iOS应用程序中使用Firebase,主要用于存储用户数据和用户身份验证,当设备实际具有可用的网络连接时,该工作非常有效.

说到Firebase的离线功能,它看起来像这样:

问题:用户启动没有网络连接的应用程序无法执行任何操作,因为他们从未登录

以下是重现此行为的步骤:

第1步:注销用户启动具有网络连接的应用程序

>用户点击“Facebook登录”按钮
> Firebase使用Facebook身份验证登录
使用登录用户作为参数调用> onAuthStateChanged (user)
> user.getToken()获取的令牌被发送到我的服务器,该服务器生成一个自定义令牌(generatedToken),可用于使用signInWithCustomToken (generatedToken)登录Firebase身份验证,因此保存在本地存储中
>用户愉快地读取和写入Firebase数据库,更改立即与Firebase服务器同步

第2步:登录用户启动具有网络连接的应用程序

> app意识到本地存储中有一个generatedToken
> generatedToken用于firebase.auth().signInWithCustomToken(..)
>(与步骤1.3相同)
>(与步骤1.4相同)
>(与步骤1.5相同)
>网络连接丢失:用户仍然登录(onAuthStateChanged(用户)没有作为用户调用null,就像manually signing out之后的情况一样)因此仍然可以读取&写入Firebase数据库
>恢复网络连接:更改与Firebase服务器同步

第3步:登录用户启动应用程序,无需网络连接

> app意识到本地存储中有一个generatedToken
> generatedToken用于firebase.auth().signInWithCustomToken(..)
> firebase.auth().signInWithCustomToken(..)失败,因为没有网络连接
>使用null作为用户调用onAuthStateChanged(user)
>用户根本无法使用Firebase数据库,因为所有读/写请求都因缺少身份验证而失败

尝试的解决方

>在初始化FIRApp之后,在Objective-C / AppDelegate.m中将persistenceEnabled设置为true:

(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // ...
  [FIRApp configure];
  [FIRDatabase database].persistenceEnabled = YES;
  // ...
}

这不会导致期望的结果,并且(至少在我的情况下)在Firebase的行为方面不会改变任何内容.
> —你在这里的建议—

感谢您的投入!

虽然Firebase JS SDK很棒并且通常在React Native中运行,但它主要是为Web平台构建的,因此不是在React Native环境中使用的最全面的解决方案,例如有很多Firebase服务,您将无法使用Web SDK.参见比较表 here.

但是,您可以使用原生Android / iOS Firebase SDK运行,并在它们和JavaScript代码之间建立桥梁(即反应原生模块).

值得庆幸的是,您不必自己实现,因为已经有模块可以为您执行此操作:

例如,react-native-firebase在JavaScript端镜像Web SDK API,但在本机端使用本机Android& iOS Firebase SDK.它与您可能已经实现的任何现有Firebase Web SDK逻辑兼容,并且旨在作为Web SDK的替代品.

该库支持具有auth持久性和脱机功能的用例:

import firebase from 'react-native-firebase';

const instance = firebase.initializeApp({
  persistence: true
});

// can also use `keepSynced` / `setPersistence` methods:
// instance.database().ref('/someref').keepSynced();
// instance.database().setPersistence(true);

export default instance;

(免责声明:我是react-native-firebase的作者)

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...