## プロジェクトの作成

## .envの設定

```.env.local
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_DATABASE_URL=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=
```

起動時のログ

```log
...
app_1  | info  - Loaded env from /usr/src/app/.env.local
...
```

NOTE: `FIREBASE_API_KEY`では読み込んでくれないので注意。下記のエラーが発生した。

```error.log
"auth/invalid-api-key", message: "Your API key is invalid, please check you have copied it correctly." 
```

## データベースの作成
ClouFireStoreから作成します。

`asia-northeast1`を選択します。

データベースの設定値は、`[databaseName].[region].firebasedatabase.app`となります。

[JavaScript でのインストールと設定](https://firebase.google.com/docs/database/web/start)

[コンテクスト - React](https://ja.reactjs.org/docs/context.html)

- props を通したトップダウン（親から子）で渡すケースが面倒なケースで使用する。(ex) ログイン状態、テーマ etc)

[コンポジション vs 継承 - React](https://ja.reactjs.org/docs/composition-vs-inheritance.html)

Firebase

Next.jsとFirebaseの連携方法

<h2>プロジェクトの作成</h2>
<h2>.envの設定</h2>
<pre><code>NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBL...

## 状況/バージョン
- Next.js v11.x
- Firebase Google認証確認済

## FireStoreの概念
ファイルシステムに近い感覚でデータを管理する仕組みになっている。

||説明|
|---|---|
|コレクション|フォルダのような概念|
|ドキュメント|ファイルのような概念|
|データ|ファイルの中身|
|Reference|ドキュメントやコレクションへのパス情報だけで、中身を持っていない。<br>データの追加、更新、削除はReferenceに対して行う|

## モデルの作成

|User(users)|型|
|---|---|
|name|文字列|

|Website(websites)|型|
|---|---|
|title|文字列|

|Article(articles)|型|
|---|---|
|tilet|文字列|
|website_id|Reference型|

## APIルートで呼び出すか否か
- ~そもそも、FirebaseをAPIルートで呼び出す必要があるか疑問がある。~
- ~`/lib/*`などにまとめて置く案もある。~
- サーバ側のみでしか実行できないAPIを呼び出す時に、　`/pages/api`を使用するのも良いかもしれない。(ex) アカウントの削除, 重たい処理 etc)

また、APIルートを使用すると、FireStoreサーバ　<-> Vercel API(AWS)間の距離も気になるところ。

## 下準備

`models`や`apiルート`,`auth`など複数に渡って、呼び出すのでFirebaseの設定だけ切り出しておきます。

```lib/firebase.js
import Firebase from 'firebase/app'
import 'firebase/auth' // importしておく
import 'firebase/firestore' // importしておく

const config = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
}

if (!Firebase.apps.length) {
  Firebase.initializeApp(config)
}

export const firebase = Firebase
export const auth = firebase.auth()
export const db = firebase.firestore()

```

## ドキュメントを取得する
[ドキュメントを取得する - Firebase](https://firebase.google.com/docs/firestore/query-data/get-data)

```js
const db = firebase.firestore()
const userRef = await db.collection('users').doc('xxxxxxxxxxx')
const userDoc = await userRef.get()

if (!userDoc.exists) {
  console.log('No such document!')
} else {
  const userData = userDoc.data()
  console.log('Document data:', userDoc.data())
}
```

## ドキュメント/Reference型の取得
作成したモデルクラス`article.js`で呼び出します。名前空間の関係でクラス名は`ArticleModel`となっています。

```models/article.js
static async get(limit = 20) {
  const articlesRef = await db.collection('articles').limit(limit).get()
  const articles = await Promise.all(articlesRef.docs.map(async (articleRef) => {

    // NOTE: Reference型 をそのままページに返すと 「serialized as JSON」 エラーになる
    // NOTE: Reference型 は Object型 で返ってくる
    // console.log('typeof: ', typeof a.website_id)

    const article = articleRef.data()
    console.log('article: ', article)

    // Reference型なので、取得するには get() すれば良い
    const websiteRef = await article.website_id.get()
    const website = websiteRef.data()
    console.log('website: ', website)

    // TODO: Classで返すか検討する
    return {
      description: article.description,
      image_url: article.image_url,
      title: article.title,
      url: article.url,
      website: website
    }
  }))
  return articles
}
```

### ポイント
- `map()`を`Promise.all()`で囲む。([How to use async functions with Array.map in Javascript](https://advancedweb.hu/how-to-use-async-functions-with-array-map-in-javascript/))
- Reference型は、`get()`で取得する。

### 呼び出し側
```pages/idnex.js
import ArticleModel from 'models/article.js'

export async function getServerSideProps() {
  const articles = await ArticleModel.get(20)
  return {
    props: {
      articles: articles
    }
  }
}
```

## ドキュメントを追加する
- add は、ドキュメント追加時にIDを自動で付与
- set は、ドキュメント使い時に任意のIDを指定して付与

## ドキュメントの確認と追加

```js
  const { uid, displayName, email, photoURL } = req.body
  const userRef = db.collection('users').doc(uid)
  const doc = await userRef.get()

  if (doc.exists) {
    const userData = doc.data()
    res.status(200).json(JSON.stringify(userData))
  } else {
    await db.collection('users').doc(uid).set({
      name: displayName
    }, { merge: true })
    const docRef = await db.collection('users').doc(uid)
    const doc = await docRef.get()
    const userData = doc.data()
    res.status(200).json(JSON.stringify(userData))
  }
```

## ドキュメントIDはupdateすべきではない
[How to update the document ID in firebase firestore? [duplicate]
](https://stackoverflow.com/questions/52114590/how-to-update-the-document-id-in-firebase-firestore)

[Firebase Authentication](https://firebase.google.com/docs/auth)では、ユーザーを一意に管理できるらしい。このデータとFireStoreのUserを一意にできると解決する。

Firebase Authenticationのデータ

|データ|説明|
|---|---|
|ID||
|プロバイダ||
|作成日||
|ログイン日||
|ユーザーID||

**Firebase AuthenticationのユーザーIDを`users`コレクションのドキュメントIDとして使用する。**

## Google認証から取得できるデータ
Google認証から取得できるデータは以下の通り

|データ|説明|
|---|---|
|displayName|Googleアカウントの名前|
|email|Googleアカウントのメールアドレス|
|photoURL|Googleアカウントのアバター|


Next.js と FireSroreの連携

## 開始する

```bash
firebase init functions
```

上記を実行すると`functions`というディレクトリができます。最初のサンプルコードをデプロイしてみます。

```js
const functions = require('firebase-functions');

// // Create and Deploy Your First Cloud Functions
// // https://firebase.google.com/docs/functions/write-firebase-functions
//
exports.helloWorld = functions.https.onRequest((request, response) => {
  functions.logger.info("Hello logs!", {structuredData: true});
  response.send("Hello from Firebase!");
});
```

## デプロイする

```bash
firebase deploy --only functions
```

## 実行する

```bash
curl --header Content-Type:"application/json" {エンドポイント}
````

NuxtJS

Nuxt.jsでFirebase Cloud Functionsを使う方法

## はじめに

`firebase.js`

```js
import firebase from "firebase/app"
import "firebase/auth"
import "firebase/storage"
import "firebase/firestore"

if (!firebase.apps.length) {
  firebase.initializeApp({
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.FIREBASE_DATABASE_URL,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.FIREBASE_APP_ID,
    measurementId: process.env.FIREBASE_MEASUREMENT_ID,
  })
}
export const auth = firebase.auth()
export const storage = firebase.storage()
export const db = firebase.firestore()
export default firebase
```

## CORS周り

[HTTP 関数](https://cloud.google.com/functions/docs/writing/http?hl=ja#handling_cors_requests)

Nuxt.jsとFirebase Authenticationで認証機能を作る

## はじめに

[Nuxt.jsでFirebase Cloud Functionsを使う方法](https://nishimura.club/nuxt-cloud-functions)の続きです。(Nuxt.js関係ないけども…)
[Cloud Scheduler](https://console.cloud.google.com/cloudscheduler/)を使用して、1日に1回レコードを更新します。
**※Firebaseのプロジェクトの方は、Cloud Functionsだけでcronを設定できるようです。**
Firebaseを使わずにやる方法もおいおいやる機会はありそう。

## 準備

- **Cloud Functionsが息していることを確認する** => 叩いてみる => **OK!**

```bash
curl --header Content-Type:"application/json" {エンドポイント}
```

## FirebaseではFunctionsだけでいけるみたい

```js
exports.scheduledFunctionCrontab = functions.pubsub
  .schedule("*/1 * * * *") // 毎分に設定
  .timeZone("Asia/Tokyo") // 日本に設定
  .onRun(() => {
    console.log("テスト")
    return null
  })
```

デプロイ

```bash
firebase deploy --only functions
```

`firebase-tools`のバージョンをあげないといけなかった

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

![Cloud Scheduler](//images.ctfassets.net/0jyj5pjwic68/12CJSeJJ90GIMlRKmkIgCk/aa59f5bb5f18e6f2c4df98f70affbb04/____________________________2021-02-09_1.14.21.png)

**ちゃんと実行されてる！**

最後に毎分実行を直しておきます。

cronの時間を調べるのに良さげサイト => [crontab.guru](https://crontab.guru/)

```js
exports.scheduledFunctionCrontab = functions.pubsub
  .schedule("0 */3 * * *") // 3時間おき
  .timeZone("Asia/Tokyo")
  .onRun(() => {
    console.log("テスト")
    return null
  })
```

## 実行環境のオプション変更

[関数のデプロイとランタイム オプションを管理する](https://firebase.google.com/docs/functions/manage-functions?hl=ja)

## 参考
- [関数のスケジュール設定](https://firebase.google.com/docs/functions/schedule-functions?hl=ja)
- [Pub/Sub を使用して Cloud ファンクションをトリガーする](https://cloud.google.com/scheduler/docs/tut-pub-sub?hl=ja)

【Firebase】Cloud Schedulerを使いCloud Functionsを呼び出す方法

## 前提条件

- NuxtJS
- Hasura
- Firebase
- GraphQL & Apollo Client

上記の使い方をある程度わかっていること

## ステップ1 Hasuraの環境変数の設定

- `HASURA_GRAPHQL_ADMIN_SECRET`を設定します。こちらは任意の値ですが、忘れないようにメモしておきましょう。こちらを設定すると、リクエストを投げても、下記エラーが発生するようになります。

```bash
GraphQL error: x-hasura-admin-secret/x-hasura-access-key required, but not found
```

- `HASURA_GRAPHQL_JWT_SECRET`の登録します。(FirebaseのプロジェクトIDが必要です。)

```json
{
    "type":"RS256",
    "jwk_url": "https://www.googleapis.com/service_accounts/v1/jwk/securetoken@system.gserviceaccount.com",
    "audience": "<firebase-project-id>",
    "issuer": "https://securetoken.google.com/<firebase-project-id>"
}
```

- `HASURA_GRAPHQL_UNAUTHORIZED_ROLE`を設定します。値は、`anonymous`にしておきましょう。この値は、認証していないユーザーのデータアクセス権限を設定する為です。

上記を設定した後に、Hasuraプロジェクトのコンソールに入り、data→permissionで詳細な権限を設定します。認証していないユーザーでもアクセスできるデータは、permissionを許可します。

![Hasura Firebase](//images.ctfassets.net/0jyj5pjwic68/16lZMdkrir7SiZRwaEBXmz/b5eab0b80a76d95bef553f430bb86fc4/____________________________2021-02-14_1.11.51.png)

権限がない場合は、下記のエラーがスローされます。(例えばUserモデルへのmutation)

```bash
[GraphQL error]: Message: field "update_users_by_pk" not found in type: 'mutation_root', Location: undefined, Path: undefined
```

なので、Headersに`X-Hasura-Role`に`admin`や`anonymous`を入れる必要があります。
また、`X-Hasura-Admin-Secret`を入れておくと、実行が管理者権限になります。

- [Hasura Authentication Explained](https://hasura.io/blog/hasura-authentication-explained/)
- [Access control basics](https://hasura.io/docs/1.0/graphql/core/auth/authorization/basics.html)
- [how set custom headers #176](https://github.com/nuxt-community/apollo-module/issues/176)

## 参考
- [A tutorial for using Firebase to add authentication and authorization to a realtime Hasura app](https://hasura.io/blog/authentication-and-authorization-using-hasura-and-firebase/)
- [Firebaseを利用して、リアルタイムHasuraアプリに認証と承認を追加するチュートリアル](https://www.graat.co.jp/blogs/cjwstb63d0daz0830mzctngvk)

Hasura

Hasura×Firebase Authで認証を作る

Firebaseの公式ドキュメント[複数の関数を整理する](https://firebase.google.com/docs/functions/organize-functions?hl=ja)に書いてありました。

Next.jsとFirebaseの連携方法

プロジェクトの作成

.envの設定

データベースの作成

Related

Tags

Share

Table of Contents