【Firebase】ウェブサイトで Firebase Authentication を使ってみる

ウェブサイトで Firebase Authentication を使ってみる

こちらvue-cliでFirebase Authenticationを使って、ユーザ登録機能の実装したので備忘録として書きます！

1. アプリを Firebase に接続する

1. vue.jsのログイン認証をFirebase Authenticationを使って構築を参考に、プロジェクト作成〜アプリ登録を行う。

2. FirebaseのSDKが表示が表示されるので、vueのプロジェクトに貼り付ける（こちら外部jsファイルにして読み込むのが良いっぽい）

2. 新しいユーザーを登録する

ユーザーがフォームに入力したら、ユーザーから提供されたメールアドレスとパスワードを検証し、それらを firebase.auth()のcreateUserWithEmailAndPassword メソッドに渡す

        signUp: function (context, payload) {
            firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password)
                .then(() => {
                    firebase.auth().currentUser.updateProfile({
                    displayName: payload.username,
                    },)
                .then(() => {
                    context.commit('AddToState', payload)
                })
                .then(() => {
                    router.push('/')
                })
                })
                .catch(error => {
                    alert(error.message)
                })
        },

3. 既存のユーザーをログインさせる

こちら実装中・・・

4. 認証状態オブザーバーを設定し、ユーザーデータを取得する

こちら実装中・・・

適宜更新します！

参考