File size: 5,603 Bytes
22665fb 3f84555 22665fb f91a47c a4001b5 22665fb a4001b5 22665fb a4001b5 4563b43 a4001b5 22665fb 4563b43 f91a47c 22665fb f91a47c 9b42726 a4001b5 f91a47c a4001b5 f91a47c a4001b5 f91a47c a4001b5 f91a47c 9b42726 22665fb 4563b43 22665fb a4001b5 9b42726 22665fb a4001b5 22665fb 4563b43 ee3250c 22665fb 4563b43 ee3250c 4563b43 22665fb ee3250c 4563b43 a4001b5 4563b43 9df6c34 ee3250c 4563b43 a4001b5 4563b43 22665fb f91a47c a4001b5 22665fb a4001b5 9b42726 22665fb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 |
<!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>
// Use environment variables provided by HF Spaces OAuth
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);
// Use official OAuth URL as per documentation
const url = `https://huggingface.co/oauth/authorize?redirect_uri=${encodeURIComponent(REDIRECT_URI)}&scope=openid%20profile&client_id=${CLIENT_ID}&state=${state}`;
// Open in new tab to avoid iframe issues
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 {
// Official token exchange as per HF documentation
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) {
// Get user info with 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;
}
// Check if already logged in
const userinfo = localStorage.getItem('hf_oauth_userinfo');
if (userinfo) {
showLoggedIn(userinfo);
} else {
showLoggedOut();
}
};
</script>
</body>
</html> |