1. HOME
  2. ブログ
  3. IT技術
  4. 【第3回】Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみた【管理者ページ整備】

【第3回】Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみた【管理者ページ整備】

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

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

前回は、「Firebase のセットアップ」と「認証機能の基盤」を作成しました。

今回は、認証機能の整備ということで、「クッキー管理」と「ログアウト機能」を追加していきます。

Cookie によるログイン管理

第2回目で作成したログイン機能はちゃんと機能していますが、とても不便な部分があります。

それは、「管理者ページに POST でしか入れない」ことです。

本来ならば、一度ログインすれば、GET でアクセスしても、ログインを介さずにアクセスできます。

そういった機能は、Cookie を使って構築していきましょう。

Cookie を使って GET でも管理者ページに入れるように

Responder では、Cookie の「セット」は resp.set_cookie() 、「取得」は req.cookies です。

したがって、以下の仕様にしたいと思います。

  1. ログイン成功時に Cookie をセット
  2. GET でのアクセス時に、Cookie にログインユーザがいれば、管理者ページを表示

コード

これで、ログインをしていれば、管理者ページに GET でログインできます。

Cookie の破棄

一定時間後に Cookie の自動破棄をする」仕様にしたい場合は、どうすればいいのでしょう?

そんな時は、 expires=**, max_age=** で変更します。

expires は「日付」、 max-age は「破棄までの秒数」を指定します。

今回は、5日間としました。

ログアウト機能

次に、ログアウト機能を「/logout」に作成します。

実装内容はとても単純で、Cookie を破棄すれば OK です。

実際に、ログイン後に「/logout」にアクセスしてみてください。

その後「/admin」にGETでアクセスしても、ログイン画面に戻されるはずです。

管理者ページを整える

最後に、管理者ページを軽く整えておきましょう。

管理者ページでは、「投稿の編集や追加」「プロフィールの編集」などができます。

注意

あなたの好みのデザインを使って構いません。

また、今回作ったデザインに仮データは入っていますが、これはいずれ消します

CSS 追記

さらに、CSSも追記します。

完成!

管理者ページを簡単にデザイン

サイドメニューのリンクは、後ほどコーディングしていきます。

もちろん、今はまだ動作しません。

第4回へつづく!

今回は、「認証機能の整備」と「管理者ページ整備」を行いました。

まだあんまりブログっぽくないですね…。

次回からは、いよいよ「ブログ記事とデータベース周りの整備」を行っていきます!

具体的には、「カテゴリの追加」「記事の追加」などを実装していきます。

お楽しみに!

次回の記事はこちら

第1回はこちら

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

書いた人はこんな人

広告メディア事業部
広告メディア事業部
「好きを仕事にするエンジニア集団」の(株)ライトコードです!

ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もり大歓迎!

また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
インターンや新卒採用も行っております。

以下よりご応募をお待ちしております!
https://rightcode.co.jp/recruit

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア