从 React Native 中应用程序本身的 Web 视图重定向到移动应用程序

我正在构建一个需要来自外部身份验证提供商身份验证的 android 应用程序。所以我正在使用 react-native-oauth 包来处理这个问题。

定义的redirect_uri是一个深层链接，理想情况下，在成功进行身份验证后，它应该打开我的应用本身。但是 WebView 似乎无法处理此重定向，我得到的响应是找不到 404 页。

这是我为处理身份验证而编写的服务：

    const manager = new OAuthManager('<app_name>')
    manager.addProvider({
         'provider': {
                  auth_version: '2.0', 
                  authorize_url:'<auth-url>',
                  access_token_url: '<auth-url>/token',
                  callback_url: 'http://localhost/provider',
         }
    });
    manager.configure({
       provider: {
           client_id: '<id>',
           client_secret: '<secret>',
           redirect_uri: '<redirect-uri>' //DEEP LINK HERE
      }
    });
   module.exports = {
      authManager: () => {
      manager.authorize('<provider>')
                        .then(resp => console.log(resp))
                        .catch(err => console.log(err));    
                    }
   }

此外，我还定义了 Android 文档中指定的意图过滤器，了解如何为您的应用程序声明深层链接。深层链接在应用程序组件中使用 Linking.openURL（）打开时工作正常。

非常感谢这方面的

任何帮助。

您无法直接为移动应用程序设置redirect_uri（因为大多数身份验证提供程序不支持自定义 OAuth 方案）。

但是您可以创建一些网页，该网页将接受来自OAuth提供商的重定向并打开您的应用程序（并发送所有重定向参数，如token）。

例如，您创建页面https://example.com/oauth/，并将callback_url设置为https://example.com/oauth/XXXXX_provider，因此当用户被重定向到页面https://example.com/oauth/XXXXX_provider&token=xxx时，它将使用appName://example/oauth/google?token=xxx打开您的应用程序

您可以使用Deeplink处理appName://example/oauth/google?token=xxx（当它安装在设备上时，它将打开您的移动应用程序）

处理重定向的页面示例：

<html><head></head><body>
<p>Please wait while we redirect you to Your APP NAME...</p>
<p><a href="javascript:redirectToApp()">Open appname</a></p>
<script>
  var redirectToApp = function() {
    var scheme = "appnameapp";
    var openURL = "appname" + window.location.pathname + window.location.search + window.location.hash;
    var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
    var Android = /Android/.test(navigator.userAgent);
    var newLocation;
    if (iOS) {
      newLocation = scheme + ":" + openURL;
    } else if (Android) {
      newLocation = "intent://" + openURL + "#Intent;scheme=" + scheme + ";package=com.appnameapp;end";
    } else {
      newLocation = scheme + "://" + openURL;
    }
    console.log(newLocation)
    window.location.replace(newLocation);
  }
  window.onload = redirectToApp;
</script>
</body></html>

默认情况下

，WebView不会与Safari/Chrome共享cookie/会话数据。因此，它对于登录流程来说并不理想，因为它不使用Chrome/Safari中现有的登录会话。

世博会提供了一个WebBrowser api，可以打开Safari/Chrome而不是webview。请注意，它会在应用程序内打开Safari/Chrome，而不是使用Linking重定向浏览器。因此，用户始终在浏览器中有一个按钮来返回你的应用。

您可以使用WebBrowser.openAuthSessionAsync(url)打开与设备中的本机浏览器共享cookie/会话信息的安全会话。

Expo还提供了另一个称为AuthSession的API，它简化了许多样板文件，并提供了一个简单的API。

相关内容

最新更新

热门标签：