410 views

この記事は最終更新から 1470日 が経過しています。

0. この連載でやっていること

【自作青色申告ソフト】#1 なぜ自作する？
【自作青色申告ソフト】#2 ver.0.1 まずは画面作りから
【自作青色申告ソフト】#3 ver.0.2 ユーザー認証を実装する。 ← 今回はココ
【自作青色申告ソフト】#4 ver.0.3 科目設定画面を実装する。
【自作青色申告ソフト】#5 ver.0.4 預金口座、取引先設定画面を実装する。
【自作青色申告ソフト】#6 ver.0.5 支出の登録画面を実装する。
【自作青色申告ソフト】#7 ver.0.6 収入の登録画面を実装する。
【自作青色申告ソフト】#8 ver.0.7 仕訳帳を実装する。

1. やりたいこと

前回の投稿 【自作青色申告ソフト】#2 まずは画面作りから では、次回は設定画面を作ると書いていた。

しかし…
こんなWEBサイトでも、偶然誰かが訪れて来てくれて
なんだこのページ？
と科目を追加したり、経費の値段を変更してしまうかもしれない。

だから…
設定画面を作る前に、編集OK/NG をサーバー側で判断する仕組みを作らないといけない。

つまり…
編集権限を持つユーザー認証
の仕組みを実装する必要がある。

念には念を入れて…
メールでワンタイムパスワードを送る 二段階認証 で実装する。

2. やってみる

1) 実装の手順

以下の手順でユーザー認証処理の実装を進める。
2時間では終わりそうにないなぁ…

1) データベースを作る。
2) データベースに、ユーザー管理テーブルを作る。（メアド、パスワード、一時認証コード、〆切日時を保存）
3) ログインメニューを作る。
4) ログイン画面を作る。（modal windowで実装）
5) ログイン処理を実装する。
6) 各画面でログイン状態を判定できるようにする。

2) 実装してみた！

(1) 右上のログインボタンを押す。

(2) ユーザー登録してあるメールアドレスとパスワードを入力する。

(3) 認証に成功すると、登録メアドにワンタイムパスワードが送られてくるので、それを入力する。

(4) 二段階認証をクリアすれば、ログイン成功！

(5) ログイン状態では、右上のログインボタンがログアウトに変わっている。

実装したページはこちら。
https://aot.dogrow.net/v2/

3. 次にやること

・次回 v.0.3では、科目設定ページを作る。