webview_flutter“无法验证证书链" SSL握手失败错误 [英] webview_flutter "Failed to validate the certificate chain" SSL handshake failed error

问题描述

我遇到了这个问题，并借助此，但我花了一些时间弄清楚代码的放置位置，因为 flutter_webview_pugin 与 webview_flutter 之间的代码有些不同.因此，本教程将展示如何在MacOS上为 webview_flutter 实现此方法(仅Windows文件可能有所不同)

I had this problem and solved it with the help of this but it took me some time to figure out where to put the code since the codes are a bit different between flutter_webview_pugin vs webview_flutter. so this a tutorial to show how to implement this method for webview_flutter on MacOS(on windows only file may differ)

1-将此文件夹/Volumes/.../Flutter/SDK/flutter/.pub-cache/hosted/pub.dartlang.org/webview_flutter-0.3.10 + 4 复制到一个例如，从项目的根目录开始.

1- copy this folder /Volumes/.../Flutter/SDK/flutter/.pub-cache/hosted/pub.dartlang.org/webview_flutter-0.3.10+4 to one step up from the root of your project somewhere like for example.

如果这是您的项目: /Volumes/Depo/MyProject/ 然后将插件文件夹放在这里很方便: /Volumes/Depo/edited/

If this is your project: /Volumes/Depo/MyProject/ Then it's convenient to put the plugin folder here: /Volumes/Depo/edited/

2- 然后打开此文件/Volumes/Depo/edited/webview_flutter-0.3.10+4/android/src/main/java/io/flutter/plugins/webviewflutter/FlutterWebViewClient.java

2- Then open this file /Volumes/Depo/edited/webview_flutter-0.3.10+4/android/src/main/java/io/flutter/plugins/webviewflutter/FlutterWebViewClient.java

并添加此行

@Override
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
  handler.proceed();
}

到internalCreateWebViewClient函数. 完成后，它应该看起来像这样

to internalCreateWebViewClient function. after you're done it should look like this

private WebViewClient internalCreateWebViewClient() {
    return new WebViewClient() {
      @TargetApi(Build.VERSION_CODES.N)
      @Override
      public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        return FlutterWebViewClient.this.shouldOverrideUrlLoading(view, request);
      }

      @Override
      public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
        handler.proceed();
        }

      @Override
      public void onPageFinished(WebView view, String url) {
        FlutterWebViewClient.this.onPageFinished(view, url);
      }
    };
  }

3-添加这些导入

import android.net.http.SslError;
import android.webkit.SslErrorHandler;

由于此方法绕过SSL，因此不建议用于生产环境.

Since this method bypasses SSL its not recommended for production use.

即使服务器的SSL证书有效，也会出现此问题. 因为有效的SSL不能保证客户端通过该域访问的每项服务最终都将使用相同的来源，所以我尝试连接到服务器以使用RTSP传输安全性凸轮，但是它是"101交换协议"对没有有效SSL的其他端口的第一个请求得到实现.

This problem occurs even if the server's SSL certificate is valid. Because a valid SSL doesn't guarantee that every service reached by clients via that domain will end up using the same origin in my case I was trying to connect to the server to stream security cam using RTSP but it was "101 Switching Protocols" on the first request to a different port where there is no valid SSL is implemented.

推荐答案

您可以使用我的插件 flutter_inappwebview .它有很多事件，包括管理SSL错误和SSL客户端证书请求的事件:

You can use my plugin flutter_inappwebview. It has a lot of events, including events to manage SSL errors and SSL client certificate requests:

• onReceivedServerTrustAuthRequest:当WebView需要执行服务器信任身份验证(证书验证)时触发事件.这是通过Android上的onReceivedSslError事件实现的.
• onReceivedClientCertRequest:通知主机应用程序以处理SSL客户端证书请求.

• onReceivedServerTrustAuthRequest: Event fired when the WebView need to perform server trust authentication (certificate validation). This is implemented using the onReceivedSslError event on Android.
• onReceivedClientCertRequest: Notify the host application to handle an SSL client certificate request.

因此，在您的情况下，您只需要使用onReceivedServerTrustAuthRequest事件并简单地返回ServerTrustAuthResponse(action: ServerTrustAuthResponseAction.PROCEED);:

So, in your case, you need to use only the onReceivedServerTrustAuthRequest event and return simply ServerTrustAuthResponse(action: ServerTrustAuthResponseAction.PROCEED);:

import 'dart:async';

import 'package:flutter/material.dart';

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

Future main() async {
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: InAppWebViewPage()
    );
  }
}

class InAppWebViewPage extends StatefulWidget {
  @override
  _InAppWebViewPageState createState() => new _InAppWebViewPageState();
}

class _InAppWebViewPageState extends State<InAppWebViewPage> {
  InAppWebViewController webView;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("InAppWebView")
        ),
        body: Container(
            child: Column(children: <Widget>[
              Expanded(
                child: Container(
                  child: InAppWebView(
                    initialUrl: "https://myUrl",
                    initialHeaders: {},
                    initialOptions: InAppWebViewWidgetOptions(
                        inAppWebViewOptions: InAppWebViewOptions(
                          debuggingEnabled: true,
                        ),
                    ),
                    onWebViewCreated: (InAppWebViewController controller) {
                      webView = controller;
                    },
                    onLoadStart: (InAppWebViewController controller, String url) {

                    },
                    onLoadStop: (InAppWebViewController controller, String url) {

                    },
                    onReceivedServerTrustAuthRequest: (InAppWebViewController controller, ServerTrustChallenge challenge) async {
                      return ServerTrustAuthResponse(action: ServerTrustAuthResponseAction.PROCEED);
                    },
                  ),
                ),
              ),
            ]))
    );
  }
}

其中"https://myUrl"是您的网址.

这篇关于webview_flutter“无法验证证书链" SSL握手失败错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！