Skip to content

Instantly share code, notes, and snippets.

@eduardolat

eduardolat/GetFirebaseAuthToken.html

Last active October 22, 2022 22:02
Show Gist options
  • Save eduardolat/cd50ac9b99ba893dd44270573d479337 to your computer and use it in GitHub Desktop.
Save eduardolat/cd50ac9b99ba893dd44270573d479337 to your computer and use it in GitHub Desktop.
Download ZIP
Web sencilla para obtener el idToken de los usuarios de firebase
Raw
GetFirebaseAuthToken.html
<!DOCTYPE html>
<html lang="es">
<head>
<script>
var firebaseConfig = {
// ...
};
</script>
<title>API Auth</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<script src="https://www.gstatic.com/firebasejs/8.7.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.7.0/firebase-auth.js"></script>
<script>
var firebaseApp = firebase.initializeApp(firebaseConfig);
var auth = firebaseApp.auth();
</script>
<script src="https://www.gstatic.com/firebasejs/ui/6.0.0/firebase-ui-auth__es.js"></script>
<link
type="text/css"
rel="stylesheet"
href="https://www.gstatic.com/firebasejs/ui/6.0.0/firebase-ui-auth.css"
/>
<script>
// FirebaseUI config.
var uiConfig = {
signInSuccessUrl: window.location.href,
signInOptions: [firebase.auth.EmailAuthProvider.PROVIDER_ID],
tosUrl: '/',
privacyPolicyUrl: function () {
window.location.assign('/');
},
};
// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(auth);
// The start method will wait until the DOM is loaded.
ui.start('#auth-container', uiConfig);
</script>
</head>
<body>
<header style="width: 100%; text-align: center; margin-top: 30px; margin-bottom: 30px">
<h1>Iniciar sesion y obtener token JWT</h1>
</header>
<script>
var listener = firebase.auth().onAuthStateChanged(user => {
if (user) {
document.querySelector('#loading').style.display = 'none';
document.querySelector('#auth-container').style.display = 'none';
document.querySelector('#token-container').style.display = 'block';
firebase
.auth()
.currentUser.getIdToken(/* forceRefresh */ true)
.then(function (idToken) {
document.querySelector('#plain-token').innerHTML = idToken;
document.querySelector('#bearer-token').innerHTML = 'Bearer ' + idToken;
});
document.querySelector('#current-email').innerHTML = '<b>Email:</b> ' + user.email;
document.querySelector('#current-name').innerHTML = '<b>Nombre:</b> ' + user.displayName;
document.querySelector('#current-uid').innerHTML = '<b>ID:</b> ' + user.uid;
} else {
document.querySelector('#loading').style.display = 'none';
document.querySelector('#token-container').style.display = 'none';
document.querySelector('#auth-container').style.display = 'block';
}
listener();
});
function signOut() {
firebase
.auth()
.signOut()
.then(() => {
location.reload();
});
}
function copyToClipboardBearer() {
var copyText = document.getElementById('bearer-token');
copyText.select();
copyText.setSelectionRange(0, 99999); /* For mobile devices */
navigator.clipboard.writeText(copyText.value);
}
function copyToClipboardPlain() {
var copyText = document.getElementById('plain-token');
copyText.select();
copyText.setSelectionRange(0, 99999); /* For mobile devices */
navigator.clipboard.writeText(copyText.value);
}
</script>
<div id="loading" class="w-full text-center">Cargando...</div>
<div id="auth-container" style="display: none"></div>
<div id="token-container" style="display: none" class="container text-center">
<div class="my-2">
<div id="current-uid"></div>
<div id="current-email"></div>
<div id="current-name"></div>
</div>
<div class="row">
<div class="col-6">
<textarea cols="30" rows="10" class="form-control" id="bearer-token"></textarea>
</div>
<div class="col-6">
<textarea cols="30" rows="10" class="form-control" id="plain-token"></textarea>
</div>
</div>
<div class="row mt-2">
<div class="col-4">
<button type="button" class="btn btn-warning btn-block" onClick="signOut()">
Cerrar sesión
</button>
</div>
<div class="col-4">
<button type="button" class="btn btn-primary btn-block" onClick="copyToClipboardBearer()">
Copiar (Bearer)
</button>
</div>
<div class="col-4">
<button type="button" class="btn btn-primary btn-block" onClick="copyToClipboardPlain()">
Copiar (Plano)
</button>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment