135 lines
4.2 KiB
HTML
135 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ja">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>OAuth Callback - Aicard</title>
|
||
<style>
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: 100vh;
|
||
margin: 0;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
}
|
||
.container {
|
||
text-align: center;
|
||
padding: 40px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 20px;
|
||
backdrop-filter: blur(10px);
|
||
max-width: 400px;
|
||
}
|
||
.spinner {
|
||
border: 4px solid rgba(255, 255, 255, 0.3);
|
||
border-top: 4px solid white;
|
||
border-radius: 50%;
|
||
width: 50px;
|
||
height: 50px;
|
||
animation: spin 1s linear infinite;
|
||
margin: 0 auto 20px;
|
||
}
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
.message {
|
||
font-size: 18px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.button {
|
||
display: inline-block;
|
||
padding: 15px 30px;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: white;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border: 2px solid white;
|
||
border-radius: 10px;
|
||
text-decoration: none;
|
||
transition: all 0.3s;
|
||
cursor: pointer;
|
||
margin-top: 10px;
|
||
}
|
||
.button:hover {
|
||
background: rgba(255, 255, 255, 0.3);
|
||
transform: scale(1.05);
|
||
}
|
||
.error {
|
||
color: #ff6b6b;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div id="content">
|
||
<div class="spinner"></div>
|
||
<p class="message">認証中...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
(function() {
|
||
try {
|
||
// URLパラメータを取得
|
||
const params = new URLSearchParams(window.location.search);
|
||
const code = params.get('code');
|
||
const state = params.get('state');
|
||
const error = params.get('error');
|
||
const errorDescription = params.get('error_description');
|
||
|
||
console.log('OAuth callback page loaded');
|
||
console.log('Params:', { code: code ? 'present' : 'missing', state: state ? 'present' : 'missing' });
|
||
|
||
const content = document.getElementById('content');
|
||
|
||
// エラーチェック
|
||
if (error) {
|
||
content.innerHTML = `<div class="error">認証エラー: ${errorDescription || error}</div>`;
|
||
return;
|
||
}
|
||
|
||
if (!code || !state) {
|
||
content.innerHTML = '<div class="error">認証パラメータが不足しています</div>';
|
||
return;
|
||
}
|
||
|
||
// カスタムスキームのDeep Linkを生成
|
||
const deepLink = `aicard://oauth/callback?code=${encodeURIComponent(code)}&state=${encodeURIComponent(state)}`;
|
||
|
||
console.log('OAuth callback received, attempting app launch...');
|
||
console.log('Universal Link should trigger automatically if configured correctly');
|
||
|
||
// 即座にカスタムスキームへのリダイレクトを試行（フォールバック）
|
||
// Universal Linksが動作すればこのコードに到達する前にアプリが開く
|
||
// 動作しない場合はカスタムスキームで開く
|
||
setTimeout(() => {
|
||
console.log('Attempting fallback custom scheme redirect');
|
||
window.location.href = deepLink;
|
||
}, 500);
|
||
|
||
// 2秒後に手動ボタンを表示（念のため）
|
||
setTimeout(() => {
|
||
content.innerHTML = `
|
||
<div class="message">認証が完了しました</div>
|
||
<p style="font-size: 14px; opacity: 0.9;">アプリが自動的に開かない場合は、<br>下のボタンをタップしてください</p>
|
||
<a href="${deepLink}" class="button">アプリを開く</a>
|
||
`;
|
||
}, 2000);
|
||
|
||
} catch (err) {
|
||
console.error('Callback error:', err);
|
||
document.getElementById('content').innerHTML =
|
||
`<div class="error">エラーが発生しました: ${err.message}</div>`;
|
||
}
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|