コンテンツにスキップ
Authrim

サンプルアプリ

概要

example-web プロジェクトは @authrim/web の完全な動作デモです。ビルドツールやフレームワークを使わない静的HTMLサイトで、主要な認証フロー（Passkey、Email Code、ソーシャルログイン、SSO）をすべて実装しています。

ソースコード: github.com/authrim/example-web

このページでは、サンプルアプリの構成、各ページの動作、自分で実行する方法を説明します。

プロジェクト構成

example-web/
├── config.js          # Authrim設定（issuer, clientId）
├── index.html         # ホームページ（認証状態、SSO、ログアウト）
├── login.html         # ログインページ（Passkey、Email Code、ソーシャル）
├── callback.html      # OAuth/ソーシャルコールバックハンドラー
├── profile.html       # ユーザープロフィール表示
└── css/
    └── style.css      # スタイルシート

package.json はありません — SDKはCDNから読み込みます：

<script src="https://unpkg.com/@authrim/web@latest/dist/authrim-web.umd.global.js"></script>

設定

すべての設定は config.js にあります：

window.AUTHRIM_CONFIG = {
  issuer: 'https://your-tenant.authrim.com',
  clientId: 'your-client-id',
};

Authrim管理パネルから取得したテナントURLとクライアントIDに置き換えてください。

管理パネルでの設定

Authrimクライアント設定に以下を登録します：

設定値
許可されたリダイレクトURIhttps://your-app.example.com/callback.html
許可されたオリジンhttps://your-app.example.com

ページ別ウォークスルー

index.html — ホームページ

ホームページはユーザーの認証状態を確認し、SSOを処理します：

flowchart TD
    start["ページ読み込み"] --> init["SDK初期化
(enableOAuth: true)"]
    init --> ssoErr{"URLにSSO
エラー?"}
    ssoErr -->|はい| clean["URLパラメータ削除"] --> showLogin["ログインボタン表示"]
    ssoErr -->|いいえ| checkSession["auth.session.get()"]
    checkSession --> hasSession{"セッション
あり?"}
    hasSession -->|はい| showUser["ユーザー情報表示"]
    hasSession -->|いいえ| ssoAttempted{"SSO試行
済み?"}
    ssoAttempted -->|いいえ| trySSO["auth.oauth.trySilentLogin()"]
    ssoAttempted -->|はい| showLogin

主な実装ポイント：

  1. SSOフロー — 初回アクセス時にアプリは auth.oauth.trySilentLogin() を呼び出し、prompt=none でIdPにリダイレクトします。IdPにアクティブセッションがあればサイレントに認証され、なければ login_required が返されてログインボタンを表示します。

  2. ループ防止 — sessionStorage.setItem('sso_attempted', 'true') で無限SSOリダイレクトループを防止します。このフラグはログイン成功時や明示的なログアウト時にクリアされます。

  3. セッション表示 — 認証済みの場合、ユーザー名、メール、セッションID、有効期限を表示します。

login.html — ログインページ

ログインページは3つの認証方法を提供します：

Passkey

// サインイン（既存ユーザー）
const result = await auth.passkey.login();
if (result.error) {
  showStatus(result.error.message, 'error');
} else {
  onLoginSuccess();  // ホームにリダイレクト
}


// サインアップ（新規ユーザー）
const result = await auth.passkey.signUp({ email: userEmail });

ページ読み込み時に auth.passkey.isSupported() を確認し、WebAuthn非対応の場合はPasskeyボタンを無効化します。

Email Code

2ステップフロー：

// ステップ1: コード送信
const sendResult = await auth.emailCode.send(email);


// ステップ2: コード検証
const verifyResult = await auth.emailCode.verify(email, code);

UIはメール入力フォームとコード入力フォームを切り替えます。

ソーシャルログイン

// ポップアップベースのソーシャルログイン
await auth.social.loginWithPopup('google');
await auth.social.loginWithPopup('github');
await auth.social.loginWithPopup('apple');

各プロバイダーは認証用のポップアップウィンドウを開きます。成功するとポップアップが自動的に閉じ、ログインページからホームにリダイレクトされます。

callback.html — コールバックハンドラー

このページはOAuthとソーシャルログインのコールバックを処理します：

const auth = await AuthrimWeb.createAuthrim({
  issuer: window.AUTHRIM_CONFIG.issuer,
  clientId: window.AUTHRIM_CONFIG.clientId,
  enableOAuth: true,
});


// 1. サイレントログインコールバックか確認
const silentResult = await auth.oauth.handleSilentCallback();
if (silentResult.status !== 'error' || silentResult.error !== 'not_silent_login') {
  return; // 処理済み（内部でリダイレクト）
}


// 2. ソーシャルログインコールバックか確認
if (auth.social.hasCallbackParams()) {
  const result = await auth.social.handleCallback();
  if (!result.error) {
    window.location.href = 'index.html';
  }
}

コールバックページは以下の順序で確認します：

  1. サイレントログインコールバック — handleSilentCallback() がSSO結果を処理してリダイレクト
  2. ソーシャルログインコールバック — handleCallback() がソーシャルログインフローを完了

profile.html — プロフィールページ

ユーザーとセッションの詳細情報を表示します：

const { data } = await auth.session.get();
if (data) {
  // user.id, user.email, user.name, user.email_verified 等を表示
  // session.id, session.expiresAt を表示
}

ローカルで実行する

方法1: シンプルHTTPサーバー

Terminal window
cd example-web
npx serve .

ブラウザで http://localhost:3000 を開きます。

方法2: VS Code Live Server

VS Codeの「Live Server」拡張機能をインストールし、index.html をLive Serverで開きます。

方法3: Python

Terminal window
cd example-web
python3 -m http.server 3000

Cloudflare Pagesへのデプロイ

example-webは静的サイトのため、デプロイは簡単です：

  1. リポジトリをGitHubにプッシュ
  2. Cloudflare Pagesに接続
  3. ビルド出力ディレクトリを /（または .）に設定
  4. ビルドコマンドは不要

デプロイ前に config.js を本番環境のissuerとクライアントIDに更新してください。

ユーザーフローまとめ

flowchart LR
    home["index.html
(ホーム)"]
    login["login.html
(ログイン)"]
    callback["callback.html
(コールバック)"]
    profile["profile.html
(プロフィール)"]

    home -->|"未サインイン"| login
    login -->|"Passkey / Email Code"| home
    login -->|"ソーシャルログイン"| callback --> home
    home -->|"プロフィール表示"| profile
    profile -->|"サインアウト"| home

次のステップ