React Native - 如何将经过 Firebase 身份验证的用户会话从 react-native 应用程序持久保存到 (react-native-webview) webview 组件？

Question

我有一个使用 Firebase 的 react-native 应用程序（带有“@react-native-firebase/auth”：“^6.0.1”）。
在应用程序中有一个 Webview（"react-native-webview": "^7.5.2"）。
用户登录，然后我可以使用以下方式访问其 jwt：

auth().currentUser.getIdTokenResult()
  .then(jwtToken => {
    console.log('jwtToken: ', jwtToken.token);
  })

现在我需要用户打开 Webview 并且仍然处于连接状态，因为 webview 指向我的 firebase 托管页面。

<WebView
  source={{
    uri: 'my-firebase-hosting-url',
    headers: {
      Authorization: jwtToken,
    },
  }}
  renderLoading={this.renderLoadingView}
  startInLoadingState={true}
  sharedCookiesEnabled={true}
  thirdPartyCookiesEnabled={true}
  domStorageEnabled={true}
  ref={ref => {
    this.webview = ref;
  }}
/>

在服务器端，我设置了 express 和 cookie-session。
用户似乎没有登录 webview：在服务器端，当我 console.log(req.session) 它显示一个空对象 {}。

我尝试了多种选择，但在 iOS 中似乎没有任何效果（尚未在 Android 上尝试过）
我错过了什么？ frontend/backend 上有额外的步骤吗？（我还是编程新手）
谢谢您的帮助。

Answer 1

终于解决了，希望对大家有帮助：

设计你的状态

state = {
    shouldRenderWebview: false,
    authorization: ''
...

在您的构造函数中，从 firebase 获取刷新的令牌

auth()
      .currentUser.getIdTokenResult()
      .then(result => {
        this.setState({
          authorization: result.token,
          shouldRenderWebview: true,
        });
      })

设计您的主要组件以显示加载视图（在获取令牌时）或呈现网络视图

您的网络视图（并将 'Bearer' 添加到代码中）

const Authorization = 'Bearer ' + this.state.authorization;
<WebView
   source={{
     uri: this.state.urlToGo,
     headers: {
       Authorization,
     },
   }}
   ....

在您的后台，检查验证码是否有效

firebase.auth().verifyIdToken(req.headers.authorization.substr(7));

然后根据结果做你的事情。

React Native - 如何将经过 Firebase 身份验证的用户会话从 react-native 应用程序持久保存到 (react-native-webview) webview 组件？

React Native - How to persist a Firebase authenticated user session from react-native app to a (react-native-webview) webview component?

webview

stripe-payments

firebase

react-native

firebase-authentication