美文网首页React Native学习
React Native RSA加密

React Native RSA加密

作者: _凌浩雨 | 来源:发表于2018-06-29 17:44 被阅读4次

    Jsencrypt框架

    NPM Jsencrypt

    1). npm安装
    npm i jsencrypt
    
    2). 导入
    import 'jsencrypt';
    
    3). 使用Git控制台创建私钥
    # 创建
    openssl genrsa -out rsa_1024_priv.pem 1024
    # 查看私钥
    cat rsa_1024_priv.pem
    
    4). 使用Git控制台创建公钥
    # 创建
    openssl rsa -pubout -in rsa_1024_priv.pem -out rsa_1024_pub.pem
    # 查看
    cat rsa_1024_pub.pem
    
    5). JS代码加密
        let encrypt = new JSEncrypt();
        encrypt.setPublicKey(PUB_KEY);
        let encrypted = encrypt.encrypt('要加密的数据');
    
    6). JS代码解密
        let decrypt = new JSEncrypt();
        decrypt.setPrivateKey(PRIV_KEY);
        let decrypted = decrypt.decrypt('公钥加密后的数据');
    
    7). 完整代码
    import React, {PureComponent} from 'react';
    import {
        AppRegistry,
        Button,
        StyleSheet, Text, TextInput,
        View
    } from 'react-native';
    // npm i jsencrypt
    import 'jsencrypt';
    // 公钥
    const PUB_KEY = '-----BEGIN PUBLIC KEY-----\n' +
        'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDLQZ6XzBsLRfgzAOeueNz+64M9\n' +
        'ralhL0tykrDzNtCYYPo+vV9/pALPYSrriCUtHgBG36zHJApZ6BsSWYO8P3HoliUL\n' +
        'tJZ1DJ97B//7aj0dHSQekXMRE0+7CUWr3ol6FR1V5lf1+Wdcy2IgSoJVHUFhEjtq\n' +
        'Lg3BzmwV7Mc2oWZHgwIDAQAB\n' +
        '-----END PUBLIC KEY-----\n';
    // 私钥
    const PRIV_KEY = '-----BEGIN RSA PRIVATE KEY-----\n' +
        'MIICXgIBAAKBgQDLQZ6XzBsLRfgzAOeueNz+64M9ralhL0tykrDzNtCYYPo+vV9/\n' +
        'pALPYSrriCUtHgBG36zHJApZ6BsSWYO8P3HoliULtJZ1DJ97B//7aj0dHSQekXMR\n' +
        'E0+7CUWr3ol6FR1V5lf1+Wdcy2IgSoJVHUFhEjtqLg3BzmwV7Mc2oWZHgwIDAQAB\n' +
        'AoGBAJzwpu8Yhw02UoW3PizGYAVpfeWi8LT8mqn1wDGbcocl4jONb26UCiNsKILC\n' +
        'lcn3b0lKLhN5rZBsGnMZsREqf90wWHW3kTbuF1d8tJmaJfuC2km3iXd4XAoMgsSR\n' +
        'QrHbH+WuiIQzAZviHnY52qXgMwnUN8y1pNrns2Ew3oyGriWhAkEA+ZfUSSMYG7ph\n' +
        'Io2UrOZdiM+4XJycG775Rz3hmWR50gbqBpiIjYAOdsgAK6zyyMyuDctTvCgeUm2Z\n' +
        'dQhDYpX4swJBANB5SzsICgXKz81V1jNU7cizi7rURC3V8QgJouFzZkrrjru7WJ8Q\n' +
        '6WKB6VHjtRxkgBEkkUUU5ucWHLruOr95vfECQQDYJrjdrdrPCJXeiqZbJhWSyfFr\n' +
        'ouU+0iCnpdueL/mf/gTmOWrowCHGlGYxbNHFPBzwLUoTBNtdnzTquYFB+4cpAkB3\n' +
        'OWb005wnw90jqTtfD+sNJOF8b3iuXfQCjMBB/yU5I431fycnkRxn4bP1ySwCmNdE\n' +
        '9oy93T5QWi0EGsouRwmBAkEAogAnYaUe3vK3X7gxrk7F0FGsHZLvR8Y1g8iOZq66\n' +
        '53+6QJVj6TFPOw9oS4chdgBnaZVtziJZZnHyjnobO70tUA==\n' +
        '-----END RSA PRIVATE KEY-----\n';
    
    /**
     * @FileName: RSAEncryptDemo
     * @Author: mazaiting
     * @Date: 2018/6/29
     * @Description:
     */
    class RSAEncryptDemo extends PureComponent {
        constructor(props) {
            super(props);
            this.state = {
                data: '',
                text: ''
            }
        }
        render() {
            return (
                <View style={styles.container}>
                    <TextInput
                        onChangeText={(text) => this.setState({data: text})}
                    />
                    <Button
                        title='加密'
                        onPress={() => this.encrypt()}
                    />
                    <Button
                        title='解密'
                        onPress={() => this.decrypt()}
                    />
                    <Text>{this.state.text}</Text>
                </View>
            )
        }
        
        /**
         * 加密
         */
        encrypt() {
            let encrypt = new JSEncrypt();
            encrypt.setPublicKey(PUB_KEY);
            let encrypted = encrypt.encrypt(this.state.data);
            this.setState({
                text: encrypted
            })
        }
        
        /**
         * 解密
         */
        decrypt() {
            let decrypt = new JSEncrypt();
            decrypt.setPrivateKey(PRIV_KEY);
            let decrypted = decrypt.decrypt(this.state.text);
            this.setState({
                text: decrypted
            })
        }
        
        
    }
    
    /**
     * 样式属性
     */
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            backgroundColor: '#DDD'
        }
    });
    
    AppRegistry.registerComponent('abcd', () => RSAEncryptDemo);
    
    8). 效果
    加解密效果.gif
    9). 签名
        /**
         * 签名
         */
        sign() {
            let encrypt = new JSEncrypt();
            // 私钥加密
            encrypt.setPrivateKey(PRIV_KEY);
            let encrypted = encrypt.sign(this.state.data, this.digestMethod, "md5");
            console.log(encrypted);
            this.setState({
                text: encrypted
            })
        }
        
        /**
         * 算法
         */
        digestMethod(text) {
            return text
        }
    
    
    10). 验证
        /**
         * 验证
         */
        verify() {
            let decrypt = new JSEncrypt();
            // 公钥解密
            decrypt.setPublicKey(PUB_KEY);
            let decrypted = decrypt.verify(this.state.data, this.state.text,this.digestMethod);
            console.log(decrypted);
            this.setState({
                text: decrypted+''
            })
        }
        
        /**
         * 算法
         */
        digestMethod(text) {
            return text
        }
    
    11). 效果
    签名验证.gif

    注:RSA使用公钥加密,私钥解密。 私钥签名,公钥验证。服务器端存储私钥。

    相关文章

      网友评论

        本文标题:React Native RSA加密

        本文链接:https://www.haomeiwen.com/subject/pxoayftx.html