1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ゲストユーザー機能【Vue.js/Firebase】

Last updated at Posted at 2021-05-01

#概要
・ポートフォリオでゲストユーザー機能を実装したので言葉での説明とコード例を紹介
・使用技術はVue.jsとFirebase
・開発環境はVue-Cli

#考え方
あらかじめゲストユーザーのアカウントを作成しておき、ボタンを押すと自動的にそのゲストユーザーのemailとpasswordを使ってログインされるようにするだけ。

ゲストユーザーのemailは「guest@example.com」、password「guests」としてあらかじめアカウントを作成しておく。
通常ログインとの違いは下記の通り。

■通常ログイン
formにemailとpasswordを入力し、その値を引数として使ってfirebaseのsignInWithEmailAndPasswordでログインする。

■ゲストログイン
ボタンを押すとゲストログインの関数が実行され、signInWithEmailAndPasswordに変数ではなく、直接「guest@example.com」と「guests」を渡す。

#コードは以下の通り

login.vue
methods: {
    loginWithGestUser(){
      //formに入力したemailやpasswordではなく、予め登録されているものを直接渡す
      this.$store.dispatch("loginWithGestUser", {email: "guest@example.com", password: "guests"})
    }
 }
store.js
loginWithGestUser({commit}, payload){
      firebase.auth().signInWithEmailAndPassword(payload.email, payload.password)
        .then(
          user => {
             const guestUser = {
                //省略。。。
              }
            }   
            commit("setLoginUser", guestUser)
          })
    }

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?