react-native - 在 React Native 中进行身份验证的最佳实践

Question

我是 React Native 的初学者，我正在创建一个应用程序。我已经做了一些关于如何制作安全的 React Native 应用程序的研究，但我没有找到太多信息。我自己想出了一个“解决方案”，但我想确保这是正确的方法。因此，如果可能的话，我需要一些 react native/javascript/security 专家的帮助，以快速检查我的方法是否可行？

我在本文中包含了 3 个问题，但显然它们是相关的。我把它们加粗了。随意回答一个或多个问题，我感谢每一个回答!

我正在用 React Native 创建一个应用程序。为了让用户能够使用该应用程序，用户应该创建一个帐户并登录。我使用 JSON Web token 作为访问 token 来授权从应用程序向服务器发出的请求，并识别用户(我将用户 ID 存储在 JSON Web token 中)。

在我的服务器上，我首先检查访问 token 是否有效。如果是这样，我会从访问 token 中获取用户 ID 并使用此用户 ID 来识别用户。

为了额外的安全性，我还使用了刷新 token ，因为访问 token 的有效期仅为 10 分钟。当用户发送带有过期访问 token 的请求时，服务器会以 401 未授权状态进行响应。

为了使我的代码更“易于管理”，我在 react native 中创建了一个包装函数。我用这个包装函数包装了每个“请求函数”(我对服务器执行 GET/POST/PUT/DELETE 请求的每个函数)。这个包装函数检查请求的响应。如果响应状态为 200，则将响应返回给代码。如果响应状态为 401，则将刷新 token 发送到特定端点以获取新的访问 token 。当访问 token 到达应用程序时，将使用新的访问 token 再次发出先前的请求。包装函数还将新的访问 token 存储在(临时)redux(钥匙串(keychain)或共享首选项)中。 1. 包装函数是个好主意吗？对我来说，它更易于管理，因为现在我正在重用代码。

每次用户打开应用程序时，都会请求一个新的访问 token ，当用户关闭应用程序时，当前的访问 token 将被删除，即使它尚未过期。这样，我想确保每个应用程序“ session ”都以一个新的访问 token 开始。 2. 这样好吗？或者当我仍然拥有(可能)有效的访问 token 时，我应该阻止对服务器的不必要请求吗？

在我的 native 应用程序中，此包装器函数位于上下文组件中。这个“身份验证”上下文是我在 App.js 中的其他组件的包装器，如下所示:

<AuthenticationProvider>
    <AppNavigator />
</AuthenticationProvider>

这样，我的所有其他组件都可以访问我的包装函数。我的身份验证上下文如下所示:

const AuthenticationContext = createContext({
    accessToken: null,
    wrapperFunction: () => {}
})

const AuthenticationProvider = (props) => {

    let accessToken = null

    const refreshToken = useSelector(state => state.auth.refreshToken)

    const wrapperFunction = () => {
        // wrapper function
        // set the access token
        // await fetch('server endpoint')...     
    }

    return (
        <AuthenticationContext.Provider value={{ accessToken, wrapperFunction }}>
        {props.children}
        </AuthenticationContext.Provider>
    )
}

3. 使用上下文是做这样的事情的好习惯吗？

服务器端，我将每个刷新 token 存储在数据库中。当用户请求新的访问 token 时，我检查发送的请求 token 是否仍然存在于数据库中。如果没有，我已经撤销了该用户的访问权限，并且该用户应该被注销。这样，我想确保我可以“管理”用户。

Answer 1

是的，这是有道理的。其实我想不出更好的方法来管理你提到的场景。当您想在请求发送之前对其进行调整时，您将需要一个函数来执行此操作。你也可以使用一些钩子(Hook)，例如onBeforeSend和 onAfterReceive ，但在你的情况下，我没有看到任何额外的值(value)。

我不同意删除有效 token 。您仍然可以在每个应用程序启动时向服务器发送请求，以获取用户的最后数据 - 可能在另一台设备上已更改。我不明白使用新 session 启动应用程序的逻辑 - 也许更多信息？

我认为您不需要使用上下文传递 wrapperFunction/ token 。如果您可以按上下文发送用户数据，那将是最好的。您的包装函数可以直接从 asyncStorage 访问 token 。并且每个组件都可以通过导入直接调用该函数。