在 React 项目中使用 Auth0 并集成到后端服务的配置步骤详解
在 React 项目中使用 Auth0 并集成到后端服务的配置步骤如下:
1. 在 Auth0 创建应用程序
- 登录到 Auth0 Dashboard.
- 导航到 “Applications” (应用程序) 部分并点击 “Create Application” (创建应用程序).
- 为您的应用程序命名并选择应用类型为 “Single Page Web Applications” (单页 Web 应用).
- 点击 “Create” (创建).
2. 配置 Auth0 应用程序
1.在应用程序的设置页面, 设置以下字段:
- Allowed Callback URLs: http://localhost:3000/callback (开发环境的本地地址)
- Allowed Logout URLs: http://localhost:3000 (开发环境的本地地址)
- Allowed Web Origins: http://localhost:3000 (开发环境的本地地址)
2.保存更改。
3. 在 React 项目中安装 Auth0 SDK
在 React 项目根目录下,打开终端并运行:
npm install @auth0/auth0-react
4. 在 React 项目中配置 Auth0
创建一个名为 auth_config.json
的文件,包含以下内容:
{ "domain": "YOUR_AUTH0_DOMAIN", "clientId": "YOUR_AUTH0_CLIENT_ID", "audience": "YOUR_API_IDENTIFIER" }
在 src
目录下创建一个名为 auth0-provider-with-history.js
的文件:
import React from "react"; import { useNavigate } from "react-router-dom"; import { Auth0Provider } from "@auth0/auth0-react"; import config from "./auth_config.json"; const Auth0ProviderWithHistory = ({ children }) => { const navigate = useNavigate(); const onRedirectCallback = (appState) => { navigate(appState?.returnTo || window.location.pathname); }; return ( <Auth0Provider domain={config.domain} clientId={config.clientId} audience={config.audience} redirectUri={window.location.origin} onRedirectCallback={onRedirectCallback} > {children} </Auth0Provider> ); }; export default Auth0ProviderWithHistory;
在 src/index.js
文件中使用 Auth0ProviderWithHistory
包裹应用程序:
import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import Auth0ProviderWithHistory from './auth0-provider-with-history'; import App from './App'; ReactDOM.render( <BrowserRouter> <Auth0ProviderWithHistory> <App /> </Auth0ProviderWithHistory> </BrowserRouter>, document.getElementById('root') );
5. 在 React 组件中使用 Auth0
使用 useAuth0
钩子访问 Auth0 认证状态:
import React from "react"; import { useAuth0 } from "@auth0/auth0-react"; const Profile = () => { 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 Profile;
创建登录和登出按钮:
import React from "react"; import { useAuth0 } from "@auth0/auth0-react"; const LoginButton = () => { const { loginWithRedirect } = useAuth0(); return <button onClick={() => loginWithRedirect()}>Log In</button>; }; const LogoutButton = () => { const { logout } = useAuth0(); return <button onClick={() => logout({ returnTo: window.location.origin })}>Log Out</button>; }; export { LoginButton, LogoutButton };
6. 集成到后端服务
在后端服务中验证 JWT 令牌。以 Go 为例,使用 github.com/auth0/go-jwt-middleware
和 github.com/form3tech-oss/jwt-go
:
package main import ( "net/http" "github.com/auth0/go-jwt-middleware" "github.com/dgrijalva/jwt-go" "github.com/gorilla/mux" ) var myJwtMiddleware = jwtmiddleware.New(jwtmiddleware.Options{ ValidationKeyGetter: func(token *jwt.Token) (interface{}, error) { audience := "YOUR_API_IDENTIFIER" checkAud := token.Claims.(jwt.MapClaims).VerifyAudience(audience, false) if !checkAud { return token, fmt.Errorf("invalid audience") } iss := "https://YOUR_AUTH0_DOMAIN/" checkIss := token.Claims.(jwt.MapClaims).VerifyIssuer(iss, false) if !checkIss { return token, fmt.Errorf("invalid issuer") } cert, err := getPemCert(token) if err != nil { return nil, err } return jwt.ParseRSAPublicKeyFromPEM([]byte(cert)) }, SigningMethod: jwt.SigningMethodRS256, }) func main() { r := mux.NewRouter() r.Handle("/api/private", myJwtMiddleware.Handler(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) { w.Write([]byte("This is a private endpoint")) }))) http.ListenAndServe(":8080", r) } func getPemCert(token *jwt.Token) (string, error) { // Implementation to get the PEM certificate }
在 React 项目中,使用 getAccessTokenSilently
方法获取访问令牌并将其添加到 API 请求的 Authorization
头部:
import React from "react"; import { useAuth0 } from "@auth0/auth0-react"; import axios from "axios"; const CallApi = () => { const { getAccessTokenSilently } = useAuth0(); const callApi = async () => { try { const token = await getAccessTokenSilently(); const response = await axios.get("http://localhost:8080/api/private", { headers: { Authorization: `Bearer ${token}`, }, }); console.log(response.data); } catch (error) { console.error(error); } }; return <button onClick={callApi}>Call API</button>; }; export default CallApi;
通过以上步骤,您可以将 Auth0 集成到 React 项目并与后端服务交互。
到此这篇关于在 React 项目中使用 Auth0 并集成到后端服务的配置步骤的文章就介绍到这了,更多相关React 使用 Auth0 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
React Router 5.1.0使用useHistory做页面跳转导航的实现
本文主要介绍了React Router 5.1.0使用useHistory做页面跳转导航的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2021-11-11详解Stack Navigator中使用自定义的Render Callback
这篇文章主要为大家介绍了Stack Navigator中使用自定义的Render Callback使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-10-10
最新评论