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

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

Firebaseが提供してくれているサービスの１つでFirebase Authentication を使用すると、ユーザーがアプリにログインする際に、
メールアドレスとパスワードのログイン、Google ログインや Facebook ログインなどのフェデレーション ID プロバイダなど、複数のログイン方法を使用できるようになります。
#使用方法
##管理画面
###①管理画面のAuthenticationを選択する。
<img width="281" alt="test_–_test_–_Firebase_console.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116696/c83ece4e-f881-d3c0-56c5-e8e5a94c45c9.png">

###②ログイン方法を選択する。(複数選択可)
<img width="1430" alt="Banners_and_Alerts_と_test_–_Authentication_–_Firebase_console.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116696/f7453d2a-7e69-9a68-c245-7e76aa24ca2c.png">

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

```vuejs: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>
```
###ログイン
ユーザーの作成ができれば認証も作ります。

```vuejs: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 ログイン

```js

const provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider).then(result => /* ... */);
```
#####Facebook ログイン
```js

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

#####Twitter ログイン
```js
const provider = new firebase.auth.TwitterAuthProvider();
firebase.auth().signInWithPopup(provider).then(result => /* ... */);
```
###ログアウト

```js
firebase.auth().signOut()
.then(() => {
    //ログアウトできた
}).catch((error) => {
    //ログアウトできない
});
```
###ユーザー情報取得
取得できる情報は``uid(ユーザーIDと思ってください。)``,``ユーザ名``,``アイコン``,``メールアドレス``,``パスワード``などがありますが、
``ユーザ名``や``アイコン``は設定されていないので後述のユーザー編集で作成してください。

```js

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

```js
var user = firebase.auth().currentUser;
user.updateProfile({
    //編集したいもの
    displayName: "ユーザ名",
    photoURL: "アイコン画像のURL"
}).then((user) => {
    //アカウントを編集しました
}).catch((error) => {
    //アカウントを編集を失敗しました
});
```
なおアイコン（画像）の方はfirestore storageを使用しないといけないため、
改めてfirestore Storageの回で解説します。

###ユーザー削除

```js

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

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

最後まで読んでいただきありがとうございました。
[Twitter](https://twitter.com/watataku9)やってます。良ければチェックして見てください。:point_up::point_up::point_up:
#リンク
- [初めてのFirebaseを触ってみる(導入編)](https://qiita.com/watataku/items/94274031a4e49c9cc9a0)