Question

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

Answer 1

我们要求对React Native应用程序进行LinkedIn身份验证，但我们无法找到使用WebView组件的方法。

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

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

当应用打开时，我们会使用Linking在Safari中打开网址。

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

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

myscheme://name=Dan

与您在Xcode中输入的myscheme相匹配的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.
  }
};

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

1 个答案: