Un ejemplo sencillo pero completo del servicio Firebase.auth() para inicio de sesión con Google.

46990

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><htmllang="en" ><head><metacharset="UTF-8"><title>Estudio sobre Firebase Auth con JavaScript v.0.1b</title><scriptsrc="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script></head><bodytranslate="no" ><divclass="card"><divclass="seccion"><divclass="avatar"></div><divclass="info"></div></div><divclass="seccion pie"><buttonclass="bIniciar oculto">Iniciar sesión</button><buttonclass="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: 02px7pxrgba(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: .5rem1.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;
}
.infop {
  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 PROYECTOconst 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 = nulldocument.querySelector( '.info' ).innerHTML = ''document.querySelector( '.bCerrar' ).classList.add( 'oculto' )
    document.querySelector( '.bIniciar.oculto' ) && document.querySelector( '.bIniciar.oculto' ).classList.remove( 'oculto' )
  }
})

functionloading( 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!

hace 6 años

Escribe tu comentario

+ 2

mainpp

5Puntos

4 años

Hola, he realizado tu proyecto, he puesto las credenciales de mi proyecto, he hecho los siguientes pasos y al presionar las teclas, queda todo ahí paralizado.
0-copié mis credenciales de proyecto en app.js quedando posteriormente registrado en package.json como 'main’
1- npn init
2. npm install
3. npm install -g firebase-tools
4. firebase init
5. firebase deploy
6. abrir el link del pryecto
7. presiono cualquier tecla y no me ejecuta nada.