Node.js+React全栈应用集成Auth0谷歌认证实现步骤咨询

一、Auth0平台基础配置 #

• 登录Auth0控制台，创建Regular Web Application类型的应用
• 在应用设置页配置以下项：
  • 允许的回调URL：http://localhost:3000/callback
  • 允许的注销URL：http://localhost:3000
  • 允许的Web Origin：http://localhost:3000
  • 保存后记录下Domain、Client ID、Client Secret三个参数，前后端都会用到
• 进入Connections > Social页面，启用Google连接，按提示绑定谷歌OAuth应用（需在谷歌开发者平台创建应用，获取对应Client ID和Secret填入Auth0）

二、Node.js后端（PORT 5000）集成 #

1. 安装依赖

npm install express cors jsonwebtoken jwks-rsa

2. 编写JWT验证中间件

// middleware/auth.js
const jwt = require('jsonwebtoken');
const jwksRsa = require('jwks-rsa');

const authConfig = {
  domain: '你的Auth0 Domain',
  audience: '你的Auth0 Client ID'
};

const checkJwt = jwt({
  secret: jwksRsa.expressJwtSecret({
    cache: true,
    rateLimit: true,
    jwksRequestsPerMinute: 5,
    jwksUri: `https://${authConfig.domain}/.well-known/jwks.json`
  }),
  audience: authConfig.audience,
  issuer: `https://${authConfig.domain}/`,
  algorithms: ['RS256']
});

module.exports = checkJwt;

3. 配置Express服务器及受保护路由

// server.js
const express = require('express');
const cors = require('cors');
const checkJwt = require('./middleware/auth');

const app = express();
const PORT = 5000;

// 配置CORS允许前端跨域访问
app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true
}));

// 受保护接口示例，仅携带有效令牌可访问
app.get('/api/protected', checkJwt, (req, res) => {
  res.json({
    message: '这是受保护的后端接口',
    userInfo: req.user
  });
});

app.listen(PORT, () => {
  console.log(`服务器运行在端口 ${PORT}`);
});

三、React前端（PORT 3000）集成 #

1. 安装Auth0 React SDK

npm install @auth0/auth0-react

2. 在入口文件配置Auth0 Provider

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Auth0Provider } from '@auth0/auth0-react';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Auth0Provider
    domain="你的Auth0 Domain"
    clientId="你的Auth0 Client ID"
    authorizationParams={{
      redirect_uri: window.location.origin + '/callback'
    }}
  >
    <App />
  </Auth0Provider>
);

3. 编写登录/注销组件

// src/components/AuthControls.js
import { useAuth0 } from '@auth0/auth0-react';
import React from 'react';

const AuthControls = () => {
  const { loginWithRedirect, logout, isAuthenticated } = useAuth0();

  return (
    <div>
      {!isAuthenticated ? (
        <button onClick={() => loginWithRedirect()}>用谷歌账号登录</button>
      ) : (
        <button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}>注销账号</button>
      )}
    </div>
  );
};

export default AuthControls;

4. 编写受保护页面示例（对接后端接口）

// src/components/ProtectedContent.js
import { useAuth0 } from '@auth0/auth0-react';
import React, { useEffect, useState } from 'react';

const ProtectedContent = () => {
  const { getAccessTokenSilently, isAuthenticated } = useAuth0();
  const [backendData, setBackendData] = useState(null);

  useEffect(() => {
    const fetchProtectedData = async () => {
      try {
        const token = await getAccessTokenSilently();
        const res = await fetch('http://localhost:5000/api/protected', {
          headers: {
            Authorization: `Bearer ${token}`
          }
        });
        const data = await res.json();
        setBackendData(data);
      } catch (err) {
        console.error('获取受保护数据失败：', err);
      }
    };

    isAuthenticated && fetchProtectedData();
  }, [getAccessTokenSilently, isAuthenticated]);

  if (!isAuthenticated) {
    return <p>请先登录查看此内容</p>;
  }

  return (
    <div>
      <h3>受保护内容</h3>
      {backendData && (
        <div>
          <p>{backendData.message}</p>
          <p>用户信息：{JSON.stringify(backendData.userInfo)}</p>
        </div>
      )}
    </div>
  );
};

export default ProtectedContent;

5. 在App组件中组合使用

// src/App.js
import React from 'react';
import AuthControls from './components/AuthControls';
import ProtectedContent from './components/ProtectedContent';

function App() {
  return (
    <div className="App">
      <AuthControls />
      <ProtectedContent />
    </div>
  );
}

export default App;

四、功能测试 #

• 启动后端：node server.js
• 启动前端：npm start
• 访问http://localhost:3000，点击登录按钮选择谷歌账号完成认证，成功跳转后即可看到受保护页面加载后端返回的数据

内容的提问来源于stack exchange，提问作者PRITI SINGH