初めてのFirebaseを触ってみる(Authentication)

はじめに

おはようございます。こんにちは。こんばんは。
今回はFirebaseのAuthenticationについて見てきます。
では、早速行って見ましょう。
※今回もwebベース(Vue.js)の解説です。

Authenticationとは

https://firebase.google.com/docs/auth/?hl=ja

Firebaseが提供してくれているサービスの１つでFirebase Authentication を使用すると、ユーザーがアプリにログインする際に、
メールアドレスとパスワードのログイン、Google ログインや Facebook ログインなどのフェデレーション ID プロバイダなど、複数のログイン方法を使用できるようになります。

使用方法

管理画面

①管理画面のAuthenticationを選択する。

②ログイン方法を選択する。(複数選択可)

webプログラム側

ユーザー登録

※ログイン方法をメールアドレス・パスワードを選択したとき
管理画面から直接ユーザーを作成することもできるのですが、コードでの作成方法です。

createUser.vue

<template>
    <div class="hope">
        <h2>アカウント登録</h2>
        <input type="text" v-model="email" placeholder="メールアドレス" class="hoge">
        <input type="password" v-model="password" placeholder="パスワード" class="hoge">
        <input type="button" value="登録" @click="createAccount">
    </div>
</template>

<script>
import firebase from '@/plugins/firebase'

export default {
    data() {
        return {
            email: '',
            password: ''
        }
    },
    methods: {
        createAccount() {
            firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
            .then(user => {
                // 登録完了
            });
        }
    }
}
</script>

ログイン

ユーザーの作成ができれば認証も作ります。

login.vue

<template>
    <div class="bowbow">
            <h2>ログイン</h2>
            <input type="text" placeholder="メールアドレス" v-model="email"  value="[e-mail]" class="loginHoge">
            <input type="password" placeholder="パスワード" v-model="password" value="Passw0rd" class="loginHoge">
            <input type="button" value="ログイン" @click="login">
    </div>
    </transition>
</template>
<script>
import firebase from '@/plugins/firebase'

export default {
    data() {
        return {
            email: '',
            password: ''
        }
    },
    methods: {
        login() {
            firebase.auth().signInWithEmailAndPassword(this.email, this.password)
            .then(user => {
                // ログインしたら飛ぶページを指定
                this.$router.push('/mypage');
            }).catch((error) => {
                //ログイン失敗
            });
        }
    }
}
</script>

その他のログイン方法

Google ログイン

const provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider).then(result => /* ... */);

Facebook ログイン

const provider = new firebase.auth.FacebookAuthProvider();
firebase.auth().signInWithPopup(provider).then(result => /* ... */);

Twitter ログイン

const provider = new firebase.auth.TwitterAuthProvider();
firebase.auth().signInWithPopup(provider).then(result => /* ... */);

ログアウト

firebase.auth().signOut()
.then(() => {
    //ログアウトできた
}).catch((error) => {
    //ログアウトできない
});

ユーザー情報取得

取得できる情報はuid(ユーザーIDと思ってください。),ユーザ名,アイコン,メールアドレス,パスワードなどがありますが、
ユーザ名やアイコンは設定されていないので後述のユーザー編集で作成してください。

firebase.auth().onAuthStateChanged((user)=> {
    if (user != null) {
        //ユーザーがいれば
    }
})

ユーザー編集

var user = firebase.auth().currentUser;
user.updateProfile({
    //編集したいもの
    displayName: "ユーザ名",
    photoURL: "アイコン画像のURL"
}).then((user) => {
    //アカウントを編集しました
}).catch((error) => {
    //アカウントを編集を失敗しました
});

なおアイコン（画像）の方はfirestore storageを使用しないといけないため、
改めてfirestore Storageの回で解説します。

ユーザー削除

var user = firebase.auth().currentUser;
user.delete().catch(function(error) {
    //ユーザーを削除できませんでした。
});

以上。
もし、間違い等、アドバイス、ご指摘等有れば教えていただけたら幸いです
次回はfirebaseが提供している機能のDatabaseを見ていきます。

最後まで読んでいただきありがとうございました。
Twitterやってます。良ければチェックして見てください。

リンク

• 初めてのFirebaseを触ってみる(導入編)