React Native RSA加密

简介: Jsencrypt框架NPM Jsencrypt1). npm安装npm i jsencrypt2). 导入import 'jsencrypt';3).

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). 效果
img_d4681d17826cffcd4bc7af2735576859.gif
加解密效果.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). 效果
img_7a126e9012c6d4f78bca78380a9e8ed7.gif
签名验证.gif

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

目录
相关文章
|
2月前
|
开发框架 前端开发 JavaScript
探索前端开发中的跨平台框架React Native
本文将介绍前端开发中一种备受关注的跨平台框架React Native,通过比较原生应用与React Native的优缺点,探讨其在实际项目中的应用以及未来发展趋势。
|
2月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
2月前
|
算法 安全 Java
Java 实现 RSA 非对称加密算法-加解密和签名验签
Java 实现 RSA 非对称加密算法-加解密和签名验签
|
2月前
|
机器学习/深度学习 算法 安全
【加密算法】RSA非对称加密算法简介
【加密算法】RSA非对称加密算法简介
|
3月前
|
前端开发 JavaScript Android开发
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
|
2月前
|
存储 前端开发 JavaScript
从零开始学习React Native开发
【2月更文挑战第1天】React Native是一种跨平台的移动应用程序框架,可以使用JavaScript和React来构建Android和iOS应用程序。本文将带您从零开始学习React Native开发,涵盖了基础知识、组件、样式、布局、API等方面。
|
2月前
|
前端开发 IDE 小程序
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
34 0
|
3月前
|
移动开发 前端开发 JavaScript
探究移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动端混合开发技术在移动应用开发领域日益流行,为开发者提供了更高效的跨平台开发方案。本文将比较三种主流混合开发技术:React Native、Weex和Flutter,从性能、生态系统和开发体验等方面进行评估,以帮助开发者在选择适合自己项目的技术时做出明智的决策。
|
3月前
|
移动开发 前端开发 weex
React Native、Weex、Flutter 混合开发技术的比较与选择
移动应用已经成为人们日常生活中不可或缺的一部分,而混合开发技术也随之崛起并逐渐成为主流。本文将比较 React Native、Weex 和 Flutter 三种混合开发技术,并探讨它们各自的优缺点,以及如何根据项目需求做出选择。
53 1
|
3月前
|
开发框架 Dart 前端开发
Flutter vs React Native:跨平台移动应用开发的终极对决
随着移动应用的普及,跨平台移动应用开发成为了一种趋势。Flutter和React Native是当前最受欢迎的跨平台开发框架之一,但它们各自有着不同的特点和优势。本文将对Flutter和React Native进行全方位比较,以帮助开发者了解两个框架的差异,从而选择适合自己的开发工具。
40 3