📌  相关文章
📜  使用 Firebase UI 和 Cookie 会话在 Node.js 中进行 Firebase(使用 Google 登录)身份验证

📅  最后修改于: 2022-05-13 01:56:53.889000             🧑  作者: Mango

使用 Firebase UI 和 Cookie 会话在 Node.js 中进行 Firebase（使用 Google 登录）身份验证

Firebase 身份验证提供的后端服务是易于使用的 SDK 和现成的 UI 库，用于对您的应用程序的用户进行身份验证。

先决条件：节点、JavaScript 和 firebase 的基本知识。

设置：首先我们需要创建一个 Firebase 项目，前往 firebase 控制台并创建一个新项目。

单击 Web 以创建 Web 应用程序。

转到 Firebase 设置>服务帐户>生成新密钥。此密钥应保持私有，建议将其保存在环境变量中。

现在转到身份验证选项卡并打开使用 Google 登录。

现在创建一个新项目，包含success.html（带有一个简单的锚标记，指向“/”根）和login.html [留一个id为“firebaseui-auth-container”的空白部分，Firebase UI将被初始化的地方]

在控制台中使用以下命令将控制台目录更改为项目类型的根目录

$npm init
$npm install express firebase-admin cookie-parser https fs

注意：仅当您想在本地主机中保存 cookie 时才需要最后两个包，但是，如果您将在 https 上运行后端，则不需要。 

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('/');
        });
}

这里是app.js文件，仔细看会发现并没有监听我们请求的端口。这是我们需要这两个节点模块的地方。

大多数浏览器不允许您在本地主机中保存 cookie，这就是我们将为本地主机设置 HTTPS 连接的原因。

将以下代码添加到 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/')
  });

在登录页面的 body 标记之前加载此脚本



  

将此脚本加载到登录页面中的正文标记之后（填写您从 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: '',
  
    // Privacy policy url/callback.
    privacyPolicyUrl: function () {
        window.location.assign(
                '');
    },
  
    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);

现在点击保存并运行命令 $node app.js

现在转到 https://localhost:3000/ 并登录，然后关闭选项卡或浏览器并键入 https://localhost:3000/success，您将看到您没有再次重定向到登录页面，而是，您将被带到成功页面。

如果您遇到任何错误或在评论中写下，请下载我已完成的项目

参考： https://firebase.google.com/docs/auth/admin/manage-cookies