FirebaseAuthのドロップインログイン機能を超丁寧に解説した

## FireBaseを利用するメリット
- リファレンスが充実していて初めての方でも簡単に実装することができる。
- FireBaseはGoogleの傘下ということもあり信頼性が高い。
- 複数のプロバイダに対応している。
- メールとパスワードのログインフロー、メールリンク、電話認証、Google、Facebook、Twitter、GitHub

## ログイン機能を実装するフロー
Step1. Googleアカウントの作成
Step2. FireBaseのコンソールで準備をする
Step3. コンソールで発行されたスクリプトをhtmlに貼り付ける
Step4. FireBaseUIを初期化する
Step5. ログイン機能を実装する
Step6. 完成

## Step1. Googleアカウントを作成

FireBaseのアカウントはGoogleアカウントと共通なのでGoogleアカウントを作成します。   
[GoogleAccount新規作成](https://www.google.com/intl/ja/account/about/)   
     
## Step2. FireBaseのコンソールで準備をする
FireBaseにログインします。  

右上のログインからGoogleアカウントでログインします。  
次にログインの隣のコンソールへ移動からコンソールへ移動します。   
[FireBaseログイン](https://firebase.google.com/)
   
![image01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/742770/251a21b5-7504-a876-5092-67a9c9f36a62.png)

コンソールからプロジェクトを作成します。

![image02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/742770/2a4c9bb6-f5ac-9ba5-4fe1-18dad4743048.png)

プロジェクト名をつけます。

![image03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/742770/c8c06458-e462-893d-c29d-e1bc11084477.png)

アナリティクスの地域を選択し、プロジェクトを作成を押します。

![image04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/742770/7553d98c-611b-82ca-0304-565eae9855c2.png)

プロジェクトを作成できたところで、アプリをFireBaseに登録していきます。

![image05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/742770/f1a67010-1563-762f-d994-076c82bbadde.png)

アプリのニックネームをつけアプリを登録します。

![image06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/742770/e798179d-2087-8b48-b130-871fa4fec662.png)

こちらのスクリプトをコピーしメモ帳に張り付けておきます。（後からでも確認できます）  
※このスクリプトは外部に漏らさないでください

![image07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/742770/669786f5-4ccf-94e2-94e9-ae9c7ebdd200.png)

ログインプロバイダを設定します

![image08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/742770/dab6ee89-810e-3cf6-7f08-709586c89732.png)

Sign-in methodを押しメール/パスワードを選択します。

![image09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/742770/6abe0181-3367-8057-ac47-2cf2622d7134.png)

メール/パスワードを有効にします。

![image10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/742770/85fc7e46-861f-3970-4d92-fab5ba80cea7.png)

これでFireBaseのコンソール上での操作は終わりです。

## Step3. コンソールで発行されたスクリプトをhtmlに貼り付ける

コンソールからプロジェクトの概要に進み、前回作ったアプリへを選択します。
![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/742770/ee527686-c0bc-f839-3e0b-e63ee7c740e0.png)

スクリプトをコピーしhtmlファイルのヘッダーに張り付けます。

![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/742770/46d7871a-d56f-6645-a7b2-4b5096ebea65.png)

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- The core FireBase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-app.js"></script>

    <!-- TODO: Add SDKs for FireBase products that you want to use
         https://firebase.google.com/docs/web/setup#available-libraries -->
    <script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-analytics.js"></script>

    <script>
        // Your web app's FireBase configuration
        // For FireBase JS SDK v7.20.0 and later, measurementId is optional
        var firebaseConfig = {
        
        // 自身のクレデンシャル情報が入ります 
        
        };
        // Initialize FireBase
        firebase.initializeApp(firebaseConfig);
        firebase.analytics();
    </script> 
</head>
<body>

</body>
</html>

```

## Step4. FireBaseUIを初期化する

以下のコードをヘッダーの一番上に張り付けます。

```
  <script src="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.js"></script>
  <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.css"/>
```

以下のコードをfirebase-app.js の下に貼り付けます。

```
  <script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-auth.js"></script> 
```

以下のコードはヘッダーの一番下に貼り付けます。

```
  let ui = new firebaseui.auth.AuthUI(firebase.auth());
  ui.start('#firebaseui-auth-container', uiConfig);
```

## Step5. ログイン機能を実装する

Bodyの中に以下のコードを記述します。   
ここにログイン用のFireBaseのログインUIを表示させます。

```
<div id="firebaseui-auth-container"></div>
```

## Step6. 完成
これで完成です。   
ログインできたかを調べるために、ログイン成功時にコンソールへログを表示するコードに書き換えます。

```
ui.start('#firebaseui-auth-container', uiConfig);

↓

 let uiConfig = {
            callbacks: {
                signInSuccessWithAuthResult: function () {
                    console.log("ログイン成功")
                    return true;
                },
            },
            signInOptions: [
                firebase.auth.EmailAuthProvider.PROVIDER_ID,
            ],
        };

        let ui = new firebaseui.auth.AuthUI(firebase.auth());
        ui.start('#firebaseui-auth-container', uiConfig);
```

htmlをみてみるとこのようなUIが表示されます。

![image3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/742770/6b5d3719-3e47-37fa-4fb5-2396aaf86020.png)
  
ログインしてみると。。。   

![image4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/742770/56ded6d9-f238-6341-eff2-41276c78803d.png)


ログイン成功と表示されます。

最後に全体のコードを貼っておきます。
   
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.js"></script>
    <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.css"/>
    <script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-auth.js"></script>


    <script>
        let firebaseConfig = {
        
        // 自身のクレデンシャル情報が入ります 
        
        };

        firebase.initializeApp(firebaseConfig);

        let uiConfig = {
            callbacks: {
                signInSuccessWithAuthResult: function () {
                    console.log("ログイン成功")
                    return true;
                },
            },
            signInOptions: [
                firebase.auth.EmailAuthProvider.PROVIDER_ID,
            ],
        };

        let ui = new firebaseui.auth.AuthUI(firebase.auth());
        ui.start('#firebaseui-auth-container', uiConfig);
    </script>
</head>
<body>

<div id="firebaseui-auth-container"></div>
![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/742770/04640742-e54e-853f-ea5a-31b3bc7c394e.png)

</body>
</html>

```

## さいごに

ログイン機能の実装は以上で終わりとなります。
今回はログインに成功した後ただログを出すだけでしたが、実際には別のURLに飛ばしたりできます。
メールアドレスとパスワードの認証以外にも、githubやgoogleといった他のプロバイダで簡単に認証することができます。
ログイン機能の実装と聞くと難しく思うかもしれませんが、既に用意されたUIを使用することで誰でも簡単に素早く作ることができます。
FireBase側で用意されたものを使う分、自由にデザインや仕様を変えたりすることは難しくなりますがこれらを上手に使うことで学習コストの削減や、
時間の短縮につながるかと思います。

#### 参考

- [FireBaseUI でウェブアプリに簡単にログイン機能を追加する](https://firebase.google.com/docs/auth/web/firebaseui?hl=ja)
- [FireBase を JavaScript プロジェクトに追加する](https://firebase.google.com/docs/web/setup?hl=ja)