|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="utf-8" /> |
|
|
<meta name="viewport" content="width=device-width" /> |
|
|
<title>OAuth in a static Space (Vanilla JS)</title> |
|
|
<link rel="stylesheet" href="style.css" /> |
|
|
<style> |
|
|
body { font-family: sans-serif; background: white; color: #222; } |
|
|
.card { max-width: 420px; margin: 2rem auto 0 auto; background: #fff; border-radius: 16px; box-shadow: 0 2px 8px #0001; padding: 2rem; } |
|
|
#status { margin-top: 1rem; word-break: break-all; color: #b00; } |
|
|
button, img { margin-top: 1rem; } |
|
|
pre { background: #eee; padding: 1em; border-radius: 4px; margin-top: 1rem; } |
|
|
#signout { margin-left: 0; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="card"> |
|
|
<h1>OAuth in a static Space (Vanilla JS)</h1> |
|
|
<p> |
|
|
This is a demonstration of the Hugging Face OAuth flow in a <b>static Space</b> using only vanilla JS.<br> |
|
|
No external libraries are needed – just copy this HTML file in your Space! |
|
|
|
|
|
After clicking "Signin with HF", you will be redirected to this space and the access token + user info will be displayed. |
|
|
</p> |
|
|
<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:100%;"> |
|
|
<button id="signout" style="display:none;">Sign out</button> |
|
|
<div id="status"></div> |
|
|
<pre id="userinfo" style="display:none"></pre> |
|
|
</div> |
|
|
<script type="module"> |
|
|
|
|
|
import { oauthLoginUrl, oauthHandleRedirectIfPresent } from "https://cdn.skypack.dev/@huggingface/hub"; |
|
|
|
|
|
|
|
|
const CLIENT_ID = window.OAUTH_CLIENT_ID || window.huggingface?.space?.oauth?.clientId; |
|
|
const CLIENT_SECRET = window.OAUTH_CLIENT_SECRET || window.huggingface?.space?.oauth?.clientSecret; |
|
|
const REDIRECT_URI = window.location.origin + window.location.pathname; |
|
|
const HF_OAUTH_URL = 'https://huggingface.co/oauth/authorize'; |
|
|
const HF_TOKEN_URL = 'https://huggingface.co/oauth/token'; |
|
|
|
|
|
|
|
|
function showLoggedIn(userinfo) { |
|
|
document.getElementById('signin').style.display = 'none'; |
|
|
document.getElementById('signout').style.display = ''; |
|
|
document.getElementById('status').textContent = 'Logged in!'; |
|
|
document.getElementById('userinfo').style.display = ''; |
|
|
document.getElementById('userinfo').textContent = userinfo; |
|
|
} |
|
|
function showLoggedOut() { |
|
|
document.getElementById('signin').style.display = ''; |
|
|
document.getElementById('signout').style.display = 'none'; |
|
|
document.getElementById('status').textContent = ''; |
|
|
document.getElementById('userinfo').style.display = 'none'; |
|
|
document.getElementById('userinfo').textContent = ''; |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('signin').onclick = async function () { |
|
|
try { |
|
|
const loginUrl = await oauthLoginUrl(); |
|
|
window.location.href = loginUrl; |
|
|
} catch (error) { |
|
|
console.error('Erreur lors de la génération de l\'URL de login:', error); |
|
|
document.getElementById('status').textContent = 'Erreur: Impossible de générer l\'URL de connexion. Vérifiez la configuration OAuth.'; |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
document.getElementById('signout').onclick = function () { |
|
|
localStorage.removeItem('hf_oauth_token'); |
|
|
localStorage.removeItem('hf_oauth_userinfo'); |
|
|
localStorage.removeItem('hf_oauth_state'); |
|
|
showLoggedOut(); |
|
|
window.history.replaceState({}, '', window.location.pathname); |
|
|
}; |
|
|
|
|
|
|
|
|
window.onload = async function () { |
|
|
try { |
|
|
|
|
|
const oauthResult = await oauthHandleRedirectIfPresent(); |
|
|
|
|
|
if (oauthResult) { |
|
|
|
|
|
console.log('OAuth result:', oauthResult); |
|
|
const userinfoStr = JSON.stringify(oauthResult.userInfo, null, 2); |
|
|
localStorage.setItem('hf_oauth_token', oauthResult.accessToken); |
|
|
localStorage.setItem('hf_oauth_userinfo', userinfoStr); |
|
|
showLoggedIn(userinfoStr); |
|
|
|
|
|
window.history.replaceState({}, '', window.location.pathname); |
|
|
} else { |
|
|
|
|
|
const token = localStorage.getItem('hf_oauth_token'); |
|
|
const userinfo = localStorage.getItem('hf_oauth_userinfo'); |
|
|
if (token && userinfo) { |
|
|
showLoggedIn(userinfo); |
|
|
} else { |
|
|
showLoggedOut(); |
|
|
} |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Erreur OAuth:', error); |
|
|
document.getElementById('status').textContent = 'Erreur lors de la gestion OAuth: ' + error.message; |
|
|
showLoggedOut(); |
|
|
} |
|
|
}; |
|
|
</script> |
|
|
</body> |
|
|
</html> |
