このページは Cloud Translation API によって翻訳されました。

Switch to English

AngularFire Web コードラボ

1。概要

このコードラボでは、Firebase 製品とサービスを使用してチャットクライアントを実装およびデプロイすることにより、 AngularFireを使用して Web アプリケーションを作成する方法を学習します。

学べること

Angular と Firebase を使用して Web アプリを構築します。
Cloud Firestore と Cloud Storage for Firebase を使用してデータを同期します。
Firebase Authentication を使用してユーザーを認証します。
ウェブアプリを Firebase Hosting にデプロイします。
Firebase Cloud Messaging を使用して通知を送信します。
Web アプリのパフォーマンスデータを収集します。

必要なもの

WebStorm 、 Atom 、 Sublime 、またはVS Codeなど、選択した IDE/テキストエディター
パッケージマネージャーnpm 。通常はNode.jsに付属します。
端末/コンソール
Chrome などの任意のブラウザ
コードラボのサンプルコード (コードの取得方法については、コードラボの次のステップを参照してください。)

2. サンプルコードを入手する

コマンドラインからコードラボのGitHub リポジトリのクローンを作成します。

git clone https://github.com/firebase/codelab-friendlychat-web

git がインストールされていない場合は、リポジトリを ZIP ファイルとしてダウンロードすることもできます。

スターターアプリをインポートする

IDE を使用して、複製されたリポジトリから 📁 angularfire-startディレクトリを開くかインポートします。この 📁 angularfire-startディレクトリには、完全に機能するチャット Web アプリとなるコードラボの開始コードが含まれています。

3. Firebase プロジェクトを作成して設定する

Firebaseプロジェクトを作成する

Firebaseにサインインします。
Firebase コンソールで[プロジェクトの追加]をクリックし、Firebase プロジェクトにFriendlyChatという名前を付けます。 Firebase プロジェクトのプロジェクト ID を覚えておいてください。
「このプロジェクトに対して Google アナリティクスを有効にする」のチェックを外します
「プロジェクトの作成」をクリックします。

構築しようとしているアプリケーションは、ウェブアプリで利用可能な Firebase 製品を使用します。

Firebase Authentication を使用すると、ユーザーがアプリに簡単にサインインできるようになります。
Cloud Firestore は、構造化データをクラウド上に保存し、データが変更されたときに即座に通知を受け取ります。
Firebase 用の Cloud Storage は、ファイルをクラウドに保存します。
アセットをホストして提供するFirebase Hosting 。
Firebase Cloud Messaging を使用してプッシュ通知を送信し、ブラウザーのポップアップ通知を表示します。
Firebase Performance Monitoring は、アプリのユーザーパフォーマンスデータを収集します。

これらの製品の中には、特別な構成が必要な場合や、Firebase コンソールを使用して有効にする必要があるものもあります。

Firebase Web アプリをプロジェクトに追加する

ウェブアイコンをクリックします新しい Firebase ウェブアプリを作成します。
アプリを「Friendly Chat」というニックネームで登録し、 「このアプリの Firebase Hosting も設定します」の横にあるチェックボックスをオンにします。 [アプリの登録]をクリックします。
次のステップでは、構成オブジェクトが表示されます。 JS オブジェクトのみ (周囲の HTML ではない) をfirebase-config.jsにコピーします。

Web アプリのスクリーンショットを登録する

ユーザーが自分の Google アカウントを使用して Web アプリにサインインできるようにするには、 Googleサインイン方法を使用します。

Googleサインインを有効にする必要があります。

Firebase コンソールの左側のパネルで[ビルド]セクションを見つけます。
[認証]をクリックし、 [サインイン方法]タブをクリックします (または、ここをクリックして直接そこに移動します)。
Googleサインインプロバイダーを有効にして、 [保存]をクリックします。
アプリの公開名を「Friendly Chat」に設定し、ドロップダウンメニューからプロジェクトサポートの電子メールを選択します。
Google Cloud Consoleで OAuth 同意画面を設定し、ロゴを追加します。

Cloud Firestoreを有効にする

このウェブアプリはCloud Firestoreを使用してチャットメッセージを保存し、新しいチャットメッセージを受信します。

Cloud Firestore を有効にする必要があります。

Firebase コンソールの[ビルド]セクションで、 [Firestore データベース]をクリックします。
[Cloud Firestore] ペインで[データベースの作成]をクリックします。

[テストモードで開始]オプションを選択し、セキュリティルールに関する免責事項を読んだ後、 [次へ]をクリックします。

テストモードでは、開発中にデータベースに自由に書き込むことができます。このコードラボの後半でデータベースの安全性を高めます。

Cloud Firestore データが保存される場所を設定します。これをデフォルトのままにすることも、近くの地域を選択することもできます。 「完了」をクリックして Firestore をプロビジョニングします。

クラウドストレージを有効にする

このウェブアプリは、Cloud Storage for Firebase を使用して写真を保存、アップロード、共有します。

Cloud Storage を有効にする必要があります。

Firebase コンソールの[ビルド]セクションで、 [ストレージ]をクリックします。
[開始する]ボタンがない場合は、クラウドストレージがすでに有効になっているため、以下の手順に従う必要はありません。
「開始する」をクリックします。
Firebase プロジェクトのセキュリティルールに関する免責事項を読み、 [次へ]をクリックします。

デフォルトのセキュリティルールを使用すると、認証されたユーザーはすべて Cloud Storage に何でも書き込むことができます。このコードラボの後半でストレージの安全性を高めます。

Cloud Storage の場所は、Cloud Firestore データベース用に選択したのと同じリージョンで事前に選択されています。 「完了」をクリックしてセットアップを完了します。

4. Firebase コマンドラインインターフェイスをインストールする

Firebase コマンドラインインターフェイス (CLI) を使用すると、Firebase Hosting を使用して Web アプリをローカルで提供したり、Web アプリを Firebase プロジェクトにデプロイしたりできます。

次の npm コマンドを実行して CLI をインストールします。

npm -g install firebase-tools

次のコマンドを実行して、CLI が正しくインストールされていることを確認します。

firebase --version

Firebase CLI のバージョンが v4.1.0 以降であることを確認してください。

次のコマンドを実行して、Firebase CLI を承認します。

firebase login

アプリのローカルディレクトリ (コードラボで前にクローンを作成したリポジトリ) から Firebase Hosting 用のアプリの設定を取得するようにウェブアプリテンプレートを設定しました。ただし、設定を取得するには、アプリを Firebase プロジェクトに関連付ける必要があります。

コマンドラインがアプリのローカルのangularfire-startディレクトリにアクセスしていることを確認してください。
次のコマンドを実行して、アプリを Firebase プロジェクトに関連付けます。

firebase use --add

プロンプトが表示されたら、プロジェクト IDを選択し、Firebase プロジェクトにエイリアスを付けます。

エイリアスは、複数の環境 (本番環境、ステージング環境など) がある場合に便利です。ただし、このコードラボでは、 defaultのエイリアスを使用することにします。

コマンドラインの残りの指示に従います。

5.AngularFireをインストールする

プロジェクトを実行する前に、Angular CLI と AngularFire がセットアップされていることを確認してください。

コンソールで次のコマンドを実行します。

npm install -g @angular/cli

次に、コンソールでangularfire-startディレクトリから次の Angular CLI コマンドを実行します。

ng add @angular/fire

これにより、プロジェクトに必要な依存関係がすべてインストールされます。

プロンプトが表示されたら、Firebase コンソールで設定した機能 ( ng deploy -- hosting 、 Authentication 、 Firestore 、 Cloud Functions (callable) 、 Cloud Messaging 、 Cloud Storage ) を選択し、コンソールのプロンプトに従います。

6. スターターアプリをローカルで実行する

プロジェクトをインポートして構成したので、Web アプリを初めて実行する準備が整いました。

コンソールで、 angularfire-startディレクトリから次の Firebase CLI コマンドを実行します。

firebase emulators:start

コマンドラインには次の応答が表示されるはずです。

✔  hosting: Local server: http://localhost:5000

Firebase Hostingエミュレータを使用してアプリをローカルで提供しています。 Web アプリはhttp://localhost:5000から利用できるようになります。 srcサブディレクトリの下にあるすべてのファイルが提供されます。

ブラウザを使用して、 http://localhost:5000にあるアプリを開きます。

FriendlyChat アプリの UI が表示されますが、これは (まだ) 機能していません。

アプリは今のところ何もできませんが、あなたの助けがあればすぐにできるようになります。ここまでは UI をレイアウトしただけです。

では、リアルタイムチャットを構築してみましょう。

7. Firebaseをインポートして構成する

Firebaseを構成する

どの Firebase プロジェクトを使用しているかを Firebase SDK に伝えるように構成する必要があります。

Firebase コンソールでプロジェクト設定に移動します。
「あなたのアプリ」カードで、構成オブジェクトが必要なアプリのニックネームを選択します。
Firebase SDK スニペットペインから「Config」を選択します。

環境ファイル/angularfire-start/src/environments/environment.tsが生成されたことがわかります。

構成オブジェクトのスニペットをコピーし、それをangularfire-start/src/firebase-config.jsに追加します。

環境.ts

export const environment = {
  firebase: {
    apiKey: "API_KEY",
    authDomain: "PROJECT_ID.firebaseapp.com",
    databaseURL: "https://PROJECT_ID.firebaseio.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.appspot.com",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
    measurementId: "G-MEASUREMENT_ID",
  },
};

AngularFireをインポートする

コンソールで選択した機能が/angularfire-start/src/app/app.module.tsファイルに自動的にルーティングされたことがわかります。これにより、アプリで Firebase の機能を使用できるようになります。ただし、ローカル環境で開発するには、それらを接続してエミュレータスイートを使用する必要があります。

/angularfire-start/src/app/app.module.tsでimportsセクションを見つけ、提供されている関数を変更して非運用環境のエミュレータスイートに接続します。

// ...

import { provideAuth,getAuth, connectAuthEmulator } from '@angular/fire/auth';
import { provideFirestore,getFirestore, connectFirestoreEmulator } from '@angular/fire/firestore';
import { provideFunctions,getFunctions, connectFunctionsEmulator } from '@angular/fire/functions';
import { provideMessaging,getMessaging } from '@angular/fire/messaging';
import { provideStorage,getStorage, connectStorageEmulator } from '@angular/fire/storage';

// ...

provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => {
    const auth = getAuth();
    if (location.hostname === 'localhost') {
        connectAuthEmulator(auth, 'http://127.0.0.1:9099', { disableWarnings: true });
    }
    return auth;
}),
provideFirestore(() => {
    const firestore = getFirestore();
    if (location.hostname === 'localhost') {
        connectFirestoreEmulator(firestore, '127.0.0.1', 8080);
    }
    return firestore;
}),
provideFunctions(() => {
    const functions = getFunctions();
    if (location.hostname === 'localhost') {
        connectFunctionsEmulator(functions, '127.0.0.1', 5001);
    }
    return functions;
}),
provideStorage(() => {
    const storage = getStorage();
    if (location.hostname === 'localhost') {
        connectStorageEmulator(storage, '127.0.0.1', 5001);
    }
    return storage;
}),
provideMessaging(() => {
    return getMessaging();
}),

// ...

app.module.ts

このコードラボでは、Firebase Authentication、Cloud Firestore、Cloud Storage、Cloud Messaging、Performance Monitoring を使用するので、それらのライブラリをすべてインポートします。今後のアプリでは、アプリの読み込み時間を短縮するために、必要な Firebase の部分のみをインポートするようにしてください。

8. ユーザーサインインを設定する

AngularFire はapp.module.tsにインポートされて初期化されているため、使用できるようになります。次に、 Firebase Authenticationを使用してユーザーサインインを実装します。

アプリで、ユーザーが[Google でサインイン]ボタンをクリックすると、 login機能がトリガーされます。 (すでに設定されています。) このコードラボでは、Firebase が ID プロバイダーとして Google を使用することを承認したいと考えています。ポップアップを使用しますが、他にもいくつかの方法が Firebase から利用できます。

angularfire-startディレクトリのサブディレクトリ/src/app/services/で、 chat.service.tsを開きます。
関数login見つけます。
関数全体を次のコードに置き換えます。

チャット.サービス.ts

// Signs-in Friendly Chat.
login() {
    signInWithPopup(this.auth, this.provider).then((result) => {
        const credential = GoogleAuthProvider.credentialFromResult(result);
        this.router.navigate(['/', 'chat']);
        return credential;
    })
}

logout機能は、ユーザーが「ログアウト」ボタンをクリックするとトリガーされます。

ファイルsrc/app/services/chat.service.tsに戻ります。
logout関数を見つけます。
関数全体を次のコードに置き換えます。

チャット.サービス.ts

// Logout of Friendly Chat.
logout() {
    signOut(this.auth).then(() => {
        this.router.navigate(['/', 'login'])
        console.log('signed out');
    }).catch((error) => {
        console.log('sign out error: ' + error);
    })
}

認証状態を追跡する

それに応じて UI を更新するには、ユーザーがログインしているかログアウトしているかを確認する方法が必要です。 Firebase Authentication を使用すると、認証状態が変化するたびにトリガーされるユーザー状態の観察可能データを取得できます。

ファイルsrc/app/services/chat.service.tsに戻ります。
変数割り当てuser$を見つけます。
割り当て全体を次のコードに置き換えます。

チャット.サービス.ts

// Observable user
user$ = user(this.auth);

上記のコードは、監視可能なユーザーを返す AngularFire 関数userを呼び出します。これは、認証状態が変化するたび (ユーザーがサインインまたはサインアウトするとき) にトリガーされます。この時点で、UI を更新してリダイレクトしたり、ヘッダーナビゲーションにユーザーを表示したりすることになります。これらの UI パーツはすべて実装済みです。

アプリへのログインをテストする

アプリがまだ提供されている場合は、ブラウザーでアプリを更新します。それ以外の場合は、コマンドラインでfirebase emulators:startを実行してhttp://localhost:5000からアプリの提供を開始し、ブラウザで開きます。
サインインボタンと Google アカウントを使用してアプリにログインします。 auth/operation-not-allowedを示すエラーメッセージが表示された場合は、Firebase コンソールで認証プロバイダとして Google サインインが有効になっていることを確認してください。
ログイン後、プロフィール写真とユーザー名が表示されます。

9. Cloud Firestore にメッセージを書き込む

このセクションでは、アプリの UI にデータを入力できるように、Cloud Firestore にデータを書き込みます。これはFirebase コンソールを使用して手動で実行できますが、基本的な Cloud Firestore の書き込みを示すためにアプリ自体で実行します。

データ・モデル

Cloud Firestore データは、コレクション、ドキュメント、フィールド、サブコレクションに分割されます。チャットの各メッセージを、 messagesという最上位のコレクションにドキュメントとして保存します。

Cloud Firestore にメッセージを追加する

ユーザーが書いたチャットメッセージを保存するには、 Cloud Firestoreを使用します。

このセクションでは、ユーザーがデータベースに新しいメッセージを書き込むための機能を追加します。ユーザーが[SEND]ボタンをクリックすると、以下のコードスニペットがトリガーされます。これにより、メッセージフィールドの内容を含むメッセージオブジェクトがmessagesコレクション内の Cloud Firestore インスタンスに追加されます。 add()メソッドは、自動的に生成された ID を持つ新しいドキュメントをコレクションに追加します。

ファイルsrc/app/services/chat.service.tsに戻ります。
関数addMessage見つけます。
関数全体を次のコードに置き換えます。

チャット.サービス.ts

// Adds a text or image message to Cloud Firestore.
addMessage = async(textMessage: string | null, imageUrl: string | null): Promise<void | DocumentReference<DocumentData>> => {
    let data: any;
    try {
      this.user$.subscribe(async (user) => 
      { 
        if(textMessage && textMessage.length > 0) {
          data =  await addDoc(collection(this.firestore, 'messages'), {
            name: user?.displayName,
            text: textMessage,
            profilePicUrl: user?.photoURL,
            timestamp: serverTimestamp(),
            uid: user?.uid
          })}
          else if (imageUrl && imageUrl.length > 0) {
            data =  await addDoc(collection(this.firestore, 'messages'), {
              name: user?.displayName,
              imageUrl: imageUrl,
              profilePicUrl: user?.photoURL,
              timestamp: serverTimestamp(),
              uid: user?.uid
            });
          }
          return data;
        }
      );
    }
    catch(error) {
      console.error('Error writing new message to Firebase Database', error);
      return;
    }
}

メッセージ送信のテスト

アプリがまだ提供されている場合は、ブラウザーでアプリを更新します。それ以外の場合は、コマンドラインでfirebase emulators:startを実行してhttp://localhost:5000からアプリの提供を開始し、ブラウザで開きます。
ログイン後、「こんにちは！」などのメッセージを入力し、 「送信」をクリックします。これにより、メッセージが Cloud Firestore に書き込まれます。ただし、データの取得を実装する必要があるため (コードラボの次のセクション) 、実際の Web アプリではデータはまだ表示されません。
新しく追加されたメッセージは Firebase コンソールで確認できます。エミュレータスイート UI を開きます。 [Build]セクションで[Firestore Database]をクリックします (またはここをクリックすると、新しく追加したメッセージを含むメッセージコレクションが表示されます。

10. メッセージを読む

メッセージを同期する

アプリでメッセージを読み取るには、データが変更されたときにトリガーされるオブザーバブルを追加し、新しいメッセージを表示する UI 要素を作成する必要があります。

アプリから新しく追加されたメッセージをリッスンするコードを追加します。このコードでは、 messagesコレクションのスナップショットを取得します。読み込み時に非常に長い履歴が表示されるのを避けるために、チャットの最後の 12 メッセージのみが表示されます。

ファイルsrc/app/services/chat.service.tsに戻ります。
関数loadMessages見つけます。
関数全体を次のコードに置き換えます。

チャット.サービス.ts

// Loads chat message history and listens for upcoming ones.
loadMessages = () => {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(this.firestore, 'messages'), orderBy('timestamp', 'desc'), limit(12));
  // Start listening to the query.
  return collectionData(recentMessagesQuery);
}

データベース内のメッセージをリッスンするには、 collection関数を使用してコレクションに対するクエリを作成し、リッスンするデータがどのコレクションに含まれているかを指定します。上記のコードでは、 messages内の変更をリッスンしています。コレクション。チャットメッセージが保存される場所です。また、 limit(12)を使用して最後の 12 メッセージのみをリッスンし、 orderBy('timestamp', 'desc')使用してメッセージを日付順に並べ替えて、最新の 12 メッセージを取得することで、制限を適用しています。

collectionData関数は内部でスナップショットを使用します。コールバック関数は、クエリに一致するドキュメントに変更があったときにトリガーされます。これは、メッセージが削除、変更、または追加された場合に発生する可能性があります。これについて詳しくは、 Cloud Firestore のドキュメントをご覧ください。

メッセージの同期をテストする

アプリがまだ提供されている場合は、ブラウザーでアプリを更新します。それ以外の場合は、コマンドラインでfirebase emulators:startを実行してhttp://localhost:5000からアプリの提供を開始し、ブラウザで開きます。
データベース内に以前に作成したメッセージが FriendlyChat UI に表示されるはずです (以下を参照)。気軽に新しいメッセージを書いてください。それらは即座に表示されるはずです。
(オプション)エミュレータスイートのFirestoreセクションで直接、手動でメッセージを削除、変更、または新しいメッセージを追加してみることができます。変更は UI に反映される必要があります。

おめでとう！アプリで Cloud Firestore ドキュメントを読んでいます。

11. 画像を送信する

次に、画像を共有する機能を追加します。

Cloud Firestore は構造化データの保存に適していますが、Cloud Storage はファイルの保存に適しています。 Cloud Storage for Firebase はファイル/BLOB ストレージサービスであり、ユーザーがアプリを使用して共有する画像を保存するために使用します。

画像をクラウドストレージに保存する

このコードラボでは、ファイルピッカーダイアログをトリガーするボタンがすでに追加されています。ファイルを選択すると、 saveImageMessage関数が呼び出され、選択したファイルへの参照を取得できます。 saveImageMessage関数は次のことを実行します。

チャットフィードに「プレースホルダー」チャットメッセージを作成し、画像のアップロード中にユーザーに「読み込み中」アニメーションが表示されるようにします。
画像ファイルを Cloud Storage のパス/<uid>/<file_name>にアップロードします。
画像ファイルの一般に読み取り可能な URL を生成します。
一時的な読み込み画像の代わりに、新しくアップロードされた画像ファイルの URL を使用してチャットメッセージを更新します。

次に、画像を送信する機能を追加します。

ファイルsrc/index.jsに戻ります。
関数saveImageMessageを見つけます。
関数全体を次のコードに置き換えます。

インデックス.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
  try {
    // 1 - You add a message with a loading icon that will get updated with the shared image.
    const messageRef = await this.addMessage(null, this.LOADING_IMAGE_URL);

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${this.auth.currentUser?.uid}/${file.name}`;
    const newImageRef = ref(this.storage, filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);
    
    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    messageRef ?
    await updateDoc(messageRef,{
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    }): null;
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

画像の送信テスト

アプリがまだ提供されている場合は、ブラウザーでアプリを更新します。それ以外の場合は、コマンドラインでfirebase emulators:startを実行してhttp://localhost:5000からアプリの提供を開始し、ブラウザで開きます。
ログイン後、左下の画像アップロードボタンをクリックしてくださいファイルピッカーを使用して画像ファイルを選択します。画像をお探しの場合は、この素敵なコーヒーカップの画像をご自由にお使いください。
選択した画像を含む新しいメッセージがアプリの UI に表示されます。

サインインしていないときに画像を追加しようとすると、画像を追加するにはサインインする必要があることを示すエラーが表示されます。

12. 通知を表示する

次に、ブラウザ通知のサポートを追加します。新しいメッセージがチャットに投稿されると、アプリはユーザーに通知します。 Firebase Cloud Messaging (FCM) は、メッセージと通知を無料で確実に配信できるクロスプラットフォームのメッセージングソリューションです。

FCM サービスワーカーを追加する

Web アプリには、Web 通知を受信して表示するService Worker が必要です。

メッセージングプロバイダーは、AngularFire が/angularfire-start/src/app/app.module.tsされたときにすでにセットアップされているはずです。/angularfire-start/src/app/app.module.ts の imports セクションに次のコードが存在することを確認してください。

provideMessaging(() => {
    return getMessaging();
}),

アプリ/app.module.ts

Service Worker は、通知の表示を処理する Firebase Cloud Messaging SDK をロードして初期化するだけで済みます。

FCM デバイストークンを取得する

デバイスまたはブラウザで通知が有効になっている場合、デバイストークンが与えられます。このデバイストークンは、特定のデバイスまたは特定のブラウザに通知を送信するために使用します。

ユーザーがサインインするときに、 saveMessagingDeviceToken関数を呼び出します。ここで、ブラウザからFCM デバイストークンを取得し、Cloud Firestore に保存します。

チャット.サービス.ts

関数saveMessagingDeviceTokenを見つけます。
関数全体を次のコードに置き換えます。

チャット.サービス.ts

// Saves the messaging device token to Cloud Firestore.
saveMessagingDeviceToken= async () => {
    try {
      const currentToken = await getToken(this.messaging);
      if (currentToken) {
        console.log('Got FCM device token:', currentToken);
        // Saving the Device Token to Cloud Firestore.
        const tokenRef = doc(this.firestore, 'fcmTokens', currentToken);
        await setDoc(tokenRef, { uid: this.auth.currentUser?.uid });
 
        // This will fire when a message is received while the app is in the foreground.
        // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
        onMessage(this.messaging, (message) => {
          console.log(
            'New foreground notification from Firebase Messaging!',
            message.notification
          );
        });
      } else {
        // Need to request permissions to show notifications.
        this.requestNotificationsPermissions();
      }
    } catch(error) {
      console.error('Unable to get messaging token.', error);
    };
}

ただし、このコードは最初は機能しません。アプリがデバイストークンを取得できるようにするには、ユーザーはアプリに通知を表示する権限を付与する必要があります (コードラボの次のステップ)。

通知を表示する権限をリクエストする

ユーザーがアプリに通知を表示する権限をまだ付与していない場合、デバイストークンは与えられません。この場合、 requestPermission()メソッドを呼び出すと、この許可を求めるブラウザダイアログが表示されます (サポートされているブラウザの場合)。

ファイルsrc/app/services/chat.service.tsに戻ります。
requestNotificationsPermissions関数を見つけます。
関数全体を次のコードに置き換えます。

チャット.サービス.ts

// Requests permissions to show notifications.
requestNotificationsPermissions = async () => {
    console.log('Requesting notifications permission...');
    const permission = await Notification.requestPermission();
    
    if (permission === 'granted') {
      console.log('Notification permission granted.');
      // Notification permission granted.
      await this.saveMessagingDeviceToken();
    } else {
      console.log('Unable to get permission to notify.');
    }
}

デバイストークンを取得する

アプリがまだ提供されている場合は、ブラウザーでアプリを更新します。それ以外の場合は、コマンドラインでfirebase emulators:startを実行してhttp://localhost:5000からアプリの提供を開始し、ブラウザで開きます。
ログイン後、通知許可ダイアログが表示されます。
「許可」をクリックします。
ブラウザの JavaScript コンソールを開きます。次のメッセージが表示されます: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
デバイストークンをコピーします。コードラボの次の段階で必要になります。

デバイスに通知を送信する

デバイストークンを取得したので、通知を送信できます。

Firebase コンソールの [クラウドメッセージング] タブを開きます。
「新規通知」をクリックします
通知のタイトルと通知テキストを入力します。
画面右側の「テストメッセージを送信」をクリックします。
ブラウザの JavaScript コンソールからコピーしたデバイストークンを入力し、プラス (「+」) 記号をクリックします。
「テスト」をクリックします

アプリがフォアグラウンドにある場合は、JavaScript コンソールに通知が表示されます。

アプリがバックグラウンドにある場合は、次の例のようにブラウザに通知が表示されます。

13. Cloud Firestore セキュリティルール

データベースのセキュリティルールを表示する

Cloud Firestore は、特定のルール言語を使用して、アクセス権、セキュリティ、データ検証を定義します。

このコードラボの開始時に Firebase プロジェクトを設定するときに、データストアへのアクセスを制限しないように、「テストモード」のデフォルトのセキュリティルールを使用することを選択しました。 Firebase コンソールの [データベース]セクションの[ルール]タブで、これらのルールを表示および変更できます。

現時点では、データストアへのアクセスを制限しないデフォルトのルールが表示されているはずです。これは、どのユーザーもデータストア内のコレクションに対して読み取りと書き込みができることを意味します。

rules_version = '2';

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

次のルールを使用してルールを更新し、内容を制限します。

firestore.rules

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

セキュリティルールはエミュレータスイートに自動的に更新されます。

Cloud Storage のセキュリティルールを表示する

Cloud Storage for Firebase は、特定のルール言語を使用してアクセス権、セキュリティ、データ検証を定義します。

このコードラボの開始時に Firebase プロジェクトを設定するときに、認証されたユーザーのみに Cloud Storage の使用を許可するデフォルトの Cloud Storage セキュリティルールを使用することを選択しました。 Firebase コンソールの[ストレージ]セクションの[ルール]タブで、ルールを表示および変更できます。サインインしているユーザーにストレージバケット内のファイルの読み取りと書き込みを許可するデフォルトのルールが表示されます。

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

次のことを行うためにルールを更新します。

各ユーザーが自分の特定のフォルダーにのみ書き込みできるようにする
誰でも Cloud Storage から読み取りできるようにする
アップロードされるファイルが画像であることを確認してください
アップロードできる画像のサイズを最大 5 MB に制限する

これは、次のルールを使用して実装できます。

ストレージ.ルール

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

14. Firebase Hosting を使用してアプリをデプロイする

Firebase は、アセットや Web アプリを提供するためのホスティングサービスを提供します。 Firebase CLI を使用してファイルを Firebase Hosting にデプロイできます。デプロイする前に、どのローカルファイルをデプロイする必要があるかをfirebase.jsonファイルで指定する必要があります。このコードラボでは、このコードラボ中にファイルを提供するためにこの手順が必要だったので、これはすでに実行されています。ホスティング設定は、 hosting属性で指定します。

ファイアベース.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // If you went through the "Storage Security Rules" step.
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

これらの設定は、すべてのファイルを./publicディレクトリにデプロイすることを CLI に指示します ( "public": "./public" )。

コマンドラインがアプリのローカルのangularfire-startディレクトリにアクセスしていることを確認してください。
次のコマンドを実行して、ファイルを Firebase プロジェクトにデプロイします。

ng deploy

次に、Firebase オプションを選択し、コマンドラインのプロンプトに従います。

コンソールには以下が表示されるはずです。

=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

独自の Firebase サブドメインの 2 つで Firebase Hosting を使用して、グローバル CDN で完全にホストされているウェブアプリにアクセスします。

https://<firebase-projectId>.firebaseapp.com
https://<firebase-projectId>.web.app

あるいは、コマンドラインでfirebase open hosting:siteを実行することもできます。

Firebase Hosting の仕組みの詳細については、ドキュメントを参照してください。

プロジェクトの Firebase コンソールの [ホスティング]セクションに移動すると、デプロイの履歴、アプリの前のバージョンにロールバックする機能、カスタムドメインを設定するワークフローなど、役立つホスティング情報とツールが表示されます。

15. おめでとうございます!

Firebase を使用してリアルタイムチャット Web アプリケーションを構築しました。

カバーした内容

Firebase認証
クラウドファイアストア
クラウドストレージ用 Firebase SDK
Firebase クラウドメッセージング
Firebaseのパフォーマンスモニタリング
Firebase ホスティング

次のステップ

もっと詳しく知る

firebase.google.com

16. (オプション) App Check による強制

Firebase App Check は、サービスを不要なトラフィックから保護し、バックエンドを悪用から保護するのに役立ちます。このステップでは、認証情報の検証を追加し、App Check とreCAPTCHA Enterpriseを使用して未承認のクライアントをブロックします。

まず、App Check と reCaptcha を有効にする必要があります。

reCaptcha Enterprise の有効化

Cloud コンソールで、「セキュリティ」の下にある「reCaptcha Enterprise」を見つけて選択します。
プロンプトに従ってサービスを有効にし、 「キーの作成」をクリックします。
プロンプトに従って表示名を入力し、プラットフォームの種類として[Web サイト]を選択します。
デプロイした URL をドメインリストに追加し、[チェックボックスチャレンジを使用する] オプションが選択されていないことを確認します。
[キーの作成]をクリックし、生成されたキーを安全な場所に保存します。このステップの後半で必要になります。

アプリチェックを有効にする

Firebase コンソールの左側のパネルで[ビルド]セクションを見つけます。
[App Check]をクリックし、 [サインイン方法]タブをクリックして[App Check]に移動します。
[登録]をクリックし、プロンプトが表示されたら reCaptcha Enterprise キーを入力し、 [保存]をクリックします。
API ビューで、 「ストレージ」を選択し、 「強制」をクリックします。 Cloud Firestoreに対しても同じことを行います。

アプリチェックが強制されるようになりました。アプリを更新して、チャットメッセージを表示または送信してみます。次のエラーメッセージが表示されるはずです。

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

これは、App Check がデフォルトで未検証のリクエストをブロックしていることを意味します。次に、アプリに検証を追加しましょう。

environment.tsファイルに移動し、 reCAPTCHAEnterpriseKeyをenvironmentオブジェクトに追加します。

export const environment = {
  firebase: {
    apiKey: 'API_KEY',
    authDomain: 'PROJECT_ID.firebaseapp.com',
    databaseURL: 'https://PROJECT_ID.firebaseio.com',
    projectId: 'PROJECT_ID',
    storageBucket: 'PROJECT_ID.appspot.com',
    messagingSenderId: 'SENDER_ID',
    appId: 'APP_ID',
    measurementId: 'G-MEASUREMENT_ID',
  },
  reCAPTCHAEnterpriseKey: {
    key: "Replace with your recaptcha enterprise site key"
  },
};

keyの値を reCaptcha Enterprise トークンに置き換えます。

次に、 app.module.tsファイルに移動し、次のインポートを追加します。

import { getApp } from '@angular/fire/app';
import {
  ReCaptchaEnterpriseProvider,
  initializeAppCheck,
  provideAppCheck,
} from '@angular/fire/app-check';

同じapp.module.tsファイルに、次のグローバル変数宣言を追加します。

declare global {
  var FIREBASE_APPCHECK_DEBUG_TOKEN: boolean;
}

@NgModule({ ...

インポートで、 ReCaptchaEnterpriseProviderを使用した App Check の初期化を追加し、 isTokenAutoRefreshEnabledをtrueに設定してトークンの自動更新を許可します。

imports: [
BrowserModule,
AppRoutingModule,
CommonModule,
FormsModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAppCheck(() => {
const appCheck = initializeAppCheck(getApp(), {
  provider: new ReCaptchaEnterpriseProvider(
  environment.reCAPTCHAEnterpriseKey.key
  ),
  isTokenAutoRefreshEnabled: true,
  });
  if (location.hostname === 'localhost') {
    self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
  }
  return appCheck;
}),

ローカルテストを許可するには、 self.FIREBASE_APPCHECK_DEBUG_TOKENをtrueに設定します。 localhostでアプリを更新すると、次のようなデバッグトークンがコンソールに記録されます。

App Check debug token: CEFC0C76-7891-494B-B764-349BDFD00D00. You will need to add it to your app's App Check settings in the Firebase console for it to work.

次に、Firebase コンソールの App Check のアプリビューに移動します。

オーバーフローメニューをクリックし、 [デバッグトークンの管理]を選択します。

次に、 [デバッグトークンの追加]をクリックし、プロンプトに従ってコンソールからデバッグトークンを貼り付けます。

chat.service.tsファイルに移動し、次のインポートを追加します。

import { AppCheck } from '@angular/fire/app-check';

同じ chat.service.ts](angularfire-start/src/app/services/chat.service.ts) ファイルで、他の Firebase サービスと一緒に App Check を挿入します。

export class ChatService {
appCheck: AppCheck = inject(AppCheck);
...

おめでとう！これで、アプリ内で App Check が機能するはずです。

AngularFire Web コードラボ

1。概要

学べること

必要なもの

2. サンプルコードを入手する

スターターアプリをインポートする

3. Firebase プロジェクトを作成して設定する

Firebaseプロジェクトを作成する

Firebase Web アプリをプロジェクトに追加する

Firebase Authentication で Google サインインを有効にする

Cloud Firestoreを有効にする

クラウドストレージを有効にする

4. Firebase コマンドライン インターフェイスをインストールする

5.AngularFireをインストールする

6. スターター アプリをローカルで実行する

7. Firebaseをインポートして構成する

Firebaseを構成する

AngularFireをインポートする

8. ユーザーサインインを設定する

Google サインインでユーザーを認証する

認証状態を追跡する

アプリへのログインをテストする

9. Cloud Firestore にメッセージを書き込む

データ・モデル

Cloud Firestore にメッセージを追加する

メッセージ送信のテスト

10. メッセージを読む

メッセージを同期する

メッセージの同期をテストする

11. 画像を送信する

画像をクラウドストレージに保存する

画像の送信テスト

12. 通知を表示する

FCM サービス ワーカーを追加する

FCM デバイス トークンを取得する

通知を表示する権限をリクエストする

デバイストークンを取得する

デバイスに通知を送信する

13. Cloud Firestore セキュリティ ルール

データベースのセキュリティ ルールを表示する

Cloud Storage のセキュリティ ルールを表示する

14. Firebase Hosting を使用してアプリをデプロイする

15. おめでとうございます!

カバーした内容

次のステップ

もっと詳しく知る

16. (オプション) App Check による強制

4. Firebase コマンドラインインターフェイスをインストールする

6. スターターアプリをローカルで実行する

FCM サービスワーカーを追加する

FCM デバイストークンを取得する

13. Cloud Firestore セキュリティルール

データベースのセキュリティルールを表示する

Cloud Storage のセキュリティルールを表示する