Předpoklady:Express.js, Node.js, HTML
Existuje několik způsobů, jak ověřit aplikaci Node.js, a já jsem zjistil, že Google Firebase je ze všech nejjednodušší.
Autentizace nám pomáhá identifikovat uživatele, abychom bezpečně uložili data a poskytli více přizpůsobené prostředí. Má snadno použitelné sady SDK a backendové služby, které můžete nastavit během několika minut, pokud již máte spuštěný backend webové aplikace.
V tomto tutoriálu vás provedu kroky k nastavení e-mailového ověřování pro vaši webovou aplikaci Express.js.
1. Přidejte Firebase Authentication
Přihlaste se ke svému účtu Firebase a vytvořte nový projekt. Přidejte ID projektu spojené s vaším projektem. Nastavení Google Analytics je pro projekty volitelné. Budete přeneseni do projektové konzole.
2. Zaregistrujte aplikaci ve Firebase a přidejte sady SDK do souboru app.js
Na stránce konzoly Firebase spusťte nastavení kliknutím na ikonu webu (). Zadejte aplikaci přezdívku (v případě potřeby povolte hostování Firebase) a klikněte na registrovat. Zobrazí se seznam skriptů, které je třeba přidat do
. Namísto pokračování ve zmíněném kroku zkopírujte firebaseConfig objekt k souboru.
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "YOUR KEY",
authDomain: "YOUR PROJECT.firebaseapp.com",
projectId: "YOUR PROJECT ID",
storageBucket: "YOUR PROJECT.appspot.com",
messagingSenderId: "MESSAGING ID",
appId: "YOUR APP ID"
};
Klikněte na „Pokračovat do konzole“.
V konzole přejděte na Ověření> Přihlášení a nezapomeňte povolit E-mail/Heslo.
3. Přidejte Firebase do souboru app.js
V okně terminálu v umístění vašeho projektu pomocí npm nainstalujte firebase.
Pokud ještě nemáte soubor package.json, spusťte ve svém terminálu následující příkaz.
npm init -y
Poté spusťte
npm install --save firebase
Otevřete svůj hlavní soubor Express.js (obvykle nazývaný app.js) a požadujte modul firebase a přidejte svůj objekt firebaseConfig, který jsme získali výše.
const firebase = require('firebase');
var firebaseConfig = {
apiKey: "YOUR KEY",
authDomain: "YOUR PROJECT.firebaseapp.com",
projectId: "YOUR PROJECT ID",
storageBucket: "YOUR PROJECT.appspot.com",
messagingSenderId: "MESSAGING ID",
appId: "YOUR APP ID"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
4. Přidejte ověření do svých přihlašovacích/registračních formulářů
Nyní předpokládám, že již máte formulář, který mohou uživatelé odeslat pomocí polí E-mail a Heslo. Pokud tak neučiníte, můžete vytvořit jednoduchý soubor Register.html, jak je znázorněno níže. Použil jsem Bootstrap, aby stránka vypadala lépe. Tři vstupní pole:Uživatelské jméno, E-mail a Heslo jsou převzaty od uživatele.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js"></script>
</head>
<body class="d-flex flex-column vh-100">
<h1 class="display-5">REGISTER</h1>
<br>
<form action="/register" class="validated-form" method="POST" novalidate>
<div class="mb-3">
<label class="form-lable" for="username">Username</label>
<input class = "form-control" type="text" name="username" id="username" required>
</div>
<div class="mb-3">
<label class="form-lable" for="email">Email ID</label>
<input class = "form-control" type="email" name="email" id="email" required>
</div>
<div class="mb-3">
<label class="form-lable" for="password">Password</label>
<input class = "form-control" type="password" name="password" id="password" required>
</div>
<button class="btn btn-secondary">Register</button>
</form>
V souboru app.js získejte e-mail a heslo pomocí objektu req.
app.post('/register', async(req, res) => {
try {
const {email, username, password} = req.body;
firebase.auth().createUserWithEmailAndPassword(email, password)
.then((userCredential) => {
// Signed in
var user = userCredential.user;
console.log(user);
})
.catch((error) => {
var errorCode = error.code;
var errorMessage = error.message;
console.log(error);
});
res.redirect('/');
} catch(e) {
res.redirect('register');
}
})
Jakmile se uživatel zaregistruje, je také automaticky přihlášen přes Firebase. Můžete přejít do Firebase Console> Authentication> Users svého projektu pro zobrazení registrovaných uživatelů.
Middleware lze použít k udržení účtu aktuálního uživatele a jeho uložení do místního úložiště vašeho prohlížeče.
app.use((req, res, next) => {
var user = firebase.auth().currentUser;
res.locals.currentUser = user;
next();
})
Podobné kroky lze provést při přihlašování jako uživatel a pro účely odhlášení.
Pro přihlášení vytvořte podobný formulář a poté získejte e-mail a heslo z objektu req.
app.post('/login', async(req, res) => {
const {email, password} = req.body;
firebase.auth().signInWithEmailAndPassword(email, password)
.then((userCredential) => {
var user = userCredential.user;
})
.catch((error) => {
var errorCode = error.code;
var errorMessage = error.message;
});
res.redirect('/');
})
Pro odhlášení potřebujete pouze cestu k odhlášení.
app.get('/logout', function(req , res){
firebase.auth().signOut().then(() => {
res.redirect('/login');
}).catch((error) => {
// An error happened.
});
});
K výše uvedenému tutoriálu můžete přidat více funkcí, jako je odeslání chybové flashové zprávy nebo přesměrování na určité stránky. Zbytek je přizpůsobení aplikace vašim potřebám.