React Native WebView 的身份验证

Question

我有一个可用的React Native应用程序，想要通过添加一个选项卡来灵活扩展它，该选项卡显示一个WebView。在这里，用户将能够查看他们的个人资料信息，因此我需要能够对每个用户进行身份验证。

我本以为这不难实现，因为用户已经在应用程序中进行了身份验证，但显然在React Native中无法向WebView添加自定义标头。而且这也适用于社区组件React Native WebView。因此，我不能在请求中设置授权令牌。

这会使身份验证过程变得复杂，因此我正在寻找一种替代方法来在WebView中执行身份验证。令人惊讶的是，在网上没有太多关于如何完成这项任务的信息。那么，在React Native WebView中解决身份验证问题的好方法是什么？

- dentemm

---

我在我的博客上写了关于它的内容：https://smakosh.com/webview-native-authentication - Smakosh

@Smakosh，你的教程使用了已经过时的依赖项。能否更新到2022年？ - mobibob

我有空的时候会做。 - Smakosh

Answer 1

在WebView中，您可以使用JavaScript访问Fetch API，它支持自定义头部。因此，您可以调用fetch方法。

fetch('https://example.com/profile/alice', {
  headers: {
    'Authorization': /* your token here... */
  }
}).then(function (response) {
  return response.json();
}).then(function (myJson) {
  console.log(JSON.stringify(myJson));
});

- Fred