javascript - Password protect a page with Firebase - Stack Overflow

admin管理员组

文章数量:1344965

I'm building a CMS with Firebase, but struggling to assess whether what I require is possible, or if I'm missing something.

What I require is the ability to password-protect a page only, and remember that browser as having access. A full user account (using the in built auth) is required to edit the content of the page, but only a password is required to view it.

I know I can use the auth flow with email, but am looking for the editor to be able to create a password for viewing only.

Is this possible, or should I look elsewhere?

I'm building a CMS with Firebase, but struggling to assess whether what I require is possible, or if I'm missing something.

What I require is the ability to password-protect a page only, and remember that browser as having access. A full user account (using the in built auth) is required to edit the content of the page, but only a password is required to view it.

I know I can use the auth flow with email, but am looking for the editor to be able to create a password for viewing only.

Is this possible, or should I look elsewhere?

• javascript
• firebase
• firebase-realtime-database
• firebase-authentication

Share Improve this question Follow asked Feb 1, 2019 at 21:37 CMYJCMYJ 17211 gold badge22 silver badges77 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

The way I monly do this is a bit like Jeremy's answer, but simpler.

You ask the user for a password when they enter the page, and store that password locally (for reloads).

Then you store data in your database under a path that includes the password. So say that your password is geheim, you could store the data under:

data: {
  geheim: {
    value: "This is the secret value"
  }
}

Now you secure your database with rules like these:

{
  "rules": {
    ".read": false,
    "data": {
      "geheim": {
        ".read": true
      }
    }
  }
}

Now somebody can only read the data at /data/geheim if they know the entire path. So you'll enter the data part in your code, but require them to enter geheim as the password. Then you attach a listener with:

firebase.database().ref("data").child(password).once("value", function(snapshot) {
  console.log(snapshot.val());
});

And if the user entered the correct value for password, this will read the value.

Firebase Authentication only deals with authenticated user accounts. It doesn't deal with simple password protection of content.

It's definitely possible, but as Doug's answer indicated, you'll have to do it outside normal means. Off the top of my head, the way I would acplish this is...

• When a user enters a password, it stores the password in their local storage.
• On page load, or on password entry... pull the password from local storage
• Make a request to a Firebase cloud function, makes sure to include the password it just retrieved from local storage, and which page it is requesting content for
• Firebase cloud function validates password
• Firebase cloud function retrieves data for specific page
• Firebase cloud function returns said data
• Load data on front-end like normal

As you already identified, you should stick with the built-in Firebase auth for content editing.

I definitely suggest Frank's answer because it's simple and it works. Btw the moral of the story is that you use the firebase Database to store you view-only password but, if you want to plicate your life because you need a strong view-only password system, the Authentication product provides the custom authentication method that you can integrate with your existing auth system (for example fb login). It obviously needs a server-side implementation that is a code that takes the password, check if it's valid and sends the token back to the Auth system.
Here more details: https://firebase.google./docs/auth/web/custom-auth

本文标签： javascriptPassword protect a page with FirebaseStack Overflow