Claude Code ガイド

Appearance

MCP OAuth認証ページをClaude Codeのビジュアルスタイルに統一し、認証成功後に自動クローズするよう改善 ​

原文（日本語に翻訳） ​

MCP OAuthブラウザページをClaude Codeのビジュアルスタイルに合わせ、認証成功時に自動クローズするよう改善しました

原文（英語） ​

Improved the MCP OAuth browser page to match Claude Code's visual style and auto-close on success

概要 ​

Claude Code v2.1.181では、MCPサーバーのOAuth認証に使用されるブラウザページのUIが刷新されました。以前はClaude Codeのデザインとは異なる汎用スタイルが適用されており、認証完了後もページが開いたままになっていました。この改善により、認証ページがClaude Codeのビジュアルスタイルと統一され、認証に成功すると自動的にブラウザタブが閉じられるようになり、よりシームレスなMCP連携体験が実現されました。

改善内容の詳細 ​

改善前の問題点 ​

以前のMCP OAuth認証フローには、以下の2つの課題がありました。

1. ビジュアルの不統一

  • 認証ページのデザインがClaude Codeのスタイルと異なり、一貫性がなかった
  • 汎用的なOAuthページのような見た目で、ユーザーが正規の認証フローであるか判断しにくかった
  • Claude Codeを使用中に突然スタイルの異なるページが表示されることで、ユーザー体験が分断されていた

2. 認証後にページが残り続ける

  • OAuth認証が成功してもブラウザタブが自動で閉じられなかった
  • ユーザーは手動でタブを閉じてClaude Codeに戻る必要があった
  • 認証フローの完了がわかりにくく、不要な操作が発生していた

改善後の動作 ​

  • 認証ページのデザインがClaude Codeのビジュアルスタイルと統一された
  • OAuth認証に成功すると、ブラウザタブが自動的に閉じられる
  • ユーザーはタブを手動で閉じることなく、スムーズにClaude Codeの作業に戻ることができる

実践例 ​

GitHubをMCPサーバーとして使用する場合 ​

GitHubのMCPサーバーを設定してOAuth認証を行う典型的なフローです。

bash
# claude_desktop_config.json または .claude/mcp_config.json にGitHub MCPを設定
# （設定例）
# {
#   "mcpServers": {
#     "github": {
#       "command": "npx",
#       "args": ["@modelcontextprotocol/server-github"],
#       "env": {
#         "GITHUB_OAUTH_CLIENT_ID": "your-client-id"
#       }
#     }
#   }
# }

# Claude Codeを起動
claude

# GitHubのリポジトリ情報を取得しようとするとOAuth認証が求められる
> GitHubのmyorg/myrepoのIssue一覧を教えて

# ブラウザが自動で開き、GitHub OAuth認証ページが表示される
# → ページはClaude Codeのビジュアルスタイルで統一されている
# → 「Authorize」をクリックして認証を許可
# → 認証成功後、ブラウザタブが自動でクローズ ✓
# → Claude Codeに結果が返ってくる

Google DriveをMCPサーバーとして使用する場合 ​

Google Drive MCPサーバーでのOAuth認証フローです。

bash
# Google Drive MCPの設定後にClaude Codeを起動
claude

# Googleドライブ上のファイルにアクセスするとOAuth認証が求められる
> Googleドライブの「プロジェクト計画書.docx」の内容を要約して

# ブラウザが開きGoogleのOAuth認証ページへリダイレクト
# → Claude Codeスタイルの認証ページが表示される
# → Googleアカウントでログイン・許可
# → 認証成功 → タブが自動でクローズ ✓
# → Claude Codeがファイル内容を取得して要約を返す

Notionをサービスとして連携する場合 ​

Notion MCPサーバーを使ってOAuth認証するフローです。

bash
# Notion MCPサーバーを設定してClaude Codeで使用
claude

> Notionの「開発チームWiki」ページを検索して関連する情報を取得して

# OAuth認証フローが起動
# → ブラウザでClaude Codeスタイルの認証ページが表示される
# → Notionへのアクセスを許可
# → 認証成功後、ブラウザタブが自動クローズ ✓
# → そのままClaude Codeで作業を継続できる

再認証が必要になるシナリオ ​

トークンの有効期限切れなどで再認証が必要になった場合も同様にシームレスなフローとなります。

bash
claude

# しばらく使っていなかった後にMCPサーバーにアクセス
> GitHubのPRの一覧を見せて

# トークンの有効期限が切れている場合
# → 自動的に再認証フローが起動
# → ブラウザに統一されたスタイルの認証ページが表示される
# → 再度認証を許可
# → 認証完了後、タブが自動クローズ ✓
# → 中断なく作業を再開できる

注意点 ​

  • この改善はClaude Code v2.1.181（2026年6月18日）で実装されました
  • 対象となるのはMCPサーバーのOAuth認証フローです。Claude Code自体のAnthropicアカウント認証には影響しません
  • ブラウザタブの自動クローズはOAuth認証が成功した場合のみ行われます。認証に失敗した場合やユーザーがキャンセルした場合はページが残ります
  • 自動クローズはブラウザのJavaScript（window.close()）を使用します。ブラウザのセキュリティ設定によっては自動クローズが動作しない場合があります
  • MCPサーバーのOAuth設定はサーバーごとに異なります。詳細は各MCPサーバーのドキュメントを参照してください
  • ポップアップブロッカーが有効な場合、認証ページが開かないことがあります。Claude Codeからのポップアップを許可するよう設定してください
  • 複数のMCPサーバーを同時に使用している場合、それぞれのOAuth認証が個別に求められることがあります

関連情報 ​