コンテンツにスキップ
Authrim

ソーシャルログイン

概要

ソーシャルログインでは、サードパーティのIDプロバイダー（Google、GitHub、Apple等）を使って認証できます。SDKは2つのモードをサポートしています：

  • ポップアップ — プロバイダーのログインページをポップアップウィンドウで開く。メインウィンドウは開いたまま。
  • リダイレクト — ページ全体をプロバイダーにリダイレクト。フローを完了するためにコールバックページが必要。

ポップアップログイン

最もシンプルなアプローチ — ポップアップを開いて認証を完了し、結果を返します：

const { data, error } = await auth.social.loginWithPopup('google');


if (error) {
  console.error('ソーシャルログイン失敗:', error.message);
  return;
}


console.log('ユーザー:', data.user);
console.log('セッション:', data.session);

ポップアップはSDKが管理します。ユーザーがプロバイダーで認証を完了すると、ポップアップが自動的に閉じてPromiseが解決されます。

対応プロバイダー

type SocialProvider = 'google' | 'github' | 'apple' | string;

組み込みプロバイダーは google、github、apple です。Authrim管理パネルで設定したカスタムOIDCプロバイダーも文字列識別子で使用できます。

// 設定済みプロバイダーを確認
const providers = auth.social.getSupportedProviders();
// ['google', 'github', 'apple']

ポップアップオプション

interface SocialLoginOptions {
  /** 追加のOAuthスコープ */
  scopes?: string[];
  /** ログインヒント（例：メールアドレス） */
  loginHint?: string;
}


// 例: 追加スコープをリクエスト
await auth.social.loginWithPopup('google', {
  scopes: ['profile', 'email'],
  loginHint: '[email protected]',
});

リダイレクトログイン

ポップアップがブロックされる環境（一部のモバイルブラウザ）では、リダイレクトモードを使用します：

// ステップ1: プロバイダーにリダイレクト（ページから離れます）
await auth.social.loginWithRedirect('github');


// ステップ2: コールバックページで処理（callback.html）
if (auth.social.hasCallbackParams()) {
  const { data, error } = await auth.social.handleCallback();
  if (!error) {
    window.location.href = '/';  // ホームにリダイレクト
  }
}

コールバックページの設定

プロバイダーのリダイレクトを処理するコールバックページ（例：callback.html）を作成します：

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


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


// ソーシャルログインコールバックか確認
if (auth.social.hasCallbackParams()) {
  const { data, error } = await auth.social.handleCallback();


  if (error) {
    document.getElementById('error').textContent = error.message;
  } else {
    // 成功 — ホームまたはダッシュボードにリダイレクト
    window.location.href = '/';
  }
}

コールバックURL（https://yourapp.com/callback.html）をAuthrim管理パネルのクライアント設定で許可されたリダイレクトURIとして登録してください。

ポップアップ vs リダイレクト

特徴ポップアップリダイレクト
ユーザー体験ページに留まるページから離れる
モバイル対応ブロックされる場合あり常に動作
実装単一呼び出し2ステップ（リダイレクト＋コールバック）
状態保持アプリ状態が保持されるアプリ状態が失われる（ストレージを使用）

エラーハンドリング

よくあるソーシャルログインエラー：

エラーコード意味ユーザーへのアクション
AR004001プロバイダー未設定管理パネルの設定を確認
AR004002ポップアップブロックリダイレクトモードを使用、またはポップアップ許可を促す
AR004003ユーザーが同意を拒否リトライを許可
AR004004プロバイダーエラーエラーメッセージを表示、リトライを提案
AR004005コールバック検証失敗コールバックURL設定を確認
const { data, error } = await auth.social.loginWithPopup('google');


if (error) {
  if (error.code === 'AR004002') {
    // ポップアップブロック — リダイレクトにフォールバック
    await auth.social.loginWithRedirect('google');
  } else {
    showMessage(error.message);
  }
}

完全な例

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


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


// 利用可能なプロバイダーを描画
const providers = auth.social.getSupportedProviders();


providers.forEach(provider => {
  const button = document.createElement('button');
  button.textContent = `${provider}でサインイン`;
  button.addEventListener('click', async () => {
    button.disabled = true;


    const { data, error } = await auth.social.loginWithPopup(provider);


    if (error) {
      if (error.code === 'AR004002') {
        // ポップアップブロック — リダイレクトを試行
        await auth.social.loginWithRedirect(provider);
        return;
      }
      alert(error.message);
    } else {
      window.location.href = '/dashboard';
    }


    button.disabled = false;
  });


  document.getElementById('social-buttons').appendChild(button);
});

次のステップ