Firebase Authentication proporciona los servicios de backend que son SDK fáciles de usar y bibliotecas de interfaz de usuario listas para usar para autenticar a los usuarios en su aplicación.
Requisitos previos: conocimiento básico de Node, JavaScript y firebase.
Configuración: primero necesitamos crear un proyecto de Firebase, diríjase a Firebase Console y cree un nuevo proyecto.
Voy a llamarlo SignInWithGoogle
Haga clic en la web para crear una aplicación web.
Vaya a Configuración de Firebase > Cuenta de servicio > Generar una nueva clave. Esta clave debe permanecer privada . Se recomienda mantenerla en variables de entorno.
Ahora vaya a la pestaña Autenticación y active Iniciar sesión con Google.
Ahora cree un nuevo proyecto que tenga éxito.html ( con una etiqueta de anclaje simple, que dirija a la raíz «/» ) y login.html [deje una división en blanco con id «firebaseui-auth-container», el lugar donde se inicializará Firebase UI ]
Cambie el directorio de la consola a la raíz de su tipo de proyecto usando los siguientes comandos en la consola
$npm init $npm install express firebase-admin cookie-parser https fs
Nota: Los dos últimos paquetes solo son necesarios si desea guardar cookies en el host local; sin embargo, si va a ejecutar un servidor en https, entonces no es necesario.
const express = require("express");
const admin = require("firebase-admin");
const cookieParser = require("cookie-parser");
const https = require('https');
const fs = require('fs');
const app = express();
app.use(cookieParser());
var key="--BEGIN PRIVATE KEY--\nMIIEvgIBADANBgk"
+ "qhkiG9w0BAQE--your key here--+1d4\n--END"
+ " PRIVATE KEY-\n";
admin.initializeApp({
credential: admin.credential.cert({
"private_key": key.replace(/\\n/g, '\n'),
"client_email": "YOUR CLIENT EMAIL HERE",
"project_id": "YOUR PROJECT ID "
})
});
app.get('/', (req, res) => {
res.sendFile(__dirname +'/login.html');
});
app.get('/logout', (req, res) => {
res.clearCookie('__session');
res.redirect('/');
});
app.get('/success', checkCookie, (req, res) => {
res.sendFile(__dirname + '/success.html');
console.log("UID of Signed in User is"
+ req.decodedClaims.uid);
// You will reach here only if session
// is working Fine
});
app.get('savecookie', (req, res) => {
const Idtoken=req.query.token;
setCookie(Idtoken, res);
});
// Saving cookies and verify cookies
// Reference :
//https://firebase.google.com/docs/auth/admin/manage-cookies
function savecookie(idtoken, res) {
const expiresIn = 60 * 60 * 24 * 5 * 1000;
admin.auth().createSessionCookie(idtoken, {expiresIn})
.then((sessionCookie) => {
const options = {maxAge: expiresIn,
httpOnly: true, secure: true};
admin.auth().verifyIdToken(idtoken)
.then(function(decodedClaims) {
res.redirect('/success');
});
}, error => {
res.status(401).send("UnAuthorised Request");
});
}
function checkCookie(req, res, next) {
const sessionCookie = req.cookies.__session || '';
admin.auth().verifySessionCookie(
sessionCookie, true).then((decodedClaims) => {
req.decodedClaims = decodedClaims;
next();
})
.catch(error => {
// Session cookie is unavailable or invalid.
// Force user to login.
res.redirect('/');
});
}
Aquí está el archivo app.js. Si lo observa detenidamente, encontrará que no hay ningún puerto que escuche nuestra solicitud. Aquí es donde necesitamos esos dos módulos de Node.
La mayoría de los navegadores no le permiten guardar cookies en el host local, por eso configuraremos una conexión HTTPS para nuestro host local.
Asegúrese de estar en el directorio raíz del proyecto.
Abre bash y escribe
$openssl req -Nodes -nuevo -x509 -servidor de salida.clave -servidor de salida.cert
Se generarán dos archivos (server.key y server.cert).
Agregue el siguiente código al archivo app.js:
https.createServer({
key: fs.readFileSync('server.key'),
cert: fs.readFileSync('server.cert')
}, app)
.listen(3000, function () {
console.log('listening on port 3000!'
+ ' Go to https://localhost:3000/')
});
Cargue este script antes de la etiqueta del cuerpo en la página de inicio de sesión
<!-- Firebase Package--> <script src= "https://www.gstatic.com/firebasejs/5.8.5/firebase.js"> </script> <!-- Loads the login UI elements--> <script src= "https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"> </script> <link type="text/css" rel="stylesheet" href= "https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />
Cargue este script en la página de inicio de sesión después de la etiqueta del cuerpo (llene los datos de configuración que obtuvo de la consola de Firebase).
var config = {
apiKey: "YOUR_KEY",
authDomain: "YOUR_DOMAIN",
databaseURL: "YOURURL",
projectId: "--",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
firebase.initializeApp(config);
firebase.auth().setPersistence(
firebase.auth.Auth.Persistence.NONE);
// FirebaseUI config.
var uiConfig = {
signInOptions: [
// Google sign in option
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
],
// Terms of service url/callback.
tosUrl: '<your-tos-url>',
// Privacy policy url/callback.
privacyPolicyUrl: function () {
window.location.assign(
'<your-privacy-policy-url>');
},
callbacks: {
signInSuccess: function (user,
credential, redirectUrl) {
// User successfully signed in.
user.getIdToken().then(function (idToken) {
window.location.href =
'/savecookie?idToken=' + idToken;
}).catch(error => {
console.log(error);
});
}
}
};
// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);
Ahora presiona guardar y ejecuta el comando $node app.js
Ahora ve a https://localhost:3000/ e inicia sesión, luego cierra la pestaña o el navegador y escribe https://localhost:3000/success, verás que no eres redirigido a la página de inicio de sesión nuevamente, en su lugar , será llevado a la página de éxito.
Nota: Aquí no me pidió que seleccionara con qué cuenta iniciar sesión con la aplicación porque inicié sesión con una sola cuenta, en caso de que haya iniciado sesión con varias cuentas, le pedirá que elija una cuenta para continuar. .
Descarga Mi proyecto completado en caso de algún error al que te enfrentes o escríbelo en el comentario
Referencia: https://firebase.google.com/docs/auth/admin/manage-cookies
Publicación traducida automáticamente
Artículo escrito por sunny52525 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA