---
title: "はじめに"
description: "XID Cloud にサインアップし、アプリを作成してトークンを検証します。"
locale: "ja"
---

> Documentation Index
> Fetch the relevant documentation index at: https://xid.fngx.org/ja/llms.txt
> Use this file to discover all available pages before exploring further.

# はじめに

## XID Cloud で始める

XID Cloud は `https://xid.dev` で動いており、無料です。必要なのは組織、アプリケーション、数行のコードです。

- このページ上部の「無料で始める」を選びます。サインアップして組織に名前を付けると、XID が組織を作成してコンソールを開きます。
- コンソールで「アプリケーション」を開き、アプリケーションを作成します。アプリの正確なリダイレクト URI を登録し、クライアント ID をコピーします。
- アプリを `XidProvider` で囲み、issuer に `https://xid.dev` とクライアント ID を指定します。その後、バックエンドで `authenticateRequest` を使ってアクセストークンを検証します。

```tsx
import { XidProvider } from '@xid-kit/react'

export function App() {
  return (
<XidProvider
  mode="oidc"
  issuer="https://xid.dev"
  clientId="client_abc123"
  redirectUri="https://app.example.com/auth/callback"
>
  <Layout />
</XidProvider>
  )
}
```

```ts
import { authenticateRequest } from '@xid-kit/backend'

const state = await authenticateRequest(request, {
  jwtKey: env.XID_JWKS_PUBLIC_KEY,
  issuer: 'https://xid.dev',
})
if (!state.isSignedIn) return new Response('Unauthorized', { status: 401 })
```

SDK は XID リポジトリでソースとして配布しています。標準の OIDC ライブラリも下記のエンドポイントで使えます。

セルフホストのインスタンスでは、`https://xid.dev` の代わりに自分のインスタンスのドメインを使います。デプロイ手順は[セルフホスティング](/ja/self-hosting)にあります。

## ベース URL

XID は ID プロバイダーです。インスタンスドメインは OIDC 発行者、API ベース URL、Hosted Auth ベース URL、コンソールベース URL です。組織はポリシー、ブランド設定、メンバーシップ、リソース分離を提供します。

まずインスタンスドメインから `/.well-known/openid-configuration` を読み込みます。ディスカバリードキュメントは、その発行者の認可、トークン、ユーザー情報、ログアウト、JWKS エンドポイントをアプリに提供します。

| 画面 | パス | 使用 |
| --- | --- | --- |
| OIDC ディスカバリー | `/.well-known/openid-configuration` | リライングパーティを設定する前に発行者メタデータを読み取ります。 |
| 認可 | `/authorize` | ユーザーを統合 Hosted Auth フローへリダイレクトします。 |
| トークン | `/token` | 認可コードまたはリフレッシュトークンを交換します。 |
| ユーザー情報 | `/userinfo` | 有効なアクセストークンのクレームを読み取ります。 |
| 管理 API | `/v1/*` | バックエンドから組織リソースを管理します。 |

## 最小構成の統合

- OIDC アプリケーションを作成し、完全一致のリダイレクト URI 値を登録します。
- ブラウザーとネイティブクライアントには PKCE S256 付きの認可コードフローを使用します。
- 発行者と JWKS URI に対して ID トークンとアクセストークンを検証します。
- リフレッシュトークンはサーバー側、または安全なネイティブ認証情報ストアに保存します。

## 認可リクエスト

```mermaid
sequenceDiagram
  participant Browser
  participant RP
  participant XID
  RP->>Browser: /authorize + PKCE S256
  Browser->>XID: /authorize + PKCE S256
  XID->>Browser: /sign-in
  Browser->>XID: WebAuthn / SSO
  XID->>Browser: code
  Browser->>RP: code
  RP->>XID: /token + PKCE S256
  XID->>RP: ID token + access token
```

```js
const authorizeUrl = new URL('https://xid.dev/authorize')
authorizeUrl.searchParams.set('client_id', clientId)
authorizeUrl.searchParams.set('redirect_uri', redirectUri)
authorizeUrl.searchParams.set('response_type', 'code')
authorizeUrl.searchParams.set('scope', 'openid profile email')
authorizeUrl.searchParams.set('code_challenge', codeChallenge)
authorizeUrl.searchParams.set('code_challenge_method', 'S256')
```

Source: https://xid.fngx.org/ja/getting-started/index.mdx