RN实现双向认证

有的时候我们会为了APP的安全做很多措施,就比如双向认证,通过证书帮助我们做通信加密。我们通过以下几个问题帮助我们更进一步地了解和实施。

  1. 什么是双向认证?
  2. https是双向认证吗?
  3. SSL/TLS Pinning和双向认证的区别?

双向认证实际就是通信双方互相认证的一个过程,做的比较多的就是客户端和服务端的相互认证,就是双方在通信的时候先校验下双方是否是合法的,注意是双方都要校验

有的同学就想,那https的校验过程属于双向认证吗?接下来,我们先来看下它的过程

这里借用其它网站的一张图,这个过程实际就是SSL/TLS加密的过程

1.客户端发送请求

2.服务端把申请的证书(就是上面服务端生成的公钥私钥,实际上证书不仅包含这些)  发给客户端

3。客户端利用本地环境的ca证书(一般是由公共权威的机构内置在手机或电脑内)检查服务端证书合法性后,生成随机key,并用证书里的公钥加密发给服务端

4.服务端接收到后,利用私钥对客户端key的hash加密,发给客户端

5.客户端用公钥解密后看自己的key的hash是否一致

6.如果一致将会把生成的对称算法和密钥用服务端的公钥发给对方,然后就开始传输数据 

通过这几个步骤我们发现,只有客户端校验了服务端的证书,但服务端并没有对客户端进行细致的校验,所以我们可以通过不同客户端向服务端发送请求。

那么问题来了,出于更高规格的安全考虑,我可不可以让我的服务端只接受我APP里发出的请求呢?

前端大概思路如下:

1. 生成自签的客户端和服务端证书,拿到前端的客户端证书和ca证书

2. 安卓端需要先将客户端证书的公钥和私钥转成p12格式,再转成bks格式;ios端p12就可以了

3. 然后通过rn的原生模块嵌入到项目,具体可以看下rn的官方文档

这样在通信的时候,客户端收到服务端的证书会使用自己APP内嵌的自签ca证书去校验服务端,服务端也会使用自签的ca证书去校验客户端的证书,这样就可以实现只有自家的那些APP可以和服务端通信了

注意:因为APP内嵌了证书,而APP又容易解包,所以就要做好APP的防护了!

另外,有的同学可能了解过SSL Pinning,我们知道SSL Pinning有两种策略,一种是把服务端证书放APP,一种是放服务端的公钥,然后通过证书或公钥对服务端进行合法校验。

但不管是哪种方式,实际上还是客户端在校验服务端罢了。

参考文章:HTTP 与 HTTPS 的区别

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Native实现数据表格的思路与在普通的 Web 应用中类似,都是需要使用数据渲染表格。下面是一个简单的实现步骤: 1. 通过请求获取需要展示的数据,将数据存储在状态变量中。 2. 根据数据渲染表格的头部,可以使用 `View` 和 `Text` 组件来实现。 3. 根据数据渲染表格的内容。可以使用数组的 `map` 方法遍历数据,使用 `View` 和 `Text` 组件来展示每一行数据。 4. 可以对表格的头部和内容进行样式的调整,例如设置表格的宽度、字体大小和颜色等。 下面是一个简单的代码示例,实现了一个包含表格头部和内容的数据表格: ```jsx import React, { useState, useEffect } from 'react'; import { View, Text, StyleSheet } from 'react-native'; function DataTable() { const [data, setData] = useState([]); useEffect(() => { // 发送请求获取数据 fetch('https://example.com/data') .then(response => response.json()) .then(data => setData(data)) .catch(error => console.error(error)); }, []); return ( <View style={styles.table}> <View style={styles.header}> <Text style={styles.headerText}>Name</Text> <Text style={styles.headerText}>Age</Text> <Text style={styles.headerText}>Gender</Text> </View> {data.map(item => ( <View style={styles.row} key={item.id}> <Text style={styles.text}>{item.name}</Text> <Text style={styles.text}>{item.age}</Text> <Text style={styles.text}>{item.gender}</Text> </View> ))} </View> ); } const styles = StyleSheet.create({ table: { borderWidth: 1, borderColor: '#ccc', margin: 10, }, header: { flexDirection: 'row', backgroundColor: '#eee', padding: 10, }, headerText: { fontWeight: 'bold', flex: 1, textAlign: 'center', }, row: { flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: '#ccc', padding: 10, }, text: { flex: 1, textAlign: 'center', }, }); ``` 在这个代码示例中,我们通过 `fetch` 发送请求获取数据,并将数据存储在状态变量 `data` 中。在组件的返回值中,我们先展示了表格的头部,使用 `View` 和 `Text` 组件来实现。然后我们使用数组的 `map` 方法遍历数据,使用 `View` 和 `Text` 组件来展示每一行数据。我们还对表格的头部和内容进行了样式的调整,例如设置了表格的宽度、字体大小和颜色等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值