React Native 的 Webview 组件中的身份验证挑战

Question

我正在尝试在需要凭据的反应本机 webview 中加载 URL。通常，当我们在 Safari 和 Chrome 等浏览器中打开此 URL 时，它会给我们一个弹出窗口来输入凭据。不知道如何在 React-Native 中处理它？

Answer 1

我们的 React Native 应用程序需要 LinkedIn 身份验证，我们找不到使用 WebView 组件的方法。

这可能很有可能，但是，我将重点介绍我们提出的解决方案。这些步骤适用于 iOS React Native 应用程序，Android 的步骤会有所不同，但概念是相同的。这也确实需要一些服务器配置。

我们创建了一个 URL 类型。在 XCode 中，选择您的项目并单击 Info 选项卡。滚动到底部以查看 URL 类型。填写identifier 和URL Schemes。记住您为URL Schemes 设置的内容。对于这个例子，我们将使用myscheme。

当应用程序打开时，我们使用Linking 在 Safari 中打开 URL。

Linking.openURL('https://foo.bar');

然后用户可以通过网站登录，一旦登录，您可以将您的用户重定向回。

myscheme://name=Dan

myscheme 与您在 Xcode 中输入的 URL Scheme 匹配。只要您安装了应用程序并且方案匹配，那么您的应用程序就会打开。

您可以在:// 之后添加任何信息负载。

在你的 React 应用中，你可以注册

componentWillMount() {
  Linking.addEventListener('url', this.handleOpenURL);
}

componentWillUnmount() {
  Linking.removeEventListener('url', this.handleOpenURL);
}

handleOpenURL = (event) => {
  const { url } = event;
  if (url.startsWith('myscheme://')) {
    // do something with your data.
  }
};