当React Native遇到https（Android）
前言： 好长一段时间没露脸了，从上家公司跳槽到如今已经2个月的时间了，拿到了两份offer，一个作android，一个作rn，结果最后仍是作了rn，当初学rn的时候都没想到rn这东西能挣钱～ 哈哈！ 容我装个b，不过也仍是不错的，如今公司作的app算是我接手rn真正的一个像样的一个项目，废话很少说了，先看一下咱们遇到的问题，欢迎小伙伴入群，欢迎骚扰！java
公司来了几套测试环境，而后都是须要加证书访问的，这就尴尬了，咱们默认的网络请求用的是fetch，因此确定是须要去修改native源码的，这里就以android为例子了（ios我也不懂～～嘿嘿）。react
学android的童鞋都知道，rn默认android端请求是用的okhttps，因此也不要问我原生改怎么访问https了，你们能够参考下洪洋大神的这篇文章：
http://blog.csdn.net/lmj623565791/article/details/48129405
里面已经很详细了。android
这里咱们以rn的”0.43.4“版本为例子，
其实rn已经为咱们提供了一个修改默认okhttpclient的方法，
咱们找到这个一个文件：ios
NetworkingModule.java文件就是咱们android最底层的网络请求工具类，每次建立NetworkingModule对象的时候，咱们会传入一个okhttpclient的对象：web
public NetworkingModule(ReactApplicationContext context) {
this(context, (String)null, OkHttpClientProvider.createClient(), (List)null);
}
public NetworkingModule(ReactApplicationContext context, List<NetworkInterceptorCreator> networkInterceptorCreators) {
this(context, (String)null, OkHttpClientProvider.createClient(), networkInterceptorCreators);
}
public NetworkingModule(ReactApplicationContext context, String defaultUserAgent) {
this(context, defaultUserAgent, OkHttpClientProvider.createClient(), (List)null);
}
能够看到，每次都是经过：react-native
OkHttpClientProvider.createClient()
的方式建立了一个okhttpclient对象，最后发送请求为：cookie
@ReactMethod
public void sendRequest(ExecutorToken executorToken, String method, String url, final int requestId, ReadableArray headers, ReadableMap data, final String responseType, final boolean useIncrementalUpdates, int timeout) {
okhttp3.Request.Builder requestBuilder = (new okhttp3.Request.Builder()).url(url);
if(requestId != 0) {
requestBuilder.tag(Integer.valueOf(requestId));
}
final RCTDeviceEventEmitter eventEmitter = this.getEventEmitter(executorToken);
Builder clientBuilder = this.mClient.newBuilder();
....
因此咱们只须要替换掉默认的httpclient，而后为其添加上证书认证就能够了，咱们打开 OkHttpClientProvider.createClient()方法：网络
public static OkHttpClient createClient() {
Builder client = (new Builder()).connectTimeout(0L, TimeUnit.MILLISECONDS).readTimeout(0L, TimeUnit.MILLISECONDS).writeTimeout(0L, TimeUnit.MILLISECONDS).cookieJar(new ReactCookieJarContainer());
return enableTls12OnPreLollipop(client).build();
}
OkHttpClientProvider这个工具类就是为咱们提供了一个修改默认okhttpclient的方法，咱们看到其中有一个方法：session
public static void replaceOkHttpClient(OkHttpClient client) {
sClient = client;
}
这个方法就是替换掉rn中网络请求默认的okhttpclient方法。app
因此咱们在程序初始化的时候改掉默认的okhttpclient。。
一、首先找到你项目的application文件，在oncreate方法中提供其方法：
@Override
public void onCreate() {
。。。
//RN OKHTTP添加https证书
OkHttpClientProvider.replaceOkHttpClient(initCustomOkHttpClient());
。。。
}
public OkHttpClient initCustomOkHttpClient() {
OkHttpClient.Builder client = new OkHttpClient.Builder()
.connectTimeout(30 * 1000, TimeUnit.MILLISECONDS)
.readTimeout(30 * 1000, TimeUnit.MILLISECONDS)
.writeTimeout(30 * 1000, TimeUnit.MILLISECONDS)
.cookieJar(new ReactCookieJarContainer());
client.addNetworkInterceptor(new StethoInterceptor());
client.addInterceptor(new HttpLoggingInterceptor().setLevel(HttpLoggingInterceptor.Level.BODY));
try {
／／你的证书文件，放在android的assets文件夹下
setCertificates(client, getAssets().open("CA.crt"));
client.hostnameVerifier(new HostnameVerifier() {
@Override
public boolean verify(String hostname, SSLSession session) {
return true;
}
});
} catch (IOException e) {
e.printStackTrace();
}
OkHttpClient.Builder builder = OkHttpClientProvider.enableTls12OnPreLollipop(client);
return builder.build();
}
public void setCertificates(OkHttpClient.Builder client, InputStream... certificates) {
try {
CertificateFactory certificateFactory = CertificateFactory.getInstance("X.509");
KeyStore keyStore = KeyStore.getInstance(KeyStore.getDefaultType());
keyStore.load(null);
int index = 0;
for (InputStream certificate : certificates) {
String certificateAlias = Integer.toString(index++);
keyStore.setCertificateEntry(certificateAlias, certificateFactory.generateCertificate(certificate));
try {
if (certificate != null)
certificate.close();
} catch (IOException e) {
}
}
SSLContext sslContext = SSLContext.getInstance("TLS");
TrustManagerFactory trustManagerFactory =
TrustManagerFactory.getInstance(TrustManagerFactory.getDefaultAlgorithm());
trustManagerFactory.init(keyStore);
sslContext.init(
null,
trustManagerFactory.getTrustManagers(),
new SecureRandom()
);
client.sslSocketFactory(sslContext.getSocketFactory());
} catch (Exception e) {
e.printStackTrace();
}
}
二、最后一步
修改NetworkingModule.java文件
public NetworkingModule(ReactApplicationContext context) {
this(context, (String)null, OkHttpClientProvider.createClient(), (List)null);
}
public NetworkingModule(ReactApplicationContext context, List<NetworkInterceptorCreator> networkInterceptorCreators) {
this(context, (String)null, OkHttpClientProvider.createClient(), networkInterceptorCreators);
}
public NetworkingModule(ReactApplicationContext context, String defaultUserAgent) {
this(context, defaultUserAgent, OkHttpClientProvider.createClient(), (List)null);
}
把默认建立okhttpclient的方式：
OkHttpClientProvider.createClient()
所有改成：
OkHttpClientProvider.getOkHttpClient()
/** * @param context the ReactContext of the application */
public NetworkingModule(final ReactApplicationContext context) {
this(context, null, OkHttpClientProvider.getOkHttpClient(), null);
}
/** * @param context the ReactContext of the application * @param networkInterceptorCreators list of {@link NetworkInterceptorCreator}'s whose create() * methods would be called to attach the interceptors to the client. */
public NetworkingModule(
ReactApplicationContext context,
List<NetworkInterceptorCreator> networkInterceptorCreators) {
this(context, null, OkHttpClientProvider.getOkHttpClient(), networkInterceptorCreators);
}
/** * @param context the ReactContext of the application * @param defaultUserAgent the User-Agent header that will be set for all requests where the * caller does not provide one explicitly */
public NetworkingModule(ReactApplicationContext context, String defaultUserAgent) {
this(context, defaultUserAgent, OkHttpClientProvider.getOkHttpClient(), null);
}
好啦～到这里小伙伴疑问了，我是导的react-native的第三方依赖库，改不了源码咋办呢？
哈哈～～ 咱们直接copy一份NetworkingModule跟mainreactpackage的代码，而后在application中把mainreactpackage替换成咱们copy出去的那一份，
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
／／替换成咱们copy的那个文件
new MainReactPackage(),
new VectorIconsPackage(),
new RCTSplashScreenPackage(),
new RNDeviceInfo(),
new AndroidModulePackage(),
new RCTSwipeRefreshLayoutPackage()
);
}
};
而后点进咱们copy的那个MainReactPackage文件，再把MainReactPackage中的:
new ModuleSpec(NetworkingModule.class, new Provider<NativeModule>() {
@Override
public NativeModule get() {
//替换成咱们本身copy的那个文件
return new NetworkingModule(context);
}
}),
好啦～～ 我不知道其它rn版本中有没有这个bug，若是NetworkingModule建立okhttpclient的方式之久就是：
OkHttpClientProvider.getOkHttpClient()
这种方式的话，咱们就不必这么麻烦了～～
好啦！！ 也没有啥技术含量的东西，就先到这里了，小伙伴若是改了仍是不行欢迎联系我～～