【Ringee開発記 #11】ログイン機能の実装② ログイン画面の作成とデータベース連携【夏休み毎日投稿 Day23】

こんにちは。小川智也です。

本日はDay23ということでRingeeのログイン機能の実装2回目を行っていこうと思います。

最後までぜひご覧ください。

ログイン画面を実装する

まず始めにログイン画面を実装していきます。

現在もログイン画面のプログラムはないことはないのですが、ただページを切り替えてるだけでログイン処理は1mmもしてません。

今回はこのログインの画面と新規登録画面をサクッと作っていきます。

ログイン画面のデザイン

デザイン自体は大昔に作ったいえPayを参考に画面の真ん中にログイン画面が出てくる感じにしようと思います。

Googleアカウントのボタンや登録画面も色々作らないといけないので、既存のWebサービスのログイン画面を色々見ながら見様見真似で実装していきます。

ログイン画面の完成品

完成品はこんな感じです。30分くらいで個人的に滅茶苦茶満足行くデザインが出来ました。

スマホでもちゃんといい感じに表示されます。

新規登録画面を実装する

次に新規登録画面も実装していきます。

前回の記事でご紹介したログインフローを参考に色々やっていきます！

今回は「メルアド入力→メール送信→メールから情報登録」のような形なので登録画面は最小限で良さそうです。

新規登録画面の完成品

新規登録画面の完成品はこんな感じです。ログイン画面からパスワードの欄を消してところどころ文字を変えただけですね()

バックエンドを全く作っていないのでもちろん動作しません。

ついでにパスワードリセット画面も作ってみました。

ログイン処理のバックエンド実装（下準備）

明日は新規登録とログインあたりのバックエンドから作っていこうと思います。

今日で全部ログイン実装しようかとも考えたのですが、帰省に向けていろいろ課題をしていたら時間が一瞬にして消えたので、今日のところはログイン処理の下準備で終わりたいと思います。

DBの見直し

データベース実装に伴い、一部DBの設計を見直しました。

具体的には、ユーザーDBにgoogleログイン用の項目を追加したり、ほぼすべての項目にupdated_dateとのnot nullを追加しました。

OAuth用Google Cloudプロジェクトの作成

今回Googleログインも実装していくので、それ用のクライアントIDとクライアントシークレットをGoogle Cloud側で取得しておきました。

以前からいろいろお世話になっているのでクライアントIDの取得は戸惑わずにできました。

SQL接続確認

あとはとりあえず試しでDB接続もしてみます。

PDOでMariaDBのコンテナに接続してみます。

多分ちゃんと行けましたね()

まとめ

いかがだったでしょうか。今回はDay23ということで、ログイン画面の作成とデータベース連携をちょろっとしてみました。

明日からいよいよログイン処理のメイン実装が始まっていくので正直ちょっと恐ろしいですが（データベースとかSQL文ほぼ触れたことない）頑張りたいと思います！

最後まで見ていただき、ありがとうございました。