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

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

Firebaseのセットアップ
Angularプロジェクトのセットアップ
バージョン情報
参考サイト

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'
  }
};