如何使用用户认证构建React应用

用户认证是通过使用一些参数（如用户名、密码等）来保护用户信息的过程。这有助于用户在特定网站上访问其特权和功能。这种认证几乎在今天的各个地方都被使用。一些示例包括银行业务、订票、在线视频流平台等。 **** 我们将使用React JS，一个JavaScript前端库，以及Auth0，一个可以帮助我们使认证友好且安全的框架。

现在让我们来了解如何使用用户认证构建React应用，以下是实现的步骤。

步骤1： 创建一个新的React JS应用，使用以下命令：

npx create-react-app react-authenticator

这将在新文件夹react-authenticator中创建所有必要的起始文件。

步骤2： 现在使用“cd”命令切换到react-authenticator文件夹：

cd react-authenticator

项目结构： 您的文件夹结构应该如下所示：

如何使用用户认证构建React应用

现在，我们需要安装auth0库，以便进行身份验证过程。为此，请使用以下命令：

npm install @auth0/auth0-react

这将安装auth0。现在让我们进入一些编码。打开src文件夹内名为index.js的文件。首先让我们了解一下我们在index.js中做了什么

我们从auth0库中导入 Auth0Provider组件 。我们将我们的”App”包装在Auth0组件中，以便我们可以进一步使用auth0提供的hook。在Auth0Provider组件内部，我们传递域和clientID。

您可以获取自己的域和clientID。为此，请访问“https://auth0.com/”并注册以创建自己的帐户。创建之后，您将看到一个仪表板。点击创建应用程序并选择单页应用程序。现在，它会要求您使用哪种技术。选择React。就这样。现在，在您的应用程序中，转到设置，您将找到独特于您的域和clientID。

说明： 我们将 domain 和 clientID 传递给 Auth0Provider组件 ，以便它能够识别您所指的应用程序。然后，我们将’window.location.origin’传递给redirectUri。因此，每当进行身份验证时，用户将被重定向到原始页面或主页。为了使其正常工作，再次打开auth0网站上的应用程序。现在，将允许的回调URL，允许的注销URL和允许的Web来源全部设置为http://localhost:3000。这就是index.js的全部内容。

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Auth0Provider } from '@auth0/auth0-react';
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Auth0Provider
        domain='dev-mf6lqfng.us.auth0.com'
        clientId='5c1HQIOd6HlVEi2CLLfTPO7HCImJ9qZr'
        redirectUri={window.location.origin}>
        <App />
    </Auth0Provider>
);

现在，在同一src文件夹内，创建一个名为 components 的文件夹。在components文件夹内，创建三个文件： LoginButton.js，LogoutButton.js， 和 Profile.js 。现在您的文件夹结构应如下所示：

如何使用用户认证构建React应用

npm install bootstrap

让我们从LoginButton.js开始。我们导入了名为useAuth0的hook，它提供了身份验证的方法。第一个方法是 ‘loginWithRedirect’ 。当调用此方法时，它会将用户带到登录门户，并在登录完成后将用户带到主页。我们创建了一个名为 ‘Log In’ 的按钮，其中调用了loginWithRedirect方法。接下来的方法是 ‘isAuthenticated’ 。这是useAuth0 hook的另一个方法，它返回一个布尔值：true或false。因此，在if条件中，我们说 ‘!isAuthenticated’ ，即如果用户未登录，则仅显示 ‘Log In’ 按钮。最后，我们导出LoginButton。

LoginButton.js

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
 
const LoginButton = () => {
    const { loginWithRedirect, isAuthenticated } = useAuth0();
    if (!isAuthenticated) {
        return <button className="btn btn-primary 
            mx-5 my-5 px-4"
            onClick={() => loginWithRedirect()}>
            Log In</button>;
    }
};
 
export default LoginButton;

在继续进行 Logout.js 之前，我们首先需要编写 Profile.js。在 Profile.js 中，我们使用 useAuth0 hook 提供的用户对象。一旦用户登录，它将用户信息存储为一个对象。因此，在 return 语句中，我们显示了用户的姓名、名字、姓氏、电子邮件和 sub。这些值是通过 auth0 自动存储的。

Profile.js

import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';
 
const Profile = () => {
    const { user } = useAuth0();
 
    return (
        <>
            <div className="container">
                <p className="userInfo" id="userInfo1">
                    Name: {user.name}</p>
                <p className="userInfo" id="userInfo2">
                    Given Name: {user.given_name}</p>
                <p className="userInfo" id="userInfo3">
                    Family Name: {user.family_name}</p>
                <p className="userInfo" id="userInfo4">
                    Email: {user.email}</p>
                <p className="userInfo" id="userInfo5">
                    Sub: {user.sub}</p>
            </div>
        </>
    )
}
 
export default Profile

对于这个特定的组件，我们将编写一些自定义的CSS。所以，在src文件夹中打开App.css文件。这个App.css文件还包含了一些自定义CSS用于退出按钮和App.js。其余的CSS是通过使用Bootstrap来应用的。

App.css

* {
    margin: 0;
    padding: 0;
}
 
.appName {
    color: #fff;
}
 
.logoutBtn {
    margin: auto;
}
 
.userInfo {
    background-color: #d9d9d9;
    box-shadow: 5px 0px 0px grey;
    width: 35%;
    padding: 20px;
    border-radius: 6px;
    font-weight: 600;
}

最后，我们将完成我们的LogoutButton.js组件。在这种情况下，我们正在使用logout方法。代码的工作方式类似于LoginButton.js。这次我们在说 如果(isAuthenticated) 也就是说，如果用户已登录，则返回注销按钮和Profile组件。这是我们通过Profile.js导出的组件，并且在代码顶部导入了相同的组件。另外，在注销按钮内部，我们说了 ‘returnTo: window.location.origin’ ，这将在用户注销后将其带回首页。

LogoutButton.js

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
import Profile from "./Profile";
 
const LogoutButton = () => {
    const { logout, isAuthenticated } = useAuth0();
 
    if (isAuthenticated) {
        return (
            <>
                <button className="btn btn-primary 
                    mx-5 my-5 px-4 logoutBtn"
                    onClick={() => logout({ returnTo: window.location.origin })}>
                    Log Out
                </button>
                <br />
                <Profile />
            </>
        );
    }
};
 
export default LogoutButton;

现在，最后，让我们编写App.js，它将渲染所有我们的组件。在src文件夹中，打开App.js并编写以下内容。我们首先显示一个导航栏，然后是我们导出的两个组件，即LoginButton和LogoutButton。我们在代码的顶部导入了这两个组件。此外，我们还导入了App.css和bootstrap的路径，以获取必要的CSS样式。

App.js

import './App.css';
import LoginButton from './components/LoginButton';
import LogoutButton from './components/LogoutButton';
import 'bootstrap/dist/css/bootstrap.min.css';
 
function App() {
    return (
        <>
            <nav className="navbar bg-dark">
                <div className="container-fluid">
                    <span className="appName">
                        React User Authentication</span>
                </div>
            </nav>
            <LoginButton />
            <LogoutButton />
        </>
    );
}
 
export default App;

运行该应用的步骤：

在终端中写入以下代码来运行该应用程序：