🌐 Nodejs.cn
新建

在 v0 中打开

PreviousNext

将你的注册表与 v0 中的 Open 集成。

如果你的注册表是托管的并且可以通过 URL 公共访问，你可以使用 https://v0.dev/chat/api/open?url=[URL] 端点在 v0 中打开注册表项。

🌐 If your registry is hosted and publicly accessible via a URL, you can open a registry item in v0 by using the https://v0.dev/chat/api/open?url=[URL] endpoint.

例如 https://v0.dev/chat/api/open?url=https://shadcn.nodejs.cn/r/styles/new-york/login-01.json

🌐 eg. https://v0.dev/chat/api/open?url=https://shadcn.nodejs.cn/r/styles/new-york/login-01.json

按钮

🌐 Button

有关如何构建你自己的 Open in v0 按钮的更多信息，请参阅 在 v0 中构建你的 Open 按钮。

🌐 See Build your Open in v0 button for more information on how to build your own Open in v0 button.

这里有一个如何在你的网站上添加 Open in v0 按钮的简单示例。

🌐 Here's a simple example of how to add a Open in v0 button to your site.

import { Button } from "@/components/ui/button"
 
export function OpenInV0Button({ url }: { url: string }) {
  return (
    <Button
      aria-label="Open in v0"
      className="h-8 gap-1 rounded-[6px] bg-black px-3 text-xs text-white hover:bg-black hover:text-white dark:bg-white dark:text-black"
      asChild
    >
      <a
        href={`https://v0.dev/chat/api/open?url=${url}`}
        target="_blank"
        rel="noreferrer"
      >
        Open in{" "}
        <svg
          viewBox="0 0 40 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="h-5 w-5 text-current"
        >
          <path
            d="M23.3919 0H32.9188C36.7819 0 39.9136 3.13165 39.9136 6.99475V16.0805H36.0006V6.99475C36.0006 6.90167 35.9969 6.80925 35.9898 6.71766L26.4628 16.079C26.4949 16.08 26.5272 16.0805 26.5595 16.0805H36.0006V19.7762H26.5595C22.6964 19.7762 19.4788 16.6139 19.4788 12.7508V3.68923H23.3919V12.7508C23.3919 12.9253 23.4054 13.0977 23.4316 13.2668L33.1682 3.6995C33.0861 3.6927 33.003 3.68923 32.9188 3.68923H23.3919V0Z"
            fill="currentColor"
          ></path>
          <path
            d="M13.7688 19.0956L0 3.68759H5.53933L13.6231 12.7337V3.68759H17.7535V17.5746C17.7535 19.6705 15.1654 20.6584 13.7688 19.0956Z"
            fill="currentColor"
          ></path>
        </svg>
      </a>
    </Button>
  )
}
<OpenInV0Button url="https://example.com/r/hello-world.json" />

身份验证

🌐 Authentication

在 v0 中打开仅支持查询参数身份验证。它不支持命名空间注册表或像在请求头中使用 Bearer 令牌或 API 密钥这样的高级身份验证方法。

🌐 Open in v0 only supports query parameter authentication. It does not support namespaced registries or advanced authentication methods like Bearer tokens or API keys in headers.

使用查询参数身份验证

🌐 Using Query Parameter Authentication

要为 v0 中的 Open 向注册表添加身份验证，请使用 token 查询参数：

🌐 To add authentication to your registry for Open in v0, use a token query parameter:

https://registry.company.com/r/hello-world.json?token=your_secure_token_here

在你的注册服务器上实现此操作时：

🌐 When implementing this on your registry server:

  1. 检查 token 查询参数
  2. 将令牌与你的认证系统进行验证
  3. 如果令牌无效或缺失，则返回 401 Unauthorized 响应
  4. shadcn CLI 和 v0 版本的 Open 都会处理 401 响应，并向用户显示适当的消息

示例实现

🌐 Example Implementation

// Next.js API route example
export async function GET(request: NextRequest) {
  const token = request.nextUrl.searchParams.get("token")
 
  if (!isValidToken(token)) {
    return NextResponse.json(
      {
        error: "Unauthorized",
        message: "Invalid or missing token",
      },
      { status: 401 }
    )
  }
 
  // Return the registry item
  return NextResponse.json(registryItem)
}