Ionic3+Firebaseでメールアドレス認証を写経してみる（１）BitBucketに非公開登録し、Netlifyで公開とfirebaseの設定

2018年6月15日

以下のサイトが、（英語ではあるが、）非常に丁寧に分かりやすく、AngularFire2を用いて、Ionic3+FIrebaseによるメールアドレス認証を行う方法を説明してくださっている。このサイトを写経していきたい。

ソースコードもメールアドレスを登録することにより、ダウンロードすることができます。

https://javebratt.com/angularfire2-authentication-ionic/

＜目次＞

１．Bitbucketに非公開登録し、Netlifyで公開とfirebaseの設定　（←このページ）
２．認証システム実装とログインページの作成
３．ResetPasswordページとSignupページの作成

（開発環境）
Windows 8.1 Pro
VisualStudioCode
git version 2.16.1.windows.4
Sourcetree Version 2.4.8.0
Android Studio 3.0.1

firebase-tools
firebase@4.8.0
angularfire2@5.0.0-rc.4
promise-polyfill@8.0.0

npm install --save firebase@4.8.0
npm install --save angularfire2@5.0.0-rc.4
npm install --save promise-polyfill

（１）アプリの作成

VisualStudioCodeで、C:/ionic3/ フォルダを開いて、Ctrl+@

ionicをインストールしていない場合は、以下を入力。

npm install -g ionic cordova

Ionicアプリの作成

ionic start af2EmailAuth blank

何か聞かれたら、最初は　y 、次はn を入力して、Enter.

作成したアプリのサーバを起動して確認。

cd af2EmailAuth

ionic serve

VisualStudioCodeのターミナル画面で、”Ctrl+C” => “y” => “Enter” で一旦サーバを停止。

（２）BitBucketに登録

SourceTreeを起動。

New tab の、「Add」をクリック。

Add a repository 画面になるので、「参照」から、 C:/ionic3/af2EmailAuth を選択して、「追加」をクリック。

以下のような画面になる。

BitBucketのサイトを開き、BitBucketに登録していなければ、新しくBitBucketのアカウントを作成する。

https://bitbucket.org/account/signin/

ログインすると、以下のような画面になるので、画面一番左側の上の方の、「＋」をクリックして、(CREATE) Repository　をクリック。

リポジトリ名のところに、af2EmailAuth　と入力。

「これは非公開リポジトリです」のチェックボックスが”ON”になっていることを確認してから、「リポジトリの作成」をクリック。

以下の部分の git@….. の部分をメモ帳などにコピーしておく。

SourceTreeに戻り、画面右上の、「設定」をクリック。

リポジトリ設定　画面が出てくるので、「追加」をクリックして、

URL/パス　のところに、先ほどBitBucketのサイトでコピーした git@……. をペーストする。その他は以下のように設定して、OK　をクリック。その次も、OK　をクリック。

以下のような手順でgit pushする。

Pageantが起動するので、以下の手順で、Add keyから、あらかじめ作って保存しておいたSSHキーのファイルを追加する。

SSHキーを、 Bitbucketに登録していなかったので、登録する。

画面一番左下のヒト　マークをクリック　＞　BitBucket設定　をクリック。

SSH鍵　をクリック。

鍵を追加　をクリックして、SSHキーをコピーする。

SSHキーが作成済みの場合は、SourceTreeの、ツール　＞　SSHキーの作成/インポート　をクリックして起動される、PuTTY Key Generator　の、Load　をクリックして、表示する。

この、ssh-rsa で始まるテキストを選択してコピーし、BitBucketのSSHキーのところにペーストして、保存。

もう一度、SourceTreeで、プッシュ。

BitBucketのサイトで、リポジトリ　＞ af2EmailAuth　に行くと、ローカルのファイルがアップロードされたことがわかる。

（３）Netlifyで公開

Netlifyという静的サイト公開ツールがあり、あらかじめ設定しておけば、GitHubやBitbucketにpushする（コードをアップロードする）だけで、Ionicサイトを公開することができます（無料プランの範囲でできます）。

とりあえず、WEBアプリとして、Netlifyというサービスを利用して、無料で公開します。

https://www.netlify.com/

上記リンクをクリックして、画面右上の、「Sign Up」をクリック

Welcome to Netlify の画面になるので、「Bitbucket」をクリック

BitbucketのOAuthページに行くので、「アクセスを許可する」をクリック

Netlifyのページに戻ってくる。画面右上の、「New Site from Git」をクリック

Create a new site の画面になるので、「Bitbucket」をクリック

Bitbucketに登録されているリポジトリのリストが表示されるので、公開したいBitbucket内のリポジトリ（今回は、af2emailauth）　をクリック

Build commandを、

npm build run --prod

Pualish directoryを、 www/  として、”Deploy site” をクリック。

数秒で以下のページに切り替わる。

しかし、Deploy faliedと出てしまった。がっくし。。。

ググッたが、Node.jsのVersionがうんたらかんたら、、、と。

挫折か、、、

同じことをGitHubの公開リポジトリから行ったら、うまくいった。

Bitbucketの非公開リポジトリとNetlifyは相性が悪いのかな・・・？

（非公開リポジトリでないと、firebaseの設定ファイルをアップロードできない。。。）

もしかして、、、

(変更前)

(変更後)

はい、deployの設定を、私が間違えていただけでした。正しくは、

npm run build –prod

でした。

数分で、無事、deployできました。

無事、Bitbucketの非公開リポジトリから、Netlifyにデプロイ（公開）することができた。これは便利！

https://keen-wozniak-5f1a83.netlify.com/

（４）必要なnpmパッケージのインストール

ローカルのVisualStudioCodeのターミナル画面で、以下を入力

npm install --save firebase@4.8.0
npm install --save angularfire2@5.0.0-rc.4
npm install --save promise-polyfill

ionic generate page Login
ionic generate page ResetPassword
ionic generate page Signup
ionic generate provider Auth

export const environment = {
  production: false,
  firebase: {
    apiKey: "<your-api-key>",
    authDomain: "<your-app-id>.firebaseapp.com",
    databaseURL: "https://<your-app-id>.firebaseio.com",
    projectId: "<your-app-id>",
    storageBucket: "<your-app-id>.appspot.com",
    messagingSenderId: "xxxxxxxxxxxxxxxxx"
  }
}

AngularFireModule.initializeApp(environment.firebase),
AngularFireAuthModule

次は、Step #2: Create the authentication listener.　以降を写経していきたい。

https://javebratt.com/angularfire2-authentication-ionic/