fastapi+react实现第三方登录功能示例

介绍

推荐：一个实现各个平台OAuth2的GitHub开源项目
实现利用第三方登录功能（例如 Google、GitHub、WeChat 等）通常涉及前后端的协同工作。
以下是一个根本的实现方案，利用 FastAPI 作为后端，React 作为前端。
后端（FastAPI）

用 PostgreSQL 作为数据库，并且登录 URL 将从后端动态获取。以下是详细的实现步骤：

• 安装依靠
  
  1. pip install fastapi uvicorn httpx python-jose passlib bcrypt sqlalchemy psycopg2

  复制代码
• 设置 PostgreSQL 数据库
  
  1. from sqlalchemy import create_engine
  2. from sqlalchemy.ext.declarative import declarative_base
  3. from sqlalchemy.orm import sessionmaker
  5. SQLALCHEMY_DATABASE_URL = "postgresql://user:password@localhost/dbname"
  6. engine = create_engine(SQLALCHEMY_DATABASE_URL)
  7. SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
  8. Base = declarative_base()

  复制代码
• 创建 FastAPI 应用
  
  1. from fastapi import FastAPI, HTTPException, Depends, Request
  2. from fastapi.security import OAuth2PasswordBearer
  3. from sqlalchemy import create_engine, Column, Integer, String, ForeignKey
  4. from sqlalchemy.ext.declarative import declarative_base
  5. from sqlalchemy.orm import sessionmaker, relationship
  6. from passlib.context import CryptContext
  7. from jose import JWTError, jwt
  8. import httpx
  10. app = FastAPI()
  12. # 数据库配置
  13. SQLALCHEMY_DATABASE_URL = "postgresql://user:password@localhost/dbname"
  14. engine = create_engine(SQLALCHEMY_DATABASE_URL)
  15. SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
  16. Base = declarative_base()
  18. # 密码加密
  19. pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
  21. # JWT 配置
  22. SECRET_KEY = "your-secret-key"
  23. ALGORITHM = "HS256"
  25. # OAuth2 配置
  26. oauth2_scheme = OAuth2PasswordBearer(tokenUrl="token")
  28. class User(Base):
  29.     __tablename__ = "users"
  30.     id = Column(Integer, primary_key=True, index=True)
  31.     email = Column(String, unique=True, index=True)
  32.     hashed_password = Column(String)
  33.     oauth_accounts = relationship("OAuthAccount", back_populates="user")
  35. class OAuthAccount(Base):
  36.     __tablename__ = "oauth_accounts"
  37.     id = Column(Integer, primary_key=True, index=True)
  38.     user_id = Column(Integer, ForeignKey("users.id"))
  39.     provider = Column(String, index=True)
  40.     provider_id = Column(String, index=True)
  41.     user = relationship("User", back_populates="oauth_accounts")
  43. Base.metadata.create_all(bind=engine)
  45. def get_db():
  46.     db = SessionLocal()
  47.     try:
  48.         yield db
  49.     finally:
  50.         db.close()
  52. async def get_current_user(token: str = Depends(oauth2_scheme)):
  53.     credentials_exception = HTTPException(status_code=401, detail="Could not validate credentials")
  54.     try:
  55.         payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])
  56.         email: str = payload.get("sub")
  57.         if email is None:
  58.             raise credentials_exception
  59.     except JWTError:
  60.         raise credentials_exception
  61.     db = next(get_db())
  62.     user = db.query(User).filter(User.email == email).first()
  63.     if user is None:
  64.         raise credentials_exception
  65.     return user
  67. @app.post("/token")
  68. async def login_for_access_token(form_data: OAuth2PasswordRequestForm = Depends()):
  69.     db = next(get_db())
  70.     user = authenticate_user(db, form_data.username, form_data.password)
  71.     if not user:
  72.         raise HTTPException(status_code=400, detail="Incorrect username or password")
  73.     access_token = create_access_token(data={"sub": user.email})
  74.     return {"access_token": access_token, "token_type": "bearer"}
  76. def authenticate_user(db, email: str, password: str):
  77.     user = db.query(User).filter(User.email == email).first()
  78.     if not user:
  79.         return False
  80.     if not verify_password(password, user.hashed_password):
  81.         return False
  82.     return user
  84. def verify_password(plain_password, hashed_password):
  85.     return pwd_context.verify(plain_password, hashed_password)
  87. def create_access_token(data: dict):
  88.     to_encode = data.copy()
  89.     encoded_jwt = jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM)
  90.     return encoded_jwt
  92. @app.get("/users/me")
  93. async def read_users_me(current_user: User = Depends(get_current_user)):
  94.     return current_user
  96. @app.get("/oauth/{provider}/login-url")
  97. async def get_oauth_login_url(provider: str):
  98.     redirect_uri = "http://localhost:3000/oauth/{provider}/callback"
  99.     if provider == "google":
  100.         return {
  101.             "url": f"https://accounts.google.com/o/oauth2/v2/auth?client_id=your-google-client-id&redirect_uri={redirect_uri}&response_type=code&scope=email profile"
  102.         }
  103.     elif provider == "github":
  104.         return {
  105.             "url": f"https://github.com/login/oauth/authorize?client_id=your-github-client-id&redirect_uri={redirect_uri}&scope=user:email"
  106.         }
  107.     elif provider == "wechat":
  108.         return {
  109.             "url": f"https://open.weixin.qq.com/connect/qrconnect?appid=your-wechat-app-id&redirect_uri={redirect_uri}&response_type=code&scope=snsapi_login"
  110.         }
  111.     else:
  112.         raise HTTPException(status_code=404, detail="Provider not found")
  114. @app.get("/oauth/{provider}/callback")
  115. async def oauth_callback(provider: str, request: Request):
  116.     code = request.query_params.get("code")
  117.     if not code:
  118.         raise HTTPException(status_code=400, detail="Missing code")
  120.     # 获取 access_token
  121.     async with httpx.AsyncClient() as client:
  122.         response = await client.post(f"https://{provider}.com/oauth/token", data={
  123.             "client_id": "your-client-id",
  124.             "client_secret": "your-client-secret",
  125.             "code": code,
  126.             "redirect_uri": "your-redirect-uri"
  127.         })
  128.         token_data = response.json()
  129.         access_token = token_data.get("access_token")
  131.     # 获取用户信息
  132.     async with httpx.AsyncClient() as client:
  133.         response = await client.get(f"https://{provider}.com/user", headers={"Authorization": f"Bearer {access_token}"})
  134.         user_data = response.json()
  136.     db = next(get_db())
  137.     oauth_account = db.query(OAuthAccount).filter(OAuthAccount.provider == provider, OAuthAccount.provider_id == user_data["id"]).first()
  138.     if oauth_account:
  139.         user = oauth_account.user
  140.     else:
  141.         user = db.query(User).filter(User.email == user_data["email"]).first()
  142.         if not user:
  143.             user = User(email=user_data["email"], hashed_password=pwd_context.hash("default_password"))
  144.             db.add(user)
  145.             db.commit()
  146.             db.refresh(user)
  147.         oauth_account = OAuthAccount(provider=provider, provider_id=user_data["id"], user=user)
  148.         db.add(oauth_account)
  149.         db.commit()
  150.         db.refresh(oauth_account)
  152.     access_token = create_access_token(data={"sub": user.email})
  153.     return {"access_token": access_token, "token_type": "bearer"}

  复制代码

前端（React）

• 安装依靠
  
  1. npm install axios react-router-dom

  复制代码
• 创建 React 组件
  
  1. import React from 'react';
  2. import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
  3. import axios from 'axios';
  5. const Login = () => {
  6.     const [loginUrls, setLoginUrls] = React.useState({});
  8.     React.useEffect(() => {
  9.         const fetchLoginUrls = async () => {
  10.             const providers = ['google', 'github', 'wechat'];
  11.             const urls = {};
  12.             for (const provider of providers) {
  13.                 const response = await axios.get(`/oauth/${provider}/login-url`);
  14.                 urls[provider] = response.data.url;
  15.             }
  16.             setLoginUrls(urls);
  17.         };
  18.         fetchLoginUrls();
  19.     }, []);
  21.     const handleLogin = (provider) => {
  22.         window.location.href = loginUrls[provider];
  23.     };
  25.     return (
  26.         <div>
  27.             <button onClick={() => handleLogin('google')}>Login with Google</button>
  28.             <button onClick={() => handleLogin('github')}>Login with GitHub</button>
  29.             <button onClick={() => handleLogin('wechat')}>Login with WeChat</button>
  30.         </div>
  31.     );
  32. };
  34. const Callback = ({ match }) => {
  35.     const { provider } = match.params;
  37.     React.useEffect(() => {
  38.         const params = new URLSearchParams(window.location.search);
  39.         const code = params.get('code');
  41.         axios.get(`/oauth/${provider}/callback?code=${code}`)
  42.             .then(response => {
  43.                 const { access_token } = response.data;
  44.                 localStorage.setItem('access_token', access_token);
  45.                 window.location.href = '/profile';
  46.             })
  47.             .catch(error => {
  48.                 console.error(error);
  49.             });
  50.     }, [provider]);
  52.     return <div>Loading...</div>;
  53. };
  55. const Profile = () => {
  56.     const [user, setUser] = React.useState(null);
  58.     React.useEffect(() => {
  59.         const access_token = localStorage.getItem('access_token');
  60.         axios.get('/users/me', { headers: { Authorization: `Bearer ${access_token}` } })
  61.             .then(response => {
  62.                 setUser(response.data);
  63.             })
  64.             .catch(error => {
  65.                 console.error(error);
  66.             });
  67.     }, []);
  69.     if (!user) return <div>Loading...</div>;
  71.     return (
  72.         <div>
  73.             <h1>Profile</h1>
  74.             <p>Email: {user.email}</p>
  75.         </div>
  76.     );
  77. };
  79. const App = () => {
  80.     return (
  81.         <Router>
  82.             <nav>
  83.                 <Link to="/">Home</Link>
  84.                 <Link to="/profile">Profile</Link>
  85.             </nav>
  86.             <Switch>
  87.                 <Route path="/" exact component={Login} />
  88.                 <Route path="/oauth/:provider/callback" component={Callback} />
  89.                 <Route path="/profile" component={Profile} />
  90.             </Switch>
  91.         </Router>
  92.     );
  93. };
  95. export default App;

  复制代码

总结

• 后端：利用 FastAPI 处理 OAuth2 回调，获取用户信息，并将其与现有用户关联或创建新用户。同时，提供动态获取登录 URL 的接口。
  
• 前端：利用 React 处理登录按钮和回调逻辑，从后端动态获取登录 URL，并将获取的 access_token 存储在 localStorage 中，并在用户访问个人资料页面时利用该 access_token 获取用户信息。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。