RN https 双向认证

一  概述

Rreact Native  https双向认证  Android端修改，有两种方案：

一是修改 facebook桥接Android的网络请求

二是自己新建桥接 android和rn，修改android的https请求。

这里用到了第一种方法。第二种方法，有空的话可以试一下，也是可以的。

要想做RN的桥接，首先要先把android原生的 https双向认证搞明白，请看我上篇文章：

https://blog.csdn.net/BingHongChaZuoAn/article/details/93591447

二、实战操作

服务器端和Android端配置 就不讲了，上篇文章已经讲过。

1.首先是 新建 HttpsReactPackage，修改网络为自己的NetworkingModule 

public class HttpsReactPackage extends MainReactPackage {

    private String TAG ="HttpsReactPackage";

    @Override
    public List<ModuleSpec> getNativeModules(final ReactApplicationContext context) {

        List<ModuleSpec> retList = new ArrayList<>();
        List<ModuleSpec> superList = super.getNativeModules(context);
        for (ModuleSpec moduleSpec:superList){
            if (moduleSpec.getProvider().get() instanceof NetworkingModule){
                continue;
            }
            retList.add(moduleSpec);
        }

        retList.add(new ModuleSpec(NetworkingModule.class,
                new Provider<NativeModule>() {
                    @Override
                    public NativeModule get() {
                        return getTestNetWorkingMoudle(context);
                    }
                }));
        return retList;
    }

    private NativeModule getTestNetWorkingMoudle(ReactApplicationContext context) {

        NetworkingModule networkingModule = new NetworkingModule(context);
        try {
            Field field = networkingModule.getClass().getDeclaredField("mClient");
            field.setAccessible(true);

            OkHttpClient okHttpClient2 = OKHttpClientUtils.getOkHttpClient(context);
            field.set(networkingModule,okHttpClient2);

        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } 

        return networkingModule;
    }
}

2.然后 新建 OKHttpClientUtils，做okhttps证书的双向认证，并提供单例 okhttpClient

public class OKHttpClientUtils {
    private static @Nullable
    OkHttpClient sClient;

    public static OkHttpClient getOkHttpClient(Context context) {
        if (sClient == null) {
            sClient = createClient(context);
        }
        return sClient;
    }

    // okhttp3 OkHttpClient is immutable
    // This allows app to init an OkHttpClient with custom settings.
    public static void replaceOkHttpClient(OkHttpClient client) {
        sClient = client;
    }

    public static OkHttpClient createClient(Context context) {
        // No timeouts by default

        HttpsUtils.SSLParams sslParams =
                null;
        try {
            sslParams = HttpsUtils.getSslSocketFactory(new InputStream[]{context.getAssets().open("server.crt")},
                    context.getAssets().open("test_client.keystore"), "123456");
        } catch (IOException e) {
            e.printStackTrace();
        }
        OkHttpClient.Builder client = new OkHttpClient.Builder()
                .connectTimeout(0, TimeUnit.MILLISECONDS)
                .readTimeout(0, TimeUnit.MILLISECONDS)
                .writeTimeout(0, TimeUnit.MILLISECONDS)
                .cookieJar(new ReactCookieJarContainer())
                .sslSocketFactory(sslParams.sSLSocketFactory, sslParams.trustManager)
                .hostnameVerifier(new HostnameVerifier() {
                        @Override
                        public boolean verify(String hostname, SSLSession session) {
                            return true;
                        }
                    });

        return enableTls12OnPreLollipop(client).build();
    }

    /*
      On Android 4.1-4.4 (API level 16 to 19) TLS 1.1 and 1.2 are
      available but not enabled by default. The following method
      enables it.
     */
    public static OkHttpClient.Builder enableTls12OnPreLollipop(OkHttpClient.Builder client) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN && Build.VERSION.SDK_INT <= Build.VERSION_CODES.KITKAT) {
            try {
                client.sslSocketFactory(new TLSSocketFactory());

                ConnectionSpec cs = new ConnectionSpec.Builder(ConnectionSpec.MODERN_TLS)
                        .tlsVersions(TlsVersion.TLS_1_2)
                        .build();

                List<ConnectionSpec> specs = new ArrayList<>();
                specs.add(cs);
                specs.add(ConnectionSpec.COMPATIBLE_TLS);
                specs.add(ConnectionSpec.CLEARTEXT);

                client.connectionSpecs(specs);
            } catch (Exception exc) {
                FLog.e("OkHttpClientProvider", "Error while enabling TLS 1.2", exc);
            }
        }

        return client;
    }

}

3.修改  application  MainReactPackage 改为自己新建的package的加载

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new HttpsReactPackage()
      );
    }
  };

 4. 到此fetch https双向认证封装已经完成 ，调用服务器代码如下：

 fetch('https://192.168.43.238:8443/getUser')
    .then((response) => response.json())
    .then((responseJson) => {
      var jsonStr=JSON.stringify(responseJson); 
      console.warn(jsonStr);
    })
    .catch((error) => {
      console.error(error);
    });