在 React 项目中使用 Auth0 并集成到后端服务的配置步骤详解

 更新时间:2024年07月08日 12:06:57   作者:B.-  
这篇文章主要介绍了在 React 项目中使用 Auth0 并集成到后端服务的配置步骤详解,通过本文详细步骤,您可以将 Auth0 集成到 React 项目并与后端服务交互,需要的朋友可以参考下

在 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-middlewaregithub.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函数式组件中使用MobX

    详解如何在React函数式组件中使用MobX

    MobX 是一个简洁的状态管理库,它通过透明的函数响应式编程(TFRP)使得状态管理变得简单和可扩展,下面就跟随小编一起来了解一下如何在React函数式组件中使用MobX吧
    2024-01-01
  • react中实现搜索结果中关键词高亮显示

    react中实现搜索结果中关键词高亮显示

    这篇文章主要介绍了react中实现搜索结果中关键词高亮显示,使用react实现要比js简单很多,方法都是大同小异,具体实现代码大家跟随脚本之家小编一起看看吧
    2018-07-07
  • 用React Native制作一个简单的游戏引擎

    用React Native制作一个简单的游戏引擎

    今天给大家分享的是使用React Native制作一个简单的游戏,这个游戏可以跨平台操作,本文通过实例图文相结合给大家介绍的非常详细,对React Native游戏相关知识感兴趣的朋友一起看看吧
    2021-05-05
  • 如何在React中直接使用Redux

    如何在React中直接使用Redux

    这篇文章主要介绍了如何在React中直接使用Redux,目前redux在react中使用是最多的,所以我们需要将之前编写的redux代码,融入到react当中去,本文给大家详细讲解,需要的朋友可以参考下
    2022-11-11
  • React Router 5.1.0使用useHistory做页面跳转导航的实现

    React Router 5.1.0使用useHistory做页面跳转导航的实现

    本文主要介绍了React Router 5.1.0使用useHistory做页面跳转导航的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • React网络请求发起方法详细介绍

    React网络请求发起方法详细介绍

    在编程开发中,网络数据请求是必不可少的,这篇文章主要介绍了React网络请求发起方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-09-09
  • ReactNative短信验证码倒计时控件的实现代码

    ReactNative短信验证码倒计时控件的实现代码

    本篇文章主要介绍了ReactNative短信验证码倒计时控件的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • React中Provider组件详解(使用场景)

    React中Provider组件详解(使用场景)

    这篇文章主要介绍了React中Provider组件使用场景,使用Provider可以解决数据层层传递和每个组件都要传props的问题,本文结合示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • React之PureComponent的使用作用

    React之PureComponent的使用作用

    这篇文章主要介绍了React之PureComponent的使用作用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 详解Stack Navigator中使用自定义的Render Callback

    详解Stack Navigator中使用自定义的Render Callback

    这篇文章主要为大家介绍了Stack Navigator中使用自定义的Render Callback使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10

最新评论