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

Question

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

Answer 1

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

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

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

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

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

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

myscheme://name=Dan

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

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

在您的 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.
}
};