コンテンツにスキップ
Authrim

OAuth: ポップアップログイン

概要

OAuthポップアップログインは、Authrimの認可エンドポイントを小さなブラウザウィンドウで開きます。ユーザーがポップアップで認証し、結果がメインウィンドウに返されます。アプリケーションはバックグラウンドで開いたままです。

この機能には enableOAuth: true の設定が必要です。

セットアップ

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


const auth = await createAuthrim({
  issuer: 'https://auth.example.com',
  clientId: 'my-app',
  enableOAuth: true,  // oauth名前空間に必要
});

ポップアップログイン

const { data, error } = await auth.oauth.popup.login();


if (error) {
  console.error('ポップアップログイン失敗:', error.message);
  return;
}


console.log('アクセストークン:', data.accessToken);
console.log('IDトークン:', data.idToken);
console.log('有効期限:', new Date(data.expiresAt * 1000));

レスポンス

interface OAuthTokenSet {
  accessToken: string;
  idToken?: string;
  refreshToken?: string;
  expiresAt: number;    // Unixタイムスタンプ（秒）
  scope?: string;
}

ポップアップオプション

interface OAuthPopupLoginOptions {
  /** ポップアップのリダイレクトURI（デフォルト: 自動検出） */
  redirectUri?: string;
  /** リクエストするOAuthスコープ */
  scopes?: string[];
  /** ポップアップウィンドウのサイズ */
  popupFeatures?: {
    width?: number;   // デフォルト: 500
    height?: number;  // デフォルト: 600
  };
}


// 例
const { data, error } = await auth.oauth.popup.login({
  scopes: ['openid', 'profile', 'email'],
  popupFeatures: { width: 600, height: 700 },
});

動作原理

sequenceDiagram
    participant App as メインウィンドウ
    participant Popup as ポップアップウィンドウ
    participant IdP as Authrim IdP

    App->>Popup: ポップアップを開く
    Popup->>IdP: 認可リクエスト（PKCE）
    IdP->>IdP: ユーザー認証
    IdP->>Popup: 認可コード付きリダイレクト
    Popup->>App: postMessage(code)
    Popup->>Popup: 閉じる
    App->>IdP: コードをトークンに交換
    IdP->>App: トークンレスポンス

SDKはPKCE（Proof Key for Code Exchange）を自動的に処理します — code_verifier と code_challenge を内部で生成します。

ポップアップブロック

一部のブラウザはデフォルトでポップアップをブロックします。適切に処理しましょう：

const { data, error } = await auth.oauth.popup.login();


if (error) {
  if (error.code === 'AR005004' && error.message.includes('popup')) {
    // ポップアップがブロックされた — 代替手段を提供
    showMessage('ポップアップを許可するか、リダイレクトログインをご利用ください。');
  }
}

ポップアップログインを使うべき場面

シナリオ推奨アプローチ
ページ遷移のないSPAポップアップログイン
モバイルWebリダイレクトログイン
アプリ状態の保持が必要ポップアップログイン
OAuth/OIDC準拠要件ポップアップまたはリダイレクト
ポップアップブロッカーが厳しい環境リダイレクトログイン

認可URLの手動構築

高度なユースケースでは、認可URLを自分で構築できます：

const result = await auth.oauth.buildAuthorizationUrl({
  redirectUri: 'https://myapp.com/callback',
  scopes: ['openid', 'profile', 'email'],
  prompt: 'login',       // ログイン画面を強制
  loginHint: '[email protected]',
});


console.log('認可URL:', result.url);
console.log('State:', result.state);

これはリダイレクトフローを完全に制御したい場合やカスタムポップアップ管理を実装する場合に便利です。

完全な例

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


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


document.getElementById('login-btn').addEventListener('click', async () => {
  const button = document.getElementById('login-btn');
  button.disabled = true;


  const { data, error } = await auth.oauth.popup.login({
    scopes: ['openid', 'profile', 'email'],
  });


  if (error) {
    alert(error.message);
    button.disabled = false;
    return;
  }


  // トークンを保存またはセッションを使用
  console.log('認証完了:', data);
  window.location.href = '/dashboard';
});

次のステップ