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?React Native - 如何将经过 Firebase 身份验证的用户会话从 react-native 应用程序持久化到（react-native-webview）webview 组件？
【发布时间】：2020-04-02 09:44:30
【问题描述】：

我有一个使用 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 上尝试过）
我错过了什么？前端/后端是否有额外的步骤？（我还是编程新手）
谢谢您的帮助。

【问题讨论】：

标签： firebase react-native webview firebase-authentication stripe-payments

【解决方案1】：

我终于解决了，希望对其他人有所帮助：

设计你的状态

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

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

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

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

您的网络视图（并在代码中添加“Bearer”）

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

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

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

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

【讨论】：