[译]如何使用用户身份验证构建一个 Serverless React Native App

前端充电桩
138 阅读6分钟

作者：迈克尔·巴格利；本文翻译自：www.freecodecamp.org/news/build-…

React Native已经成为移动应用开发领域的一个非常重要的工具。

有什么我不喜欢的？

它快速、跨平台、挂钩到本地模块，并使用前端开发人员熟悉的语言和模式。

此外，无服务器技术使开发人员能够部署企业级应用程序，而无需传统服务器基础架构的开销。它消除了管理应用程序后端的管理任务，同时提高了生产率。

这种无忧无虑的即插即用基础架构与React和React Native等框架很好地匹配，因为它使个人和小型团队非常容易扩展生产应用程序，而无需开销成本。

让我们学习如何创建具有用户身份验证的React Native应用程序。然后我将介绍如何将此过程与无服务器数据库集成。

目前，我的示例应用程序将只是一个有状态用户身份验证的_简单_演示——但是要有创造性，构建你感兴趣的东西！

目录

  • 如何设置您的项目
  • 注册/登录工作流程
  • 如何插入后端
  • 结论

如何设置您的项目

在您的React项目中实现无服务器有许多不同的方法，但是我们将在这个项目中使用易基-反应库。函数是有状态的，是为React和React Native构建的。

转到您的React Native项目并进行npm安装Easy base-反应。

如果您不知道如何创建React Native项目，您可以通过在控制台中执行npx create-反应-本地-app My Native App来使用create-反应-本地-app。完成后，按上述方式安装库。

此时，您可以通过运行npm运行iOS或npm运行android来打开应用程序，具体取决于您想要测试的平台。您的起点如下所示：

注册/登录工作流程

当为我们的应用程序建立工作流时，如果用户没有登录，默认情况下应该显示此视图。为了简洁起见，我的示例的样式将非常初级，但是您的样式要独特！

让我们从一些基本的路由开始，这样我们就可以根据用户是否登录来区分两个不同的视图。现在，我们将只让它自动返回false，直到我们实现适当的钩子。

如果用户没有登录，他们将显示登录或注册视图。如果用户登录，我们将显示确认消息。

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
export default function App() {
  return (
    <Router />
  );
}
function Router() {
  const isUserSignedIn = () => false;
  return (
    isUserSignedIn() ?
      <Text>Congrats! You're signed in.</Text>
      :
      <Account />
  )
}

此帐户组件将包含一个看起来熟悉的登录/注册模板。在React Native中，此视图可能如下所示：

function Account() {
  const [userVal, setUserVal] = useState("");
  const [passVal, setPassVal] = useState("");
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to React-flix!</Text>
      <TextInput value={userVal} onChangeText={e => setUserVal(e)} style={styles.accountInput} placeholder="Username" />
      <TextInput value={passVal} onChangeText={e => setPassVal(e)} style={styles.accountInput} placeholder="Password"/>
      <View style={{ display: "flex", flexDirection: "row", marginTop: 30 }}>
        <Button title="Sign In" />
        <Button title="Sign Up" />
      </View>
    </View>
  )
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  accountInput: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    width: "75%",
    margin: 10,
    fontSize: 22,
    textAlign: "center"
  },
  title: {
    fontSize: 30,
    fontWeight: "500",
    fontStyle: "italic",
    marginBottom: 30
  }
});

虽然有些基础，但此视图具有安全、功能强大的用户验证界面所需的一切功能。作为参考，这里是应用程序的屏幕截图：

如何插入后端

现在，我们将把本机应用连接到无服务器后端，以处理用户身份验证和令牌管理。

有各种各样的库旨在实现无服务器的React和React Native功能。我们将要使用的一个_叫做_Easy base。除其他外，这项服务旨在使React+无服务器变得非常直观。

开发人员可以利用该服务的项目管理界面来轻松有效地扩展他们的应用程序。我们将能够使用这个界面管理我们项目的用户。该服务的网络应用程序（截图如下）非常出色地集成了Easy base反应npm包。

我选择使用这个包的原因有两个：首先，安装和配置过程非常简单，只有一个_配置_文件。

其次，实现用户身份验证模块有很大的开销，例如会话令牌存储和网络。Easy base Provider组件处理了大部分开销，因此我们可以直接工作。

登录Easy base并创建一个新表。如果您没有帐户，请快速创建一个（它是免费的）。从那里，创建一个新项目，如下所示：

然后，在这里下载您的项目令牌（稍后我们将创建一些表）： 将新下载的ebconfig.js放在React Native项目文件夹中App.js旁边，如下所示：

├── android/
├── ios/
├── node_modules/
├── App.js
├── ebconfig.js <---
├── index.js
└── ...

接下来，我们将导入App.js:中的两个东西

  • 从./ebconfig导入eb config
  • 导入{Easy base Provider， use Easy base}

然后，我们将在这个Easy base Provider组件中包装我们的应用程序，将_eb config_作为相应的道具传递。更改如下：

import ebconfig from "./ebconfig";
import { EasybaseProvider, useEasybase } from "easybase-react";
// ...
export default function App() {
  return (
    <EasybaseProvider ebconfig={ebconfig}>
      <Router />
    </EasybaseProvider>
  )
}
// ...

此时，我们可以通过use Easy base（）钩子访问各种无服务器应用程序功能。这包括像SignIn、ign Up、set User Atorites等函数。创建的用户及其关联属性将出现在Easybase.io.的用户部分 这里有use Easy base钩子的文档。Github上也有相关信息。

因此，我们现在可以通过使用use Easy base钩子提供的相应功能填充按钮的on Press道具来完成我们的帐户组件：

function Account() {
  const [userVal, setUserVal] = useState("");
  const [passVal, setPassVal] = useState("");
  const { signIn, signUp } = useEasybase();
  const clearInputs = () => {
    setUserVal("");
    setPassVal("");
  }
  const handleSignInPress = async () => {
    await signIn(userVal, passVal);
    clearInputs();
  }
  const handleSignUpPress = async () => {
    const res = await signUp(userVal, passVal, {
      created_at: new Date().toString
    });
    if (res.success) {
      await signIn(userVal, passVal);
    }
    clearInputs();
  }
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to React-flix!</Text>
      <TextInput value={userVal} onChangeText={e => setUserVal(e)} style={styles.accountInput} placeholder="Username" />
      <TextInput value={passVal} onChangeText={e => setPassVal(e)} style={styles.accountInput} placeholder="Password"/>
      <View style={{ display: "flex", flexDirection: "row", marginTop: 30 }}>
        <Button title="Sign In" onPress={handleSignInPress} />
        <Button title="Sign Up" onPress={handleSignUpPress} />
      </View>
    </View>
  )
}

最后，我们必须处理路由器组件中使用的is User SignedIn函数。幸运的是，use Easy base钩子也提供了这个同名的函数。只需将其插入，我们就可以将其用于条件呈现。

function Router() {
  const { isUserSignedIn } = useEasybase();
  return (
    isUserSignedIn() ?
      <Text>Congrats! You're signed in.</Text>
      :
      <Account />
  )
}

就像这样，我们已经在React Native中实现了一个安全的用户身份验证工作流。请注意，如果您关闭或重新加载应用程序，您的用户将按照大多数移动平台的标准保持登录。

如何添加注销按钮

最后，我要为登录的用户添加一个注销按钮。这将需要更改当前的恭喜… 用于登录用户的_text_元素。

幸运的是，use Easy base钩子有一个带有这个名字的函数，所以我们可以编辑路由器组件如下：

function Router() {
  const { isUserSignedIn, signOut } = useEasybase();
  return (
    isUserSignedIn() ?
      <View style={styles.container}>
        <Text>Congrats! You're signed in.</Text>
        <Button title="Sign Out" onPress={signOut} />
      </View>
      :
      <Account />
  )
}

单击此新按钮将处理取消当前用户的身份验证。这将更改Easy base Provider的状态，现在应用程序将路由回帐户组件，因为 is User SignedIn（）将返回false。

结论

导航到Easy base的用户部分将显示您当前的所有用户。作为参考，以下是我创建了一系列示例用户后的样子：

请注意，在这个菜单中，您可以选择删除用户或编辑他们相应的属性。您也可以使用set User Atorites（）单独设置用户的属性。从那里，可以使用get User Atorites（）函数在前端检索属性。

有关无服务器React和React Native的更多信息，请查看Easy base的React页面。它有一些关于我的演示中尚未表达的其他主题的详细信息，但我们稍后会讨论这些内容。 _非常感谢您的阅读！_我希望这种实现用户身份验证的方法将有助于那些使用React Native进行软件开发的人。 在下一篇文章中，我将介绍如何在无服务器数据库中使用此身份验证工作流。该数据库将具有用户权限和单个记录查询功能。

avatar
文章
阅读
粉丝