L08084のブログ

技術記事の執筆は祈りに似ている

AngularでFirebase認証(その1) Firebaseのセットアップ

Angularにメールアドレスとパスワードを使用するFirebase認証を実装していきます。

Firebaseのセットアップ

自分のGoogleアカウントでFirebaseの管理画面にログインして、プロジェクトを作成します。

https://firebase.google.com/?hl=ja

f:id:l08084:20190804162916p:plain
プロジェクトを作成

作成したプロジェクトを選択して、開発メニューの中から「Authentication」をクリックします。

Authentication メニューに移動した後、「ログイン方法を設定」ボタンをクリックしてログイン方法の中から「メール/パスワード」を選択してください。

f:id:l08084:20190804164352p:plain
メール/パスワードを選択

メール/パスワードを設定を有効にした後、保存ボタンを押下します。

Project Overviewに戻って「ウェブ」マークをクリックすると、Angularプロジェクト上で必要になる設定情報が表示されます。

f:id:l08084:20190804165001p:plain
「ウェブ」を選択する

f:id:l08084:20190804170353p:plain
スクリプトが表示される

表示されたFirebase構成オブジェクトをコピーした段階で一旦Firebaseの設定は完了です。

また、Firebase構成オブジェクトは下記の手順でいつでも参照することができます。

f:id:l08084:20190811174927p:plain

f:id:l08084:20190811175050p:plain

Firebase構成オブジェクトを取得したいアプリの設定(歯車アイコン)をクリックします。

設定画面の全般タブ、マイアプリの項目にFirebase構成オブジェクトが表示されています。

続いて、Angularプロジェクトの設定に移ります。

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

ターミナルでAngularプロジェクト直下に移動した後、$ npm i firebase @angular/fire コマンドを実行してAngularFireパッケージをインストールします。

$ npm i firebase @angular/fire

続いて、src/enviroments ディレクトリを開いて、FirebaseコンソールからコピーしたFirebase構成オブジェクトをペーストします。

  • src/enviroments/enviroments.ts
// Firebase構成オブジェクトを転記する
export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: 'XXXXXXXXXXXX',
    authDomain: 'XXXXXXXXXXXX',
    databaseURL: 'XXXXXXXXXXXX',
    projectId: 'XXXXXXXXXXXX',
    storageBucket: 'XXXXXXXXXXXX',
    messagingSenderId: 'XXXXXXXXXXXX',
    appId: 'XXXXXXXXXXXX'
  }
};

Firebase構成オブジェクトは認証に関する情報なので、プロジェクトを公開リポジトリにpushするときにはsrc/enviroments/enviroments.ts.gitignoreファイルに追記して公開されないようにすると良いです。

バージョン情報

  • Angular v7.2.0
  • firebase: v6.3.4

参考サイト

GitHub - angular/angularfire2: The official Angular library for Firebase.

次回の記事はこちら