Firebase + React Native：脱机身份验证 [英] Firebase + React Native: Offline authentication

问题描述

我在React Native iOS应用程序中使用Firebase，主要用于存储用户数据和用户身份验证，当设备实际上有可用的网络连接时，该功能非常出色。

$ b

说到Firebase的离线功能，它看起来像这样：

问题：没有网络连接的用户启动应用程序是无法做到的任何事情，因为他们从来没有登录

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

步骤1 ：登出的用户使用网络连接启动应用

1. 用户点击Facebook登录按钮


2. Firebase使用Facebook身份验证登录


3. onAuthStateChanged（user） 正在以登录用户为参数调用 li>
   
4. 由 user.getTo获取的令牌ken（）被发送到我的服务器，该服务器生成一个自定义标记（ generatedToken ），可用于使用 signInWithCustomToken（generatedToken） ，因此可以保存在本地存储中


5. 用户可以快速读取和写入Firebase数据库，更改会立即与Firebase服务器同步

步骤2：登录用户使用网络连接启动应用

1. app在本地存储中实现了 generatedToken
使用

2. generatedToken for firebase.auth（）。signInWithCustomToken（..）


3. （与步骤1.3相同）


4. （与步骤1.4相同）


5. （与步骤1.5相同）
>

6. 网络连接丢失：用户为stil没有使用 null 作为用户调用登录（ onAuthStateChanged（user），就像手动签名出），因此仍然可以阅读&写入Firebase数据库

7. 恢复网络连接：更改与Firebase服务器的同步






步骤3：登录用户启动应用程序而不是网络连接

1. 应用程序意识到有一个 generatedToken 在本地存储中使用
   
2. generatedToken 用于 firebase.auth（）。signInWithCustomToken（..）


3. firebase.auth（）。signInWithCustomToken（..）失败，因为没有网络连接
   
4. onAuthStateChanged（user）被调用时使用 null 作为用户


5. 用户根本无法使用Firebase数据库，因为所有由于缺少认证，读/写请求失败
在Objective-C / AppDel中将 persistenceEnabled 设置为 true 的b


1. egate.m，初始化 FIRApp ：
   
   $ b $

    （BOOL）application ：（UIApplication *）application didFinishLaunchingWithOptions：（NSDictionary *）launchOptions 
    {
    // ... 
    [FIRApp configure]; 
    [FIRDatabase数据库] .persistenceEnabled = YES; 
    // ... 
   } 
     

   这不会导致所需的结果和（至少在我的情况下）不会改变什么，当涉及到Firebase的行为。






感谢您的输入！


在RN中使用web sdk的一个问题是脱机持久性和脱机身份验证状态。虽然Firebase JS SDK在反应本机上工作，但它主要是为网络构建的，而且通常不是针对react-native的最佳解决方案：
$ b Firebase Web SDK完全运行在反应本地的 JS线程，因此影响您的应用程序帧率（链接解释了这一点）。



在我的测试中，原生的firebase SDK比使用web SDK快了2-3倍。 / p>



但是，在潜在的性能影响之外，还有很多功能无法在android / ios设备上的web SDK中使用。例如：
$ b



• AdMob


• FCM /消息传递


• 性能监控


• 远程配置


• 离线功能


• 存储上传/下载$ b
• Firebase崩溃报告


• 分析


• 使用社交身份验证提供程序
  
• 电话/短信认证







最好的方法是使用原生的android / ios的firebase SDK运行，并在它们和你的js代码之间架起一座桥梁即本地模块设置）。



幸运的是，您不必自己实现这个功能，现在已经有模块可以为您做这个了：





react-native-firebase 例如反映了web sdk的api js方面，但在原生端使用原生的android& ios的firebase sdk的。它完全兼容任何现有的firebase js逻辑，你可能已经实现了，并且打算作为web sdk的替代品。





这个库支持你的用例auth持久性和离线功能：



从react-native-firebase导入firebase '; const instance = firebase.initializeApp（{persistence：true}）; //也可以使用`keepSynced` /`setPersistence`方法：// instance.database（）。ref（'/ someref'）。keepSynced（）; // instance.database（）。setPersistence（true）;导出默认实例;


$ b $ （声明：我是react-native-firebase的作者）




I'm using Firebase in a React Native iOS app, mainly for storing user data and user authentication, which works great when a device actually has a working network connection.

When it comes to Firebase's offline capabilities, it looks like this:

The problem: Users launching app without network connectivity can't do anything because they're never being logged in

Here are the steps to reproduce this behaviour:

Step 1: Logged-out user launches app with network connectivity

1. user clicks "Facebook login" button
2. Firebase logs in using Facebook auth
3. onAuthStateChanged (user) is being called with the logged in user as parameter
4. token obtained by user.getToken() is sent to my server, which generates a custom token (generatedToken) that can be used for signing into Firebase auth using signInWithCustomToken (generatedToken) and is therefore saved in local storage
5. user happily reads and writes into Firebase database, changes are instantly synced with Firebase server

Step 2: Logged-in user launches app with network connectivity

1. app realizes there's a generatedToken in local storage
2. generatedToken is used for firebase.auth().signInWithCustomToken (..)
3. (same as Step 1.3)
4. (same as Step 1.4)
5. (same as Step 1.5)
6. Network connectivity gets lost: User is still logged in (onAuthStateChanged (user) is not being called with null as a user, like it's the case after manually signing out) and can therefore still read & write into Firebase database
7. Network connectivity gets restored: Changes sync with Firebase server

Step 3: Logged-in user launches app without network connectivity

1. app realizes there's a generatedToken in local storage
2. generatedToken is used for firebase.auth().signInWithCustomToken (..)
3. firebase.auth().signInWithCustomToken (..) fails, because there's not network connection
4. onAuthStateChanged (user) is being called with null as a user
5. user is not able to use Firebase database at all, since all read/write requests fails because of missing authentication

The attempted solution

1. Setting persistenceEnabled to true in Objective-C / AppDelegate.m, right after initializing FIRApp:

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

   This doesn't lead to the desired result and (at least in my case) doesn't change anything when it comes to Firebase's behaviour.

2. --- YOUR SUGGESTION HERE ---

Thanks for your inputs!

解决方案

One of the problems with using the web sdk in RN is the offline persistence and offline authentication state. Whilst the Firebase JS SDK does work on react native, it is mainly built for the web and generally not the best solution for react-native:

The Firebase Web SDK runs entirely on react native's JS thread, therefore affecting your application frame rate (the link explains this well).

In my tests, the native firebase SDK's has been roughly 2-3 times quicker than using the web SDK.

But on top of the potential performance impacts there's a lot of features you'll be unable to use with the web SDK on android/ios devices. For example:

• AdMob
• FCM / Messaging
• Performance Monitoring
• Remote Config
• Offline capabilities
• Storage upload/download
• Firebase Crash Reporting
• Analytics
• Use of social authentication providers
• Phone/SMS authentication

The best approach would be to run with the native android/ios firebase sdk's and have a bridge between them and your js code (i.e. a native module setup).

Thankfully you don't have to implement this yourself, there's already modules out there to do this for you:

react-native-firebase for example mirrors the the web sdk's api js side but executes on the native side using the native android & ios firebase sdk's. It's fully compatible with any existing firebase js logic that you may have already implemented and is intended as a drop in replacement for the web sdk.

This library supports your use case with auth persistence and offline capabilities:

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;

(disclaimer: I am the author of react-native-firebase)

这篇关于Firebase + React Native：脱机身份验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！