如何在 React Native 应用程序中保持客户端 JSON Web 令牌的安全？

Question

我们正在为 iOS 构建一个 React Native 应用程序，我们正在使用基于 node + express + jsonwebtoken 构建的内部 API。

当用户使用用户名/密码登录时，服务器会验证这些凭据并将客户端返回一个 JSON Web 令牌，然后客户端必须将其与每个 API 请求一起发送。所以 React 原生应用必须存储这个令牌。

如何将这个客户端令牌安全地存储在 React 本机应用程序中？除了将令牌存储在变量中之外，是否需要采取任何其他步骤？

Answer 1

对于 iOS，您可以将其存储在钥匙串中... https://auth0.com/docs/libraries/lock-ios/save-and-refresh-jwt-tokens

在我发现的 react native 中，有几种方法可以做到这一点。可能还有其他人。可能有更好的选择。这正是我很快发现的。

https://github.com/search?utf8=%E2%9C%93&q=react-native+keychain

对于 Android，您可以将其存储在 SharedPreferences 或更好的 KeyStore 中，因为它已在那里加密。

Answer 2

要与应用程序无关，我会使用 ASyncStorage 存储它。事实上，我正在一个新项目上对此进行测试。

Answer 3

我最近在 react-native 中构建了一个钥匙串管理器，所以我可以帮助你。

注意：此解决方案确实要求您的应用在 expo 上运行。

要在设备上本地加密和存储令牌，您可以使用名为 expo-secure-store 的包。

这将使您可以轻松访问 iOS 钥匙串和 android 密钥库系统，并且可以实现如下：

import * as SecureStore from "expo-secure-store";

/**
 * Saves the value to the ios keychain or Android keystore
 * @param {string} key => the key you want to save the value for
 * @param {any} value => the value you want to encrypt
 * @return => A promise that will reject if value cannot be stored on the device.
 */
SecureStore.setItemAsync(key, value);

/**
 * Fetches the value from the keychain/keystore for the specified key
 * @param {string} key => the key you set for the value
 * @returns {any} => A promise that resolves to the previously stored value, or null if there is no entry for the given key.
 * The promise will reject if an error occurred while retrieving the value.
 */
SecureStore.getItemAsync(key);

/**
 * Saves the value to the ios keychain or Android keystore
 * @param {string} key => the key you want to save the value for
 * @param {any} value => the value you want to encrypt
 * @return => A promise that will reject if value cannot be stored on the device.
 */
SecureStore.deleteItemAsync(key);