Feishu QRCode Login

飞书二维码登录组件是一个框架无关的 React 组件，用于实现飞书 OAuth 登录功能。组件会自动加载飞书 SDK，生成二维码，并处理扫码登录流程。

<FeishuQrcodeLogin
  clientId="your_client_id"
  redirectUri="https://your-domain.com/auth/callback"
  onLoginSuccess={(tmpCode, gotoUrl) => {
    window.location.href = gotoUrl
  }}
/>

二维码加载中...

二维码如不显示，请刷新网页

加载代码中...

简介

飞书二维码登录组件是一个框架无关的 React 组件，用于实现飞书 OAuth 登录功能。组件会自动加载飞书 SDK，生成二维码，并处理扫码登录流程。

安装

npx shadcn@latest add feishu-qrcode-login

使用

import { FeishuQrcodeLogin } from "@/components/ui/feishu-qrcode-login"

<FeishuQrcodeLogin
  clientId="cli_xxxxx"
  redirectUri="https://your-domain.com/auth/callback"
  onLoginSuccess={(tmpCode, gotoUrl) => {
    // 处理登录成功
    console.log("临时授权码:", tmpCode)
    window.location.href = gotoUrl
  }}
  onError={(error) => {
    // 处理错误
    console.error("登录失败:", error)
  }}
/>

功能特性

✅ 自动加载飞书 QRCode SDK
✅ 防止重复初始化（React 严格模式兼容）
✅ 完整的错误处理和加载状态
✅ 框架无关，支持任何 React 项目
✅ TypeScript 类型支持
✅ 支持自定义样式

示例

基本用法

<FeishuQrcodeLogin
  clientId="cli_xxxxx"
  redirectUri="https://example.com/auth/callback"
  onLoginSuccess={(tmpCode, gotoUrl) => {
    window.location.href = gotoUrl
  }}
/>

自定义样式

<FeishuQrcodeLogin
  clientId="cli_xxxxx"
  redirectUri="https://example.com/auth/callback"
  onLoginSuccess={(tmpCode, gotoUrl) => {
    window.location.href = gotoUrl
  }}
  className="shadow-xl border-2 border-primary/20"
/>

在 Card 中使用

<Card className="w-full max-w-md mx-auto">
  <CardHeader className="text-center">
    <CardTitle>欢迎登录</CardTitle>
    <CardDescription>请使用飞书移动端扫码登录</CardDescription>
  </CardHeader>
  <CardContent>
    <FeishuQrcodeLogin
      clientId="cli_xxxxx"
      redirectUri="https://example.com/auth/callback"
      onLoginSuccess={(tmpCode, gotoUrl) => {
        window.location.href = gotoUrl
      }}
    />
  </CardContent>
</Card>

API Reference

FeishuQrcodeLogin

属性	类型	默认值	描述
`clientId`	`string`	-	飞书应用的 Client ID（必需）
`redirectUri`	`string`	-	授权回调地址（必需）
`authorizeUrl`	`string`	`"https://passport.feishu.cn/suite/passport/oauth/authorize"`	飞书授权地址
`width`	`number \| string`	`300`	二维码宽度
`height`	`number \| string`	`300`	二维码高度
`state`	`string`	`window.location.origin`	自定义状态参数，用于防止 CSRF 攻击
`onLoginSuccess`	`(tmpCode: string, gotoUrl: string) => void \| Promise<void>`	-	登录成功回调函数（必需）
`onError`	`(error: Error) => void`	-	错误处理回调函数
`className`	`string`	-	自定义 CSS 类名