1. HOME
  2. ブログ
  3. IT技術
  4. 【第2回】Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみた【Firebase設定と認証機能実装】

【第2回】Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみた【Firebase設定と認証機能実装】

第2回~モダンなフレームワークの使い方を学びながらブログシステムを構築~

本記事は、「Python Responder + Firestore で、モダンかつサーバーレスなブログシステムを作ってみる」第2回目です。

前回は、初期設定として「Responder のセットアップ」まで解説しました。

今回は、「Firestore のセットアップ」を中心に解説していきます。

こちらの記事もオススメ!

Firestore セットアップ

Firestore セットアップの手順

Firestore セットアップの大まかな流れは、以下の通りです。

  1. プロジェクトを作成する
  2. データベースを作成する
  3. サーバを初期化する
  4. 動作確認

公式ドキュメントも参照してみてください。

【Cloud Firestore を使ってみる】
https://firebase.google.com/docs/firestore/quickstart?hl=ja#python

プロジェクト作成

まずは、Firebase でプロジェクトを生成します。

「Firebase コンソール」から、「プロジェクトを作成」しましょう!

Firebaseプロジェクト作成

今回は、仮で「resp-fire-blog」としました。

プロジェクト名を入力

無事にプロジェクトが生成できれば、以下の様な管理画面になるはずです。

管理画面

データベース作成

そうしたら、「Cloud Firestore」にアクセスし「データベースの作成」をクリック。

データベースの作成

テストモードで開始」にしておきましょう。

これで、データベース作成完了です。

サーバの初期化

最初に、「Cloud Firestore」の初期化を部分実装します。

新しい秘密鍵の生成

「歯車マーク > プロジェクトを管理 > サービス アカウント」で、新しい秘密鍵の生成を行います。

秘密鍵の生成

json ファイルの保存を求められるので、新たに「/private」を作成し、保存します。

今回は、「keys.json」という名前にしました。

ファイルを作成

その後、以下のコードを書いたファイルを作成します。

ここでは、 init_db.py とします。

このファイルを実行しても何も表示されませんが、これでサーバ準備は完了です。

注意!

ここで使った json ファイルは、絶対に外部に漏らしてはいけません

Github にあげたりする場合は、これらのファイルは外してください。

本番サーバに上げる場合も、private ディレクトリは .htaccess でアクセスできないようにしておきましょう

動作確認

データを追加

それでは、実際に、データを追加してみましょう。

Firestore では、Python ファイルからもデータを追加できます。

以下のコードを参照してください。

これを実行してみると、以下のようにデータが追加できていることがわかります。

データの追加例

ここでは、コレクションは「モデル」、ドキュメントは「ID(主キー)」にあたります。

データの取り出し

データの取り出しは、以下のようにできます。

とても直感的な操作が可能ですね。

本連載では、これを使ってブログシステムを構築していきます。

管理者ページを作る

最初に「管理者」を作り、「管理者ページ」と「ログインページ」を作っていきます。

Firebase Authenticationを使う

今回は、Firebase が提供する認証システム「Firebase Authentication」を使用します。

まずは、管理画面の「Authentication > Sign-in method」より、メールを選んで有効にしてください。

メールでの認証を有効に

次に、ユーザを追加します。

GUI でユーザ追加はしない

「Authentication > Users」からユーザを追加できますが、今回この方法は行いません。

ディスプレイネーム(表示名)も設定したいからです。

GUI 操作では、ディスプレイネームは変更できないのです。

Firebase Auth RestAPI を使う

このような処理を Python から行いたい場合は、「Firebase Auth RestAPI」を使います。

これは、指定された URL へデータを POST することで、「データの作成」「更新」「認証」まで出来る API です。

【Firebase Auth RestAPI】
https://firebase.google.com/docs/reference/rest/auth/

Userを追加する

そうしたら、 auth.py を作り、サインアップ関数を作ります

複雑に見えますが、やっていることは「WebAPI に json を投げている」だけです。

apikey.txt を /private ディレクトリに用意

ここで、API Keyを記述した apikey.txt を「/private」ディレクトリに用意しておいてください。

「プロジェクトの設定」で確認できます。

実行

それでは、実行してみましょう。

そうすると、以下の様にユーザが追加できていることがわかります。

無事ユーザを追加できた

管理者ページとログイン画面を作る

認証機能を実装する前に、先に「管理者ページ」と「ログイン画面」を仮で作っておきます。

管理者ページ

「templates/admin.html」を作り、以下のように記述します。

ひとまず、管理者ページはこれだけです。

ログインページ

次にログインページですが、今回は以下の様にしました。

CSSも追記します。

ログイン画面

現時点では処理を書いていないので、まだ何も起きません。

認証する関数

そうしたら、実際の「ルーティングと認証機能を Python で実装」していきます。

ログイン機構

まずは、ログイン機構auth.py に書きましょう。

Firebase 側で、セッション Cookie を作成します。

WebAPI が異なるだけで、サインアップとあまり変わりません。

この取得した結果にエラーが含まれていると、認証失敗です。

ルーティング

次に、 controllers.py に「/login」と「/admin」をルーティングします。

「/admin」では、GET でのアクセスはすべて「/login」にアクセスするようにします。

この時、クラス自身にルーティングを施して、 on_get() と on_post() で処理を分けることができます。

動作確認

では、実際にログインしてみましょう。

成功すれば、以下の様な画面に遷移されるはずです。

ログイン成功:管理者ページへ

ログインに失敗すると…

例として、失敗した時も見ておきましょう。

ログイン失敗:エラーメッセージが出る

第3回へつづく!

今回は、「Firebase 周りのセットアップおよび動作確認」を行いました。

一応認証機能は作ることができましたが、まだまだ不便です。

例えば、一度ログインに成功していれば、直接管理者ページに行けるのが普通です。

しかし、今は全てリダイレクトされてしまいます。

次回は、「認証機能の整備とログアウト機構」もつけてみましょう!

(株)ライトコードは、WEB・アプリ・ゲーム開発に強い、「好きを仕事にするエンジニア集団」です。
Responder + Firestoreでの開発依頼・お見積もりはこちらまでお願いします。
また、ResponderやFirestoreを扱えるエンジニアを積極採用中です!詳しくはこちらをご覧ください。

※現在、多数のお問合せを頂いており、返信に、多少お時間を頂く場合がございます。

次回の記事はこちら

第1回はこちら

こちらの記事もオススメ!

ライトコードよりお知らせ

にゃんこ師匠にゃんこ師匠
システム開発のご相談やご依頼はこちら
ミツオカミツオカ
ライトコードの採用募集はこちら
にゃんこ師匠にゃんこ師匠
社長と一杯飲みながらお話してみたい方はこちら
ミツオカミツオカ
フリーランスエンジニア様の募集はこちら
にゃんこ師匠にゃんこ師匠
その他、お問い合わせはこちら
ミツオカミツオカ
   
お気軽にお問い合わせください!せっかくなので、別の記事もぜひ読んでいって下さいね!

一緒に働いてくれる仲間を募集しております!

ライトコードでは、仲間を募集しております!

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

ライトコードでは一緒に働いていただける方を募集しております!

採用情報はこちら

関連記事