FirebaseでWebアプリにGoogleログインを実装する

# はじめに
FirebaseのAuthentication機能を利用し、WebアプリにGoogleログインを実装する機会があったので、その手順を記録しておきたいと思います。





# 事前準備

事前準備として、ディレクトリ構成はこのようにしたいと思います。
>test
  ┗ public
　　┣ index.html
　　┣ home.html
　　┗ firebase.js


index.html　(ログインボタンがあるページ)

```HTML:index.html
<body>
    <h1>Firebase-test</h1>
    <button onclick="googleLogin()">Googleでログイン</button>
</body>
```
<br>

home.html　(ログイン後のページ)

```HTML:home.html
<body>
    <h1>ログイン後のページです</h1>
</body>
```
<br>

firebase.js　(firebaseの設定を記述するページ)

```JavaScript:firebase.js
// firebaseの設定を記述します
```



# Firebaseのプロジェクト作成

通常通りFirebaseのプロジェクトを作成します。
初めての方は[こちらの記事](https://qiita.com/c-shiraga/items/869a296799443e1388ce#firebase%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90)の、プロジェクト作成部分を参考にしてみてください。



# Firebaseの設定

## プロジェクトにWebアプリを追加

![スクリーンショット 2021-05-22 17.56.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/31344bd5-8b14-2e7d-e626-3756013fa6d0.png)
コンソールから、プロジェクトの概要→アプリを追加で、ウェブを選択します。
<br>
![スクリーンショット 2021-05-22 17.57.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/b5939b0d-f77d-3443-1e25-86f8fcc7bcb0.png)
プロジェクト名を記述し、アプリを登録します。
<br>
![スクリーンショット 2021-05-22 18.08.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/2dbcb37f-e8a2-64d7-c5c6-bde918dad2b0.png)
赤枠の部分をコピーし、firebase.jsに貼り付けます

```JavaScript:firebase.js
// firebaseの設定を記述します
var firebaseConfig = {
    apiKey: "Your_apiKey",
    authDomain: "Your_authDomein",
    projectId: "Your_projectId",
    storageBucket: "Your_storageBucket",
    messagingSenderId: "Your_messagingSenderId",
    appId: "Your_appId",
    measurementId: "Your_measurementId"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
```
上記のようになります。
<br>

## Authenticationの設定

![スクリーンショット 2021-05-22 17.52.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/e0189452-efb5-419a-e0de-574cdcf390b3.png)

Authentication → 始めるを選択
<br>

![スクリーンショット 2021-05-22 17.53.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/7bae3b7f-e00f-e322-50ea-2ae64b809e53.png)
Sign-in method → Googleのステータスを選択 → 有効にする
<br>

![スクリーンショット 2021-05-22 17.54.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/e95d1779-e83e-ab68-e22d-4687e8d1327b.png)
プロジェクトの公開名を記述、メールを選択 → 保存する

##HTMLファイルにコードを追記
```HTML:index.html
<body>
    <h1>Firebase-test</h1>
    <button onclick="googleLogin()">Googleでログイン</button>
    <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 src="https://www.gstatic.com/firebasejs/8.6.2/firebase-analytics.js"></script>
    <script src="./firebase.js"></script>
    <script>
        const googleLogin = () => {
            const provider = new firebase.auth.GoogleAuthProvider();

            firebase.auth().signInWithPopup(provider)
                .then((result) => {
                    // ログイン後のページに飛ばす
                    location.href = "./home.html";
                })
                .catch(function(error) {
                    // エラー時の処理を記述
                    alert('正常にサインインできませんでした。');
                });
        }
    </script>
</body>
```
index.htmlにログイン機能を追記
<br>

```HTML:home.html
<body>
    <h1>ログイン後のページです</h1>
    <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 src="https://www.gstatic.com/firebasejs/8.6.2/firebase-analytics.js"></script>
    <script src="./firebase.js"></script>
    <script>
        firebase.auth().onAuthStateChanged((user) => {
            if (!user) {
                // サインインしていない状態
                // サインイン画面に遷移する等
                location.href = './index.html';
            } else {
                // サインイン済み
                alert(user.displayName + "さん、こんにちは!");
            }
        });
    </script>
</body>
```
home.htmlにログイン後の処理を追記

##Firebaseの初期化
おなじみの初期化処理を行います。
初めての方は[こちらの記事](https://qiita.com/c-shiraga/items/869a296799443e1388ce#firebase%E6%A9%9F%E8%83%BD%E3%81%AE%E8%A8%AD%E5%AE%9A)のFirebase機能の設定 → firebase initの部分からやってみてください。


# 機能の検証
testディレクトリで

```
firebase serve
```
を実行し、ローカルサーバーを立ち上げます。
![スクリーンショット 2021-05-22 20.11.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/84343449-4d5d-2586-2845-8bedcad522d8.png)
![スクリーンショット 2021-05-22 20.12.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/ab0131b5-10e4-f557-4913-825567a53081.png)
![スクリーンショット 2021-05-22 20.12.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/1eabb7a2-4cce-c553-7295-8999811b127c.png)
上記のようにログインフローが進み、アカウントの名前を取得できたら成功です。


#あとがき
今回は、FirebaseでGoogleログインを実装するための手順を記述しました。
これからも、Firebaseの他の機能の使い方などを記述していきたいと思います。

#参考にさせて頂いた記事
[Firebase Authentication これだけは覚えておけ！テストに出るぞ！](https://qiita.com/niusounds/items/829780bdc45d34b4d1e7)