React Native 是一种跨平台的移动应用程序开发框架，允许开发人员使用 JavaScript 和 React 编写移动应用。react-native-auth 是一个用于 React Native 应用程序的简单身份验证库，使得为应用程序添加用户身份验证成为了一个容易的任务。本文将详细介绍如何使用 npm 包 react-native-auth 来实现 React Native 应用的身份验证功能。
安装
要使用 react-native-auth，需要先在项目中安装该包。可以通过 npm 安装，打开终端并确保在正确的目录下运行以下命令：
npm install --save react-native-auth
配置
接下来，您需要在应用程序中导入 react-native-auth。
import { LoginButton } from "react-native-auth";在在导入后，您需要添加一些配置，包括您的缺省应用 ID 和服务端点。缺省应用 ID 为客户端应用程序的唯一标识符，而服务端点用于向 Azure AD B2C 进行身份验证。您可以在 Azure 门户中创建一个 Azure AD B2C 应用程序并获取这些值。
const config = {
application_id: "your-application-id",
endpoints: {
signIn: "your-signin-endpoint",
signUp: "your-signup-endpoint",
resetPassword: "your-reset-password-endpoint"
}
};使用
现在您的 react-native-auth 配置已完成，您可以在应用中使用 LoginButton 组件：
<LoginButton
authority={"https://login.microsoftonline.com/tfp/tenant.onmicrosoft.com/B2C_1_platform_signin"}
client_id={"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"}
scopes={["openid", "profile", "email"]}
onRedirectSuccess={() => console.log("Login successful")}
onRedirectError={(error) => console.log(error)}
/>该组件渲染一个 Login 按钮，用户点击该按钮将跳转到身份验证服务器进行身份验证。在这个例子中，您提供了登录服务器、客户端 ID 和必选的 scope 列表（用于请求用户的详细信息）。
当用户成功输入凭据并被验证时，onRedirectSuccess 回调将被调用，而在出现错误时，onRedirectError 回调将被调用。
结论
在本文中，您已经学习了如何使用 npm 包 react-native-auth 来实现 React Native 应用的身份验证组件。您已经知道如何使用 LoginButton 组件来渲染一个登录按钮，及如何通过配置一个缺省的应用 ID 和服务端点来使用 react-native-auth。
react-native-auth 简化了 React Native 应用程序的身份验证过程，让您能够快速构建更安全的应用程序。祝您使用愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f91238a385564ab6fd4