html Vue + Firebase + Auth演示

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html Vue + Firebase + Auth演示相关的知识，希望对你有一定的参考价值。

# Vue + Firebase + Auth Demo

> A simple App using Vue.js & Firebase with Auth.

See the [DEMO](https://vue-firebase-auth-demo.surge.sh/).
{
  "rules": {
    "items": {
      "$uid": {
        ".read": "auth != null && auth.uid == $uid",
        ".write": "auth != null && auth.uid == $uid"
      }
    }
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue + Firebase + Auth Demo</title>
  <style> body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } </style>
</head>
<body>

  <div id="app">
    <h1>Simple Auth Demo</h1>
    <p v-if="loading">Loading...</p>
    <template v-if=user>
      <img :src="user.photoURL" alt="avatar" style="width: 30px; height: 30px; border-radius: 50%;">
      <button @click="signOut">Sign Out</button>
      <ul>
        <li v-for="item in items">{{ item.name }}
          <button @click="removeItem(item)">&times;</button>
        </li>
      </ul>
      <p v-if="!items.length">No items found! Add one below.</p>
      <label for="item">Add Item</label> <br>
      <input type="text" v-model="item" @keyup.enter="addItem">
    </template>
    <template v-if="!user && !loading">
      <button @click="signInWithGoogle">Sign in with Google</button>
    </template>
  </div>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://www.gstatic.com/firebasejs/3.6.10/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/3.6.10/firebase-database.js"></script>
  <script src="https://www.gstatic.com/firebasejs/3.6.10/firebase-auth.js"></script>
  <script src="https://unpkg.com/vuefire/dist/vuefire.js"></script>

  <script>

  var config = {
    apiKey: 'AIzaSyA8zh_Wf7ja7PWuEPK7iyXjVQAufNNCwNM',
    authDomain: 'simple-auth-demo.firebaseapp.com',
    databaseURL: 'https://simple-auth-demo.firebaseio.com'
  }

  const firebaseApp = firebase.initializeApp(config)
  const db = firebaseApp.database()

  const vm = new Vue({
    el: '#app',

    beforeCreate: function() {
      firebase.auth().onAuthStateChanged((user) => {
        if (user) {
          this.user = user
          this.$bindAsArray('items', db.ref(`items/${user.uid}`))
        }
        this.loading = false
      })
    },

    data: {
      loading: true,
      user: null,
      items: [],
      item: ''
    },

    methods: {
      signInWithGoogle: function() {
        const provider = new firebase.auth.GoogleAuthProvider()
        firebase.auth().signInWithRedirect(provider).then((result) => {
          this.user = result.user
        }).catch(err => console.log(error))
      },

      signOut: function() {
        firebase.auth().signOut().then(() => {
          this.user = null
        }).catch(err => console.log(error))
      },

      addItem: function() {
        this.$firebaseRefs.items.push({
          name: this.item
        }).then(() => {
          this.item = ''
        })
      },

      removeItem: function(item) {
        this.$firebaseRefs.items.child(item['.key']).remove()
      }
    }
  })

  </script>

</body>
</html>

以上是关于html Vue + Firebase + Auth演示的主要内容，如果未能解决你的问题，请参考以下文章

Asp net core 和 Firebase 身份验证

vuejs vue-router 不适用于 Firebase 托管

多个用户的 Firebase 实时数据库身份验证

Firebase 以 firebase:authUser 的形式检索存储在本地存储中的用户数据：

React Native - Firebase 身份验证持久性不起作用

导入 firebase.firestore() 返回未定义