グローバルナビゲーションへ

本文へ

フッターへ

お役立ち情報Blog



超簡単!1時間でできるFireBaseを使ったログイン機能の実装!(実装編)


FireBaseのドロップイン認証の実装を全2回に分けて解説します。
今回は実装編として、htmlにスクリプトを埋め込みログイン機能を実装していきます。

FireBaseを使ってログイン機能を実装するフロー

  • Step1. Googleアカウントの作成
  • Step2. FireBaseのコンソールで準備をする
  • Step3. コンソールで発行されたスクリプトをhtmlに貼り付ける
  • Step4. Step4. FireBaseUIを初期化する
  • Step5. ログイン機能を実装する
  • Step6. 完成

今回はStep3から最後まで解説していきます。

Step3. コンソールで発行されたスクリプトをhtmlに貼り付ける

1. コンソールからプロジェクトの概要に進み、前回作ったアプリへを選択します。

2. スクリプトをコピーしてhtmlファイルのヘッダーに張り付けます。

スクリプト

Step4. FireBaseUIを初期化する

1. 以下のコードをヘッダーの一番上に張り付けます。

2. 以下のコードをfirebase-app.js の下に貼り付けます。

3. 以下のコードはヘッダーの一番下に貼り付けます。

Step5. ログイン機能を実装する

Bodyの中に以下のコードを記述します。
ここにログイン用のFireBaseのログインUIを表示させます。

Step6. 完成

これで完成です。
ログインできたかを調べるために、ログイン成功時にコンソールへログを表示するコードに書き換えます。

htmlをみてみるとこのようなUIが表示されます。

ログインしてみると。。。

ログイン成功と表示されます。

最後に全体のコードを貼っておきます。

さいごに

ログイン機能の実装は以上で終わりとなります。

今回はログインに成功した後ただログを出すだけでしたが、実際には別のURLに飛ばしたりできます。
メールアドレスとパスワードの認証以外にも、githubやgoogleといった他のプロバイダで簡単に認証することができます。
ログイン機能の実装と聞くと難しく思うかもしれませんが、既に用意されたUIを使用することで誰でも簡単に素早く作ることができます。

FireBase側で用意されたものを使う分、自由にデザインや仕様を変えたりすることは難しくなりますが、これらを上手に使うことで学習コストの削減や、 時間の短縮につながるかと思いますのでぜひ活用してみてください。

The following two tabs change content below.

Riku-S

事業開発部 web application engineer
通販事業部 開発チーム web application engineer
この記事のカテゴリ

FOLLOW US

最新の情報をお届けします