|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="utf-8" /> |
|
|
<meta name="viewport" content="width=device-width" /> |
|
|
<title>HF OAuth Example</title> |
|
|
<style> |
|
|
body { font-family: sans-serif; padding: 2rem; max-width: 600px; margin: 0 auto; } |
|
|
button { padding: 0.5rem 1rem; margin: 0.5rem 0; cursor: pointer; } |
|
|
#status { margin: 1rem 0; color: #666; } |
|
|
pre { background: #f5f5f5; padding: 1rem; border-radius: 4px; overflow-x: auto; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<h1>HF OAuth Example</h1> |
|
|
|
|
|
<img src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-xl-dark.svg" |
|
|
alt="Sign in with Hugging Face" id="signin" style="cursor:pointer;display:none;max-width:300px;"> |
|
|
|
|
|
<button id="signout" style="display:none;">Sign out</button> |
|
|
<div id="status"></div> |
|
|
<pre id="userinfo" style="display:none;"></pre> |
|
|
<script> |
|
|
|
|
|
const CLIENT_ID = window.OAUTH_CLIENT_ID || 'e0906ea6-519f-4aa0-a128-9b7df044e477'; |
|
|
const CLIENT_SECRET = window.OAUTH_CLIENT_SECRET; |
|
|
const REDIRECT_URI = window.location.origin + window.location.pathname; |
|
|
|
|
|
function showLoggedIn(userinfo) { |
|
|
document.getElementById('signin').style.display = 'none'; |
|
|
document.getElementById('signout').style.display = 'block'; |
|
|
document.getElementById('status').textContent = 'Logged in!'; |
|
|
document.getElementById('userinfo').style.display = 'block'; |
|
|
document.getElementById('userinfo').textContent = userinfo; |
|
|
} |
|
|
|
|
|
function showLoggedOut() { |
|
|
document.getElementById('signin').style.display = 'block'; |
|
|
document.getElementById('signout').style.display = 'none'; |
|
|
document.getElementById('status').textContent = ''; |
|
|
document.getElementById('userinfo').style.display = 'none'; |
|
|
} |
|
|
|
|
|
document.getElementById('signin').onclick = function () { |
|
|
const state = Math.random().toString(36).slice(2); |
|
|
localStorage.setItem('hf_oauth_state', state); |
|
|
|
|
|
const url = `https://huggingface.co/oauth/authorize?redirect_uri=${encodeURIComponent(REDIRECT_URI)}&scope=openid%20profile&client_id=${CLIENT_ID}&state=${state}`; |
|
|
|
|
|
window.open(url, '_blank'); |
|
|
}; |
|
|
|
|
|
document.getElementById('signout').onclick = function () { |
|
|
localStorage.clear(); |
|
|
showLoggedOut(); |
|
|
window.history.replaceState({}, '', window.location.pathname); |
|
|
}; |
|
|
|
|
|
window.onload = async function () { |
|
|
const params = new URLSearchParams(window.location.search); |
|
|
|
|
|
if (params.has('code') && params.has('state')) { |
|
|
const state = params.get('state'); |
|
|
if (state !== localStorage.getItem('hf_oauth_state')) { |
|
|
document.getElementById('status').textContent = 'Invalid state parameter'; |
|
|
return; |
|
|
} |
|
|
|
|
|
const code = params.get('code'); |
|
|
document.getElementById('status').textContent = 'Exchanging code for access token...'; |
|
|
|
|
|
try { |
|
|
|
|
|
const tokenResponse = await fetch('https://huggingface.co/oauth/token', { |
|
|
method: 'POST', |
|
|
headers: { |
|
|
'Content-Type': 'application/x-www-form-urlencoded', |
|
|
'Authorization': `Basic ${btoa(CLIENT_ID + ':' + (CLIENT_SECRET || ''))}` |
|
|
}, |
|
|
body: new URLSearchParams({ |
|
|
grant_type: 'authorization_code', |
|
|
code: code, |
|
|
redirect_uri: REDIRECT_URI, |
|
|
client_id: CLIENT_ID |
|
|
}) |
|
|
}); |
|
|
|
|
|
if (!tokenResponse.ok) { |
|
|
throw new Error(`Token exchange failed: ${tokenResponse.status}`); |
|
|
} |
|
|
|
|
|
const tokenData = await tokenResponse.json(); |
|
|
|
|
|
if (tokenData.access_token) { |
|
|
|
|
|
document.getElementById('status').textContent = 'Getting user information...'; |
|
|
|
|
|
const userResponse = await fetch('https://huggingface.co/oauth/userinfo', { |
|
|
headers: { |
|
|
'Authorization': `Bearer ${tokenData.access_token}` |
|
|
} |
|
|
}); |
|
|
|
|
|
if (userResponse.ok) { |
|
|
const userInfo = await userResponse.json(); |
|
|
const userInfoStr = JSON.stringify(userInfo, null, 2); |
|
|
localStorage.setItem('hf_oauth_token', tokenData.access_token); |
|
|
localStorage.setItem('hf_oauth_userinfo', userInfoStr); |
|
|
showLoggedIn(userInfoStr); |
|
|
} else { |
|
|
throw new Error('Failed to get user info'); |
|
|
} |
|
|
} else { |
|
|
throw new Error('No access token received'); |
|
|
} |
|
|
|
|
|
window.history.replaceState({}, '', window.location.pathname); |
|
|
} catch (error) { |
|
|
console.error('OAuth error:', error); |
|
|
document.getElementById('status').textContent = 'Error: ' + error.message; |
|
|
showLoggedOut(); |
|
|
} |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const userinfo = localStorage.getItem('hf_oauth_userinfo'); |
|
|
if (userinfo) { |
|
|
showLoggedIn(userinfo); |
|
|
} else { |
|
|
showLoggedOut(); |
|
|
} |
|
|
}; |
|
|
</script> |
|
|
</body> |
|
|
</html> |
