javascript - Android 上的 Chrome 61+ 中的导航被阻止错误

Question

我正在构建一个登录页面，在提交和验证用户凭据后，将打开一个 native 移动应用程序。直到上周，我通过使用自定义方案 URI 实现了跨移动操作系统的工作，例如:

function onLoginCallback() {
    const redirectUri = 'customscheme:/action?param1=val1&param2=val2';
    window.location.replace(redirectUri);
}

登录页面显示在 IABT(“应用程序浏览器内选项卡”的缩写)中。

但是，自从 Chrome 61 版本发布以来，这种方法在 Android 上就被打破了。 Chrome 会阻止重定向，因为没有与重定向相关的明显用户操作(有关此事的更多信息，请参阅 here)。

因此，当执行上面的代码时，我最终会在控制台中收到警告:

Navigation is blocked: customscheme:/action?param1=val1&param2=val2

我还尝试将自定义方案 url 更新为 Intent url，但无济于事。谷歌搜索这个问题并不能轻易提供明确的解决方案，所以我希望任何人都可以帮助我。

<小时/> 编辑:尝试使用以下场景重现该问题(尽可能接近现实生活场景):

• IABT 显示带有单个按钮的页面
• 单击按钮会触发对模拟端点的 jsonp 调用
• 执行 JSONP 回调并触发自定义事件
• 触发自定义事件的事件处理程序并将浏览器重定向到另一个模拟端点
• 该模拟端点使用 302 响应自定义深度链接方案。

唉，这似乎有效。我本以为包含 jsonp 调用会导致 Chrome 阻止最终重定向，因为它无法将其识别为用户发起的操作。

<小时/> 编辑2:设法获得可重现的场景。我们设置了一个虚拟端点，根据请求，它只需返回一个 302 ，其中包含 Location header 中的自定义方案。除了第一次之外，所有尝试都会被阻止。这个事实仍然令人难以置信。我们正在使用 AppAuth for Android用于测试设置的应用程序。

我正在打开端点的自定义选项卡，如下所示。代码取自this answer .

void launchTab(Context context, Uri uri){
    final CustomTabsServiceConnection connection = new CustomTabsServiceConnection() {
        @Override
        public void onCustomTabsServiceConnected(ComponentName componentName, CustomTabsClient client) {
            final CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();
            final CustomTabsIntent intent = builder.build();
            client.warmup(0L); // This prevents backgrounding after redirection
            intent.launchUrl(context, uri);
        }
        @Override
        public void onServiceDisconnected(ComponentName name) {

        }
    };
    CustomTabsClient.bindCustomTabsService(context, "com.android.chrome", connection);
}

Answer 1

我们最终使用classic post-redirect-get来实现我们的登录和注册表单。模式。

服务器使用 302 响应自定义 URI 方案。由于在此设置中，用户提交表单和接收重定向的浏览器之间没有异步执行，因此 Chrome 正确地将操作链识别为可信，因此不会阻止导航。

我意识到这可能不是每个人的首选解决方案。支持异步执行流的一个可能的替代方案是使用 universal links因为它们使用常规的 http(s) 方案，Chrome 认为重定向(在发布我的问题时)不会有害。