快捷導(dǎo)航

在 React 項(xiàng)目中使用 Auth0 并集成到后端服務(wù)的配置步驟詳解

更新時(shí)間：2024年07月08日 12:06:57 作者：B.-

這篇文章主要介紹了在 React 項(xiàng)目中使用 Auth0 并集成到后端服務(wù)的配置步驟詳解,通過(guò)本文詳細(xì)步驟,您可以將 Auth0 集成到 React 項(xiàng)目并與后端服務(wù)交互,需要的朋友可以參考下

1. 在 Auth0 創(chuàng)建應(yīng)用程序

登錄到 Auth0 Dashboard.
導(dǎo)航到 “Applications” (應(yīng)用程序) 部分并點(diǎn)擊 “Create Application” (創(chuàng)建應(yīng)用程序).
為您的應(yīng)用程序命名并選擇應(yīng)用類型為 “Single Page Web Applications” (單頁(yè) Web 應(yīng)用).
點(diǎn)擊 “Create” (創(chuàng)建).

2. 配置 Auth0 應(yīng)用程序

1.在應(yīng)用程序的設(shè)置頁(yè)面, 設(shè)置以下字段：

Allowed Callback URLs: http://localhost:3000/callback (開發(fā)環(huán)境的本地地址)
Allowed Logout URLs: http://localhost:3000 (開發(fā)環(huán)境的本地地址)
Allowed Web Origins: http://localhost:3000 (開發(fā)環(huán)境的本地地址)

2.保存更改。

3. 在 React 項(xiàng)目中安裝 Auth0 SDK

在 React 項(xiàng)目根目錄下，打開終端并運(yùn)行：

npm install @auth0/auth0-react

4. 在 React 項(xiàng)目中配置 Auth0

創(chuàng)建一個(gè)名為 auth_config.json 的文件，包含以下內(nèi)容：

{
  "domain": "YOUR_AUTH0_DOMAIN",
  "clientId": "YOUR_AUTH0_CLIENT_ID",
  "audience": "YOUR_API_IDENTIFIER"
}

在 src 目錄下創(chuàng)建一個(gè)名為 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 包裹應(yīng)用程序：

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 鉤子訪問(wèn) Auth0 認(rèn)證狀態(tài)：

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;

創(chuàng)建登錄和登出按鈕：

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. 集成到后端服務(wù)

在后端服務(wù)中驗(yàn)證 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 項(xiàng)目中，使用 getAccessTokenSilently 方法獲取訪問(wèn)令牌并將其添加到 API 請(qǐng)求的 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;

通過(guò)以上步驟，您可以將 Auth0 集成到 React 項(xiàng)目并與后端服務(wù)交互。

到此這篇關(guān)于在 React 項(xiàng)目中使用 Auth0 并集成到后端服務(wù)的配置步驟的文章就介紹到這了,更多相關(guān)React 使用 Auth0 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: