React Native SSL Pinning 项目教程

React Native SSL Pinning 项目教程

react-native-ssl-pinningReact Native ssl pinning and cookies handling based on okhttp3 on (Android). and AFNetworking on (iOS)项目地址:https://gitcode.com/gh_mirrors/re/react-native-ssl-pinning

1. 项目的目录结构及介绍

react-native-ssl-pinning/
├── android/
├── ios/
├── src/
│   ├── components/
│   ├── utils/
│   │   └── sslPinning.js
│   ├── App.js
├── index.js
├── package.json
├── README.md

• android/: 包含Android平台的特定代码。
• ios/: 包含iOS平台的特定代码。
• src/: 包含项目的源代码。
  • components/: 存放React组件。
  • utils/: 存放工具函数，如sslPinning.js用于SSL Pinning配置。
  • App.js: 主应用组件。
• index.js: 项目的入口文件。
• package.json: 项目的依赖和脚本配置。
• README.md: 项目的说明文档。

2. 项目的启动文件介绍

index.js

import { AppRegistry } from 'react-native';
import App from './src/App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

• index.js: 这是项目的入口文件，负责注册和启动应用。它导入了AppRegistry和主应用组件App，并通过AppRegistry.registerComponent方法注册应用。

App.js

import React, { useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { initializeSslPinning, addSslPinningErrorListener } from './utils/sslPinning';

const App = () => {
  useEffect(() => {
    const setupSslPinning = async () => {
      try {
        await initializeSslPinning({
          'example.com': {
            includeSubdomains: true,
            publicKeyHashes: [
              'sha256/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=',
            ],
          },
        });
      } catch (error) {
        console.error('SSL Pinning setup failed:', error);
      }
    };

    setupSslPinning();
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>SSL Pinning Example</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

export default App;

• App.js: 这是主应用组件，负责初始化SSL Pinning配置。它使用useEffect钩子在组件挂载时调用initializeSslPinning方法进行SSL Pinning配置。

3. 项目的配置文件介绍

package.json

{
  "name": "react-native-ssl-pinning",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "16.13.1",
    "react-native": "0.63.4",
    "react-native-ssl-public-key-pinning": "^1.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/runtime": "^7.8.4",
    "babel-jest": "^25.1.0",
    "eslint": "^6.5.1",
    "jest": "^25.1.0",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-test-renderer": "16.13.1"
  },
  "jest

react-native-ssl-pinningReact Native ssl pinning and cookies handling based on okhttp3 on (Android). and AFNetworking on (iOS)项目地址:https://gitcode.com/gh_mirrors/re/react-native-ssl-pinning