React Native Webview 社交认证

Question

我正在尝试使用 React Native 中的 webview 为网站构建一个 iOs 移动应用程序。

我在 expo-cli 项目中使用库 ('react-native-webview')。到目前为止，一切似乎都很好。也许是因为我是 webviews 的新手，但我无法弄清楚一些问题。我正在使用的网站有 'Login With FB' 和 'Login with Google' 选项，它们在 safari 或其他网络浏览器上运行良好。

对于Facebook登录，网站在Facebook上打开一个新标签，当用户登录到新标签时关闭标签并返回网站的登录页面，然后完美登录。但在 webview 中，它不会为 FB 登录打开一个新选项卡，这就是（我认为）它无法使用 Facebook 登录网站的原因。它只是returns webview 中的网站登录页面，但没有像没有效果一样登录。

对于Google登录，同FB登录的概念。但是在 google 登录中它说“错误 403：disallowed_useragent” 我相信我必须为 webview 指定 userAgent 或 applicationNameForUserAgent 但我不知道如何做这些。特别是在 expo-cli 应用程序中。

我在网上搜索了几天，但找不到解决我问题的方法。它似乎有一些简单的修复方法。但正如我所说，我是新手。任何帮助，将不胜感激。任何解释都会让我感激不尽。 :)

Answer 1

您必须通过 onMessage 和 postMessage 将 WebView 连接到 Expo，并让 Expo 为您处理身份验证（以本机方法），然后 post 将凭据返回到网页

对于 iOS: 使用自定义 Expo 客户端。如果您使用标准的 Expo 客户端，则无法将 Facebook 登录与 Firebase 集成

我在这里写了一些说明：https://medium.com/@chwrtokuma/expo-webview-facebook-authentication-with-firebase-2b864c031340

如果您只使用 Facebook 身份验证而不与 firebase 集成，则只是 post facebook 将数据登录到您的网页。

Answer 2

您可以使用以下链接进行社交登录，而不是 react-native-webview。

Google 登录 - https://docs.expo.io/versions/v38.0.0/sdk/google/

对于 Facebook 登录 - https://docs.expo.io/versions/v38.0.0/sdk/facebook/

对于基于网络浏览器的身份验证 - https://docs.expo.io/versions/latest/sdk/auth-session/

Answer 3

<WebView
    source={{ uri : initurl}}              
    userAgent="Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; AS; rv:11.0) like Gecko"
    originWhitelist={["https://*", "http://*", "file://*", "sms://*"]}
/>

这段代码对我有用

React Native Webview 社交认证

React Native Webview social authentication

webview

facebook-login

react-native

google-signin

react-native-webview