FirebaseのGoogle認証を実装した方法

作れたけどぶっちゃけ一向に理解ができていない。

環境

  • Windows10 PowerShell

「npm」を使うのでNode.jsをインストールしておく。

Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

具体的にはこう。

Node.js / npmをインストールする(for Windows) - Qiita
1.インストーラーのダウンロード 下記サイトからインストーラーをダウンロードします。 Download > Windows Installer をクリックするとカレントバージョンの自身のP...

Firebaseもインストール。

npm install firebase
Firebase を JavaScript プロジェクトに追加する  |  Firebase Documentation

インストールできてるか、バージョン情報を叩いて確認。

node --version
npm --version
firebase --version

セキュリティに引っかかって一部のコマンドを受け付けない場合があるので、実行ポリシーをいじっておく。そうなってからでもいいけど。

Set-ExecutionPolicy RemoteSigned -Scope Process

選択肢が出たら「Y」。この設定はPowerShellを終了するとリセットされるくさい。

Firebaseの準備

「Firebase Authentication」とかで検索すれば設定方法はいくらでも出てくるのでそれを参考に。

超簡単!1時間でできるFireBaseを使ったログイン機能の実装!(準備編) | ビジネスとIT活用に役立つ情報
FireBaseのドロップイン認証の実装を全2回に分けて解説していきます。 今回は準備編として、FireBaseのコンソール上での準備を行っていきます。 FireBaseは2011年にFireBase社が開発したモバイル...

Authenticationのログインプロバイダに「Google」を追加しておくこと。

コンソールからもプロジェクトの作成とかはできるけど、わからないうちは管理画面からやるのが楽。

参考記事

この記事がベースだけど色々アレだった。

Firebase JavaScript SDK v9 + Authentication で認証を実装する - Qiita
Firebase JavaScript SDK が、v9で大きく変わりました。 バージョンアップに伴い、Authenticationの実装の仕方もかなり変わったため、メモを残しておきます。 Firebase JavaScript S...

やっていく

作業ディレクトリにwebpackとwebpack-cliをインストール。

npm i -D webpack webpack-cli

参考記事に沿って以下のディレクトリやらファイルを作成。

  • dist/index.html
  • src/index.js
  • firebase.json
  • webpack.config.js

package.jsonはインストール時に生成されてるので、参考記事と中身を見比べて不足部分を追記。

記事通りにこれで実行するとエラーを吐いた。記事通りにいかない。

追加で以下の内容でインストールするとエラーが出ずに正常にbundle.jsが書き出された。

npm i -D --legacy-peer-deps terser-webpack-plugin optimize-css-assets-webpack-plugin

実行コマンドはこれ。

npm run build

「dist/index.html」をブラウザで開いて「サインイン」が表示されていれば成功。

認証はローカル環境だと動かないのでWEBサーバーにアップする。distディレクトリの中身をまるまる移す(index.htmlとbundle.js)。「サインイン」をクリックするとGoogle認証のポップアップが出る。

サインインするとfirebaseの「Authentication」にユーザーが追加される。

振り返り

調べたところFirebaseの紹介記事はないことはないんだけど現行バージョンに対応するものが殆どなかった。大型アップデートだったんでしょうね。でもって、開発環境は様々だから色んなアプローチがあるわけで、しかもみんな基礎になる部分をすっ飛ばして要点を書いてあるからズブの素人には全く参考にできない。

方法を公開している方々と同様の環境じゃないからコケた部分があると思う。OSのこと、PC自体にインストールしているもの、とか。単純に記載漏れもあるかもしれない。ともあれ、なんとかなってよかった。

「–legacy-peer-deps」について

最後の方に追加でインストールした内容。

webpackのバージョンが噛み合わないようで、通常の方法だとwebpack-pluginがインストールできない。そういった場合に突破するのが「–legacy-peer-deps」。動くかどうかは別問題なので、インストールできたからと行っても安心できない点がある。

問題というか課題

Firebaseを扱うことがテーマだったので一旦これで成功だけど、これ単体ができたところで何も話にならないわけで。特にログインなんてWEBサイトを構築する中の1つのコンテンツでしかないので、組み合わせとか応用の方法を理解していかなきゃいけない。

おまけ:webpack-dev-serverを使う

localhostの鯖立てで動作確認しようぜって感じの。

現行バージョンは4.9.2

まずインストールする。

npm install webpack-dev-server --save-dev

インストールしたらバージョン確認兼インストール確認

npx webpack -v

//結果例
webpack: 5.73.0
webpack-cli: 4.10.0
webpack-dev-server 4.9.2

package.jsonにスクリプトを仕込む。

{
...
  "scripts": {
...
    "start": "webpack-dev-server"
  },
...
}

これで「npm start」が使えるようになる。

webpack.config.jsにも数行足す。

module.exports = {
...
  mode: 'development',
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist')
    }
  }
...
};

こっちはサーバーの設定。distに入ってるものを表示させたいのでディレクトリをそのように指定する。

この他にも色々設定できるので、興味があれば以下を参照。

DevServer | webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packagi...

コマンド入力からサーバーを稼働させる

npm start

色々出力される中にURLが入ってるのでそれにアクセスする。

例:http://localhost:8080/

エラーがなく表示されてたら成功。

ビルドしなくてもちゃんと動いてくれるので、手を入れる際に便利ですね。

終了するときはコンソール上で「Ctrl + C」から「Y」。

コメント

タイトルとURLをコピーしました