コンテンツにスキップ
Authrim

インストール＆クイックスタート

インストール

npm / pnpm / yarn

Terminal window
# npm
npm install @authrim/web


# pnpm
pnpm add @authrim/web


# yarn
yarn add @authrim/web

アプリケーションでインポート：

import { createAuthrim } from '@authrim/web';

CDN（スクリプトタグ）

プロトタイピングや静的HTMLサイトでは、CDNからSDKを読み込めます：

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

グローバルオブジェクト AuthrimWeb が利用可能になります：

<script>
  const auth = await AuthrimWeb.createAuthrim({
    issuer: 'https://auth.example.com',
    clientId: 'my-app',
  });
</script>

前提条件

SDKを使用する前に、以下が必要です：

  1. Authrimインスタンス — 稼働中のAuthrimサーバー（例：https://auth.example.com）
  2. クライアントID — Authrim管理パネルでアプリケーションを登録してclientIdを取得
  3. 許可されたオリジン — クライアント設定にアプリのオリジン（例：https://myapp.com）を追加
  4. コールバックURL（ソーシャルログイン / OAuth用） — https://myapp.com/callback.html をリダイレクトURIとして登録

初期化

createAuthrim() でAuthrimクライアントを作成します：

import { createAuthrim } from '@authrim/web';


const auth = await createAuthrim({
  issuer: 'https://auth.example.com',
  clientId: 'my-app',
});

この関数はブラウザプロバイダー（暗号、ストレージ、HTTPクライアント）を内部で初期化するため非同期です。アプリケーション起動時に一度呼び出し、返されたクライアントを再利用してください。

OAuth / OIDC を有効にする

OAuthの機能（ポップアップログイン、サイレント認証、クロスドメインSSO）を有効にするには enableOAuth: true を設定します：

const auth = await createAuthrim({
  issuer: 'https://auth.example.com',
  clientId: 'my-app',
  enableOAuth: true,
});


// auth.oauth が利用可能になります
await auth.oauth.popup.login();

クイックスタート：Passkeyログイン

Passkeyによるサインアップとサインインの最小限の例：

import { createAuthrim } from '@authrim/web';


// 1. 初期化
const auth = await createAuthrim({
  issuer: 'https://auth.example.com',
  clientId: 'my-app',
});


// 2. 既に認証済みか確認
const isLoggedIn = await auth.session.isAuthenticated();
if (isLoggedIn) {
  console.log('既にサインイン済みです');
}


// 3. Passkeyでサインアップ（新規ユーザー）
const signUpResult = await auth.passkey.signUp({
  email: '[email protected]',
});
if (signUpResult.error) {
  console.error('サインアップ失敗:', signUpResult.error.message);
} else {
  console.log('ようこそ！', signUpResult.data.user);
}


// 4. Passkeyでサインイン（既存ユーザー）
const loginResult = await auth.passkey.login();
if (loginResult.error) {
  console.error('ログイン失敗:', loginResult.error.message);
} else {
  console.log('サインイン完了:', loginResult.data.user);
}


// 5. サインアウト
await auth.signOut();

クイックスタート：Email Code

// コード送信
const sendResult = await auth.emailCode.send('[email protected]');
if (sendResult.error) {
  console.error(sendResult.error.message);
}


// コード検証（ユーザーが受信したコードを入力）
const verifyResult = await auth.emailCode.verify('[email protected]', '123456');
if (verifyResult.error) {
  console.error(verifyResult.error.message);
} else {
  console.log('認証完了:', verifyResult.data.user);
}

クイックスタート：ソーシャルログイン

// Googleでポップアップログイン
const result = await auth.social.loginWithPopup('google');
if (result.error) {
  console.error(result.error.message);
} else {
  console.log('Googleでサインイン:', result.data.user);
}

ストレージオプション

デフォルトでは、SDKは sessionStorage を使用して状態を保持します。変更可能です：

const auth = await createAuthrim({
  issuer: 'https://auth.example.com',
  clientId: 'my-app',
  storage: {
    prefix: 'authrim',        // キープレフィックス（デフォルト: 'authrim'）
    storage: 'sessionStorage', // 'memory' | 'sessionStorage' | 'localStorage'
  },
});
タイプ持続性セキュリティユースケース
memoryタブのみ（閉じると消去）最も安全厳格なセキュリティが必要なSPA
sessionStorageタブセッション（タブを閉じると消去）XSS耐性ありほとんどのアプリにおすすめ
localStorage永続的（ブラウザ再起動後も保持）XSS対策が必要「ログイン状態を保持」シナリオ

HTTPS要件

本番環境ではHTTPSが必要です。WebAuthn（Passkey）は安全でないオリジンでは動作しません。

  • 本番環境: HTTPS必須
  • 開発環境: localhost と 127.0.0.1 ではHTTPが許可されます

次のステップ