5
6

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.

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

Last updated at Posted at 2020-04-07

#はじめに
おはようございます。こんにちは。こんばんは。
今回はFirebaseのAuthenticationについて見てきます。
では、早速行って見ましょう。
※今回もwebベース(Vue.js)の解説です。
#Authenticationとは
https://firebase.google.com/docs/auth/?hl=ja

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

###②ログイン方法を選択する。(複数選択可)
Banners_and_Alerts_と_test_–_Authentication_–_Firebase_console.png

##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="hoge@gmail.com" 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やってます。良ければチェックして見てください。:point_up::point_up::point_up:
#リンク

5
6
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
5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?