在没有任何第三方服务的情况下建立一个安全的认证系统是一项具有挑战性的任务，而且更容易出错。Auth0是一个第三方服务，它允许开发人员快速地将认证添加到他们的应用程序。
在本教程中，我们将研究如何用Auth0 React SDK保护你的React应用程序。
为了登录用户，我们的应用程序会重定向到一个Auth0可定制的页面。在成功完成登录后，Auth0会将用户重定向到我们的应用程序，并返回认证和用户信息。
项目设置
首先在你的机器上**创建react应用**。
注册一个Auth0账户
我们需要创建一个账户来使用Auth0服务，所以**注册一个免费的Auth0账户。**
完成注册步骤后，继续前进，创建一个新的应用程序。点击创建新的应用程序后，我们可以选择创建一个本地应用程序、单页Web应用程序、Web应用程序，甚至是CLI。
给你的应用程序起一个好的名字，由于我们正在建立React应用程序，所以选择单页Web应用程序。
一旦你创建了应用程序，Auth0会带你到应用程序仪表板。在仪表板上，点击设置并复制 域名 和 客户端ID 我们将在后面使用。
现在，向下滚动，你会看到应用URI。添加URLhttp://localhost:3000为
- 允许的回调URL：登录后重定向用户
- 允许注销的URL：注销后重定向用户
- 允许的网络源头:默默地刷新认证令牌，用户在下次访问应用程序或刷新页面时将被注销。
向下滚动到底部，点击保存更改。
安装Auth0 React SDK
现在，在react应用中安装Auth0 React SDK。
npm install @auth0/auth0-react
然后，在项目的根部创建一个**.env**文件，并粘贴我们之前复制的域名和客户ID。
REACT_APP_AUTH0_DOMAIN = your domain
REACT_APP_AUTH0_CLIENT_ID = your client id
在index.js文件中，用Auth0Provider包住根组件App。Auth0 React SDK使用React Context 来管理应用程序的认证。你可以在这里了解更多关于React Context的信息。
// index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { Auth0Provider } from "@auth0/auth0-react";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<Auth0Provider
domain={process.env.REACT_APP_AUTH0_DOMAIN}
clientId={process.env.REACT_APP_CLIENT_ID}
redirectUri={window.location.origin}
>
<App />
</Auth0Provider>
);
运行你的React应用程序，确保没有与Auth0相关的错误。
登录和注销组件
现在，我们将为认证事件创建3个组件。登录、注销和用户。
在 控件目录中创建新的文件夹C***omponents。**在src/components/*里面创建3个文件
Login.jsx, Logout.jsx, User.jsx
// Login.jsx
import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
const Login = () => {
const { loginWithRedirect } = useAuth0();
return <button onClick={() => loginWithRedirect()}>Log In</button>;
};
export default Login;
首先，我们导入 useAuth0钩子，这在Auth0 React SDK中是可用的。
然后，我们使用 loginWithRedirect方法，该方法是由 使用Auth0钩子。 loginWithRedirect方法将用户带到Auth0通用登录页面。登录后，它将用户重定向到应用程序。
// Logout.jsx
import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
const Logout = () => {
const { logout } = useAuth0();
return (
<button onClick={() => logout({ returnTo: window.location.origin })}>
Log Out
</button>
);
};
export default Logout;
同样地，对于注销，我们有 *logout()*方法，这是Auth0 React SDK提供的。它将用户重定向到/v2/logoutAuth0端点以清除登录会话，然后将用户带回应用程序。
// User.jsx
import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
const User = () => {
const { user, isAuthenticated, isLoading } = useAuth0();
if (isLoading) {
return <div>Loading ...</div>;
}
return (
isAuthenticated && (
<div>
<img src={user.picture} alt={user.name} />
<h2>{user.name}</h2>
<p>{user.email}</p>
</div>
)
);
};
export default User;
用户组件将被用来显示用户的信息。我们有一个 用户对象在 useAuth0钩子，我们将用它来获取用户的名字、电子邮件等。为了检查用户是否通过了认证，我们将使用 isAuthenticated布尔属性，同样在useAuth0钩中可用。
现在，在App.js文件中导入所有的组件。此外，我们将需要 isAuthenticated中的 useAuth0钩子的属性来检查用户是否通过了认证。
我们想在用户没有认证的情况下显示登录按钮，在用户完成认证的情况下显示注销按钮。要做到这一点，我们只是使用条件语句。
// App.js
import logo from "./logo.svg";
import { useAuth0 } from "@auth0/auth0-react";
import "./App.css";
import Logout from "./Components/Logout";
import User from "./Components/User";
import Login from "./Components/Login";
function App() {
const { isAuthenticated } = useAuth0();
return (
<div className="App">
{!isAuthenticated ? (
<div>
<p>Login.</p>
<Login />
</div>
) : (
<div>
<Logout />
<User />
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
)}
</div>
);
}
export default App;
保存文件并启动React应用程序。我们现在都完成了。如果你能坚持到这里，请拍拍自己的肩膀。这就是结果。
结语
在本教程中，我们用Auth0完成了React应用程序中的用户认证。这只是认证的简单实现。你可以在Auth0的官方文档中了解更多关于如何管理路由和其他一切。
