Les comparte el código … muy básico pero con funcionalidad completa, para implementar Inicios de sesión con cuentas Google, usando el servicio de autenticación de Firebase.
El HTML:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Estudio sobre Firebase Auth con JavaScript v.0.1b</title>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
</head>
<body translate="no" >
<div class="card">
<div class="seccion">
<div class="avatar"></div>
<div class="info"></div>
</div>
<div class="seccion pie">
<button class="bIniciar oculto">Iniciar sesión</button>
<button class="bCerrar oculto">Cerrar sesión</button>
</div>
</div>
Nótesela inclusión de la librería de Firebase en el head del HTML
El CSS
body {
font-family: system-ui;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
margin: 0;
background-color: #eef;
}
.card {
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 2rem;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.25);
padding: 2rem;
max-height: 70vh;
max-width: 50vh;
height: 100vh;
width: 100vw;
}
button {
outline: none;
cursor: pointer;
border-radius: 2rem;
border: none;
padding: .5rem 1.5rem;
font-size: large;
}
button.bIniciar {
background-color: #5588dd;
color: #fff;
}
.oculto {
display: none;
}
.seccion {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.seccion.pie {
max-height: 5rem;
}
.info {
min-height: 5rem;
text-align: center;
}
.info p {
margin: .5rem;
}
.avatar {
background-size: cover;
background-color: #ddd;
height: 7rem;
width: 7rem;
border: 7px solid #eee;
border-radius: 100%;
margin: 1rem;
}
El javascript
// --- TODO ESTE BLOQUE DE CONFIGURACIÓN DEBES SUSTITUIRLO POR EL DE TU PROYECTO
const config = {
apiKey: "AIzaSyDzXYZ2qhyieMkfs9aiLUpChEh8U-qAEcE",
authDomain: "storash-azzxe.firebaseapp.com",
databaseURL: "https://storash-azzxe.firebaseio.com",
projectId: "storash-azxxe",
storageBucket: "storash-azxxe.appspot.com",
messagingSenderId: "569123715582"
};
firebase.initializeApp(config);
document.querySelector('.bCerrar').addEventListener( 'click', e => {
loading( true )
firebase.auth().signOut()
.then(()=>{
loading( false )
})
})
document.querySelector('.bIniciar')
.addEventListener('click', e => {
const provider = new firebase.auth.GoogleAuthProvider();
loading( true )
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.NONE)
.then(function() {
// Existing and future Auth states are now persisted in the current
// session only. Closing the window would clear any existing state even
// if a user forgets to sign out.
// ...
// New sign-in will be persisted with session persistence.
return firebase.auth()
.signInWithPopup( provider )
.then(()=>{
loading( false )
})
.catch( err => {
console.log( 1, err )
document.querySelector( '.bIniciar.oculto' ) && document.querySelector( '.bIniciar.oculto' ).classList.remove( 'oculto' )
});
})
.catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
});
})
firebase.auth().onAuthStateChanged( userInfo => {
if( userInfo ){
document.querySelector( '.bIniciar' ).classList.add( 'oculto' )
document.querySelector( '.bCerrar.oculto' ) && document.querySelector( '.bCerrar.oculto' ).classList.remove( 'oculto' )
document.querySelector( '.avatar' ).style.backgroundImage = `url( ${userInfo.photoURL} )`
document.querySelector( '.info' ).innerHTML = `
<p>${userInfo.displayName}</p>
<p>${userInfo.email}</p>
`
} else {
document.querySelector( '.avatar' ).style.backgroundImage = null
document.querySelector( '.info' ).innerHTML = ''
document.querySelector( '.bCerrar' ).classList.add( 'oculto' )
document.querySelector( '.bIniciar.oculto' ) && document.querySelector( '.bIniciar.oculto' ).classList.remove( 'oculto' )
}
})
function loading( sw ){
const $bI = document.querySelector('.bIniciar')
$bI.style.pointerEvents = sw ? 'none' : null
$bI.textContent = sw ? 'Conectando ...' : 'Iniciar sesión'
}
El resultado debería verse más o menos así:
Espero que este tutorial, que es más bien un ejemplo de uso, haya sido de su provecho.
Recuerda darle al like si te gustó. … bai!
Curso de Firebase para Web 2017
0 Comentarios
para escribir tu comentario
