Cloud Firestore+Authenticationの始め方

###Cloud Firestore
####概要
Googleが運営するFirebaseというサービスの一つで、簡単にデータベースを管理できます。現時点(2019/03)ではベータ版となっています。自分でサーバーを用意せずに簡単に複数端末でデータを同期できます。
####目標
ログイン認証も含めてJavaScriptでFirestoreを使えるようにすること。
この記事ではFirestoreの使い方というよりは始め方を解説していきます。

###プロジェクトのセットアップ

####Google Cloud Platformでプロジェクトを作成

1. [Google Cloud Platform](https://console.cloud.google.com/)にアクセスします。
2. 「プロジェクトの選択」から「新しいプロジェクト」を選択します。
![2019-03-13 09.14.03 console.cloud.google.com 3b07a0f008a1.png](https://qiita-image-store.s3.amazonaws.com/0/208257/ddce0e3e-d8c9-f9d0-962c-20f7eaa6e1f2.png)
3. プロジェクト名を入力しプロジェクトを作成します。

####Firebaseの設定
1. [Firebase](https://console.firebase.google.com/)にアクセスします。
![2019-03-13 09.15.47 console.firebase.google.com 9beae545ae46.png](https://qiita-image-store.s3.amazonaws.com/0/208257/9f5bb9ac-fd2d-3c1e-ad09-f0fc6c163fc8.png)
2. 「プロジェクトを追加」から先程作成したプロジェクトを選択し、規約に同意して追加します。
![2019-03-13 22.39.47 console.firebase.google.com 6cdb6f209446.png](https://qiita-image-store.s3.amazonaws.com/0/208257/284cbbc1-4a9a-68f6-239c-f944a651216c.png)
3. JavaScriptにコードを追加します。指示通りの場所に貼り付けてください。
<img width="803" alt="2019-03-13 22.44.43 console.firebase.google.com dd8ffe378ca0.png" src="https://qiita-image-store.s3.amazonaws.com/0/208257/ae35f608-5490-7336-4dc6-ef1b34b767ec.png">

####Cloud Firetoreの設定
1. 左のメニューのDatabaseをクリックし、Cloud Firestoreの「データベースの作成」をクリックします。
![2019-03-13 22.47.43 console.firebase.google.com 827484043e57.png](https://qiita-image-store.s3.amazonaws.com/0/208257/8533e73d-6f61-bf58-d6ad-4a1b487f40bb.png)
2. 「テストモードで開始」を選択します
![2019-03-13 22.48.14 console.firebase.google.com 7e19a1dec356.png](https://qiita-image-store.s3.amazonaws.com/0/208257/e52af236-b86f-2e3e-f3dc-a664f2cfb407.png)
3. セットアップは終了です。
![2019-03-13 22.49.50 console.firebase.google.com a0490f9e9151.png](https://qiita-image-store.s3.amazonaws.com/0/208257/cf2102f9-0847-a20a-0d29-0863325fa4ce.png)

###Webページの公開
Firebaseを使ったウェブページ用のサーバーが用意してあるのでこれを使ってみます。Firestoreを使うだけなら、ここで公開する必要はありません。
####firebase CLIの設定
1.以下のコマンドを管理者権限で実行します。

```
npm install -g npm
npm install -g firebase-tools
```

2.ログイン

```
firebase login
```

画面にそってログインします。
####ローカルでホスティング
1.プログラムを置くディレクトリで次のコマンドを実行します。

```
cd C:\～\hoge
firebase init
```

Hostingを選択、公開するディレクトリはデフォルトのpublicのまま、それ以外はYを選択します。
**publicの下に置いたファイルが公開されます**

```
hoge\
 ┣ .firebase\
 ┣ public\
 ┃   ┗index.html
 ┣ .firebaserc
 ┣ .gitignore
 ┗ firebase.json
```

2.ローカルでWebサーバを起動します。

```
firebase serve
```
`http://localhost:5000`を開き、public\index.htmlが表示されればOKです。

####デプロイ
サイトがある程度できてからデプロイします。
1.プロジェクトのIDを確認します。

```
firebase list
```

2.IDを指定してデプロイします。

```
firebase deploy --project <プロジェクトID>
```

表示された「Hosting URL」に先程のページが表示されればOKです。

###JavaScriptでデータベースを使用
どのようにプログラムを書くかに関してはこの方の記事に分かりやすくまとまっています。
[Firebase Cloud Firestoreの使い方](https://qiita.com/subaru44k/items/a88e638333b8d5cc29f2)

###セキィリティの設定
あらかじめ用意された認証のUIを使います。今回はGoogleアカウントで認証をしてみます。
####Authenticationの設定をする
1.左のメニューのAuthenticationをクリックします。
![2019-03-14 23.27.43 console.firebase.google.com a042d23fc6f9.png](https://qiita-image-store.s3.amazonaws.com/0/208257/dc859c7d-6ae5-16d9-094d-4fff96da9425.png)

2.Googleアカウントでの認証を有効にします。
![2019-03-14 23.28.15 console.firebase.google.com 297f10ff3f38.png](https://qiita-image-store.s3.amazonaws.com/0/208257/2e9586a9-bc26-4a5a-027e-919cca3a401b.png)

####Firestoreのセキュリティールールの設定
![2019-03-14 23.32.18 console.firebase.google.com ae7fb149e95b.png](https://qiita-image-store.s3.amazonaws.com/0/208257/3165dda8-6ad3-8a0c-fae6-177f58333cdd.png)

- 誰でも読み書きできる

```javascript
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}
```

- ログインした人のみ書き込みできる

```javascript
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read;
      allow write: if request.auth.uid != null;
    }
  }
}
```

- 特定の人のみ書き込みできる

```javascript
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read;
      allow write: if request.auth.uid == "<uid>";
    }
  }
}
```
\<uid> にはユーザーUIDを入力します。
![2019-03-14 23.54.36 console.firebase.google.com a3617d05c532.png](https://qiita-image-store.s3.amazonaws.com/0/208257/e4fbdc01-9465-ba4d-15ec-58f3aee69226.png)

####JavaScriptに認証用のコードを追加する
1.UIを読み込むためにコードを追加します。

```html
<script src="https://www.gstatic.com/firebasejs/5.8.6/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />
<script>
	// Initialize Firebase
	var config = {
           hoge
	};
	firebase.initializeApp(config);
</script>
```

2.UIを表示するHTML要素を作っておきます。

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


3.設定を書いて描画を開始します。

```javascript
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start('#firebaseui-auth-container', {
	callbacks: {
		signInSuccessWithAuthResult: function (authResult, redirectUrl) {
			document.getElementById('firebaseui-auth-container').style.display = 'none';
			return true;
		},
	},
	credentialHelper: firebaseui.auth.CredentialHelper.NONE,
	signInOptions: [
		firebase.auth.GoogleAuthProvider.PROVIDER_ID,
	],
});
```

**まとめると**

```html
<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Firestore-test</title>
	<script src="https://www.gstatic.com/firebasejs/5.8.6/firebase.js"></script>
	<script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script>
	<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />
	<script>
		// Initialize Firebase
		var config = {
			hoge
		};
		firebase.initializeApp(config);
	</script>
</head>

<body onload>
	<div id="firebaseui-auth-container"></div>
	<script>
		var ui = new firebaseui.auth.AuthUI(firebase.auth());
		ui.start('#firebaseui-auth-container', {
			callbacks: {
				signInSuccessWithAuthResult: function (authResult, redirectUrl) {
					document.getElementById('firebaseui-auth-container').style.display = 'none';
					return true;
				},
			},
			credentialHelper: firebaseui.auth.CredentialHelper.NONE,
			signInOptions: [
				firebase.auth.GoogleAuthProvider.PROVIDER_ID,
			],
		});

		var db = firebase.firestore();
	</script>
</body>
</html>
```