Как подтвердить регистрацию пользователя в Firebase?

Question

Я создал простое приложение Vue с аутентификацией, позволяющее пользователю создать учетную запись, войти в систему с созданной учетной записью и после этого получить доступ к приложению.Я хочу сделать так, чтобы, когда пользователь создает учетную запись, я должен был утвердить его, прежде чем он сможет войти в систему и получить доступ к домашней странице. Я исследовал, как это сделать, но ничего не нашел, как я могу это сделать?

Вот мой логин:

<template>
  <div class="login">
     <form action="" class="form-signin">
    <h3 class="heading">Sign In</h3>
    <input type="text" placeholder="Email" v-model="email" class="form-control"><br>
    <input type="password" placeholder="Password" v-model="password" class="form-control"><br>
    <button @click="login" class="btn btn-lg btn-primary btn-block">Log In</button>
    <p>You don't have an account? You can <router-link to="/sign-up">create one here</router-link></p>

    </form>
  </div>
</template>


<script>
import firebase from 'firebase'

export default {
  name: 'login',
  data() {
    return {
    email: '',
    password: ''
    }
  },
  methods: {
    login: function () {
     firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(
      (user) => {
        this.$router.replace('home')
      },
       (error) => {
         alert(`Ooops ${error.message}`)
       }
     )
    }
  }
}
</script>

Моя регистрация:

<template>
  <div class="sign-up">
    <form action="" class="form-signin">
    <h3 class="heading">Create a new account</h3>
    <input type="text" placeholder="Email" v-model="email" class="form-control"><br>
    <input type="password" placeholder="Password" v-model="password" class="form-control"><br>
    <button @click="signUp" class="btn btn-lg btn-success btn-block">Sign Up</button>
    <span>Already have an account?<router-link to="/login"> Sign in Here</router-link></span>
    </form>
  </div>
</template>


<script>
import firebase from 'firebase'
export default {
  name: 'signUp',
  data() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    signUp: function () {
      firebase.auth().createUserWithEmailAndPassword(this.email, this.password).then(function(user) {
        alert('Your account has been created!')
      },
      function (error) {
        alert(`Ooops ${error.message}`)
      }
      )
    }
  }
}
</script>

Мой дом:

<template>
<div class="home">
  <h1>Welcome to the home page</h1>
  <button class="btn btn-danger" @click="logout">Logout</button>
</div>
</template>

<script>
import firebase from 'firebase'
export default {
  name: 'home',
  methods: {
  logout: function() {
  firebase.auth().signOut().then(() => {
  this.$router.replace('login')
  })
  }
 }
}
</script>

Моя конфигурация Firebase:

let app = ''
const config = {
  apiKey: 'AIzaSyDE0IVgepdhCOJLjcunmLN35AJ-6e0X0ak',
  authDomain: 'repti-care-90f1d.firebaseapp.com',
  databaseURL: 'https://repti-care-90f1d.firebaseio.com',
  projectId: 'repti-care-90f1d',
  storageBucket: 'repti-care-90f1d.appspot.com',
  messagingSenderId: '551446965940'
}

firebase.initializeApp(config)

firebase.auth().onAuthStateChanged(() => {
  if (!app) {
    app = new Vue({
      router,
      render: h => h(App)
    }).$mount('#app')
  }
})

И мой роутер:

const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/',
      name: 'login',
      component: Login

    },
    {
      path: '/sign-up',
      name: 'sign up',
      component: SignUp
    },
    {
      path: '*',
      redirect: '/login'
    }
  ]
})

router.beforeEach((to, from, next) => {
  const currentUser = firebase.auth().currentUser
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)

  if (requiresAuth && !currentUser) next('login')
  else if (!requiresAuth && currentUser) next('home')
  else next()
})

export default router

Answer 1

Использование пользовательских претензий.Это наиболее безопасный способ сделать это, поскольку изменения профиля могут выполняться на стороне клиента без ограничений.Подробнее о пользовательских утверждениях здесь .

Вы можете определить правило безопасности:

{
  "rules": {
    "adminContent": {
      ".read": "auth.token.approved === true",
      ".write": "auth.token.approved === true",
    }
  }
}

Это заблокирует доступ пользователя на вашу сторону, даже если пользователь вошел в систему.После того, как пользователь будет одобрен, вы должны позвонить:

admin.auth().setCustomUserClaims(uid, {approved: true}).then(() => {
  // The new custom claims will propagate to the user's ID token the
  // next time a new one is issued.
});

Answer 2

Возможно, создайте дополнительный флаг в профиле пользователя на firebase и проверьте этот флаг, когда он входит в систему. Установите его в 0, если вы не одобрили, и в 1, когда вы одобрите его.В основном вы добавляете простую проверку.