CodeIgniterによる実践アプリ開発例！ログイン・会員登録機能付きアプリを作る方法

1. ログインと会員登録の仕組みとは

1. ログインと会員登録の仕組みとは

私たちが普段、スマートフォンのアプリやパソコンのサイトで利用しているログインや会員登録は、裏側でデータベースと呼ばれる情報保管庫と連動して動いています。

会員登録とは、新しく利用者の名前やパスワードをその情報保管庫にしっかりと記録する作業のことです。そしてログインとは、入力されたパスワードが、以前に保管庫に記録したものと一致しているかどうかを答え合わせする作業になります。この答え合わせが正しかったときだけ、マイページなどの特別な画面に進むことができるようになります。

プログラムの世界では、この一連の動きを安全に行うために、たくさんの決まりごとがあります。今回は、世界中で広く愛されているピーエイチピーというプログラミング言語のフレームワークであるCodeIgniterを使用して、この仕組みを最も分かりやすく形にしていきます。フレームワークとは、システムを素早く安全に作るための土台となる骨組みのことです。これを使うことで、難しい暗号化や安全対策が最初から備わった状態のアプリを開発できます。

2. データベースの準備とテーブル作成

2. データベースの準備とテーブル作成

アプリを作成する前に、まずは会員の情報を保存するための大きなノートを用意する必要があります。この情報のノートのことをデータベースと呼び、その中にある表形式のデータ記述欄をテーブルと呼びます。

今回は、利用者を識別するための番号、名前、メールアドレス、そしてパスワードの４つの項目を保存するテーブルを作成します。ここで最も大切なのは、パスワードの扱い方です。パスワードはそのままの文字でノートに書き写してしまうと、万が一ノートが盗み見られたときに大変危険です。そのため、プログラムの中で特殊な文字の羅列に変換して、誰が見ても元の数字や文字が分からないように加工して保存します。この加工技術のことを暗号化、またはハッシュ化と呼びます。

以下のコードは、データベースに会員情報を保存するためのテーブルを作成するための命令文です。このようなデータベースへの指示書のことを、エスキュウエルと呼びます。この命令を実行することで、会員情報を綺麗に整理して格納する部屋が完成します。

$sql = "CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) UNIQUE NOT NULL,
    password VARCHAR(255) NOT NULL
);";

3. 新規会員登録画面とコントローラーの作成

3. 新規会員登録画面とコントローラーの作成

部屋の準備ができたら、次は利用者が実際に文字を入力する画面と、その入力を受け取って処理する案内役を作ります。CodeIgniterでは、この案内役のことをコントローラーと呼びます。コントローラーは、画面から送られてきた情報に間違いがないかをチェックし、問題がなければデータベースというノートに情報を書き込む指示を出します。

プログラミングが初めての人にとって、画面の動きを制御するのは難しく感じるかもしれませんが、CodeIgniterなら非常にシンプルです。画面に用意された入力欄に名前やメールアドレスが書き込まれ、登録ボタンが押されると、コントローラーが自動的にその中身をキャッチします。

次に紹介するプログラムは、登録画面から送られてきたデータを受け取るためのコントローラーの基本的な記述例です。この処理の中で、パスワードが自動的に強力な暗号へと変換され、安全に保管される仕組みになっています。未経験の方でも、この流れを追うことで、データがどのように移動していくかが視覚的に理解できるようになります。

public function register()
{
    $name = $this->request->getPost('name');
    $email = $this->request->getPost('email');
    $plainPassword = $this->request->getPost('password');
    $securePassword = password_hash($plainPassword, PASSWORD_DEFAULT);
    $userData = [
        'name' => $name,
        'email' => $email,
        'password' => $securePassword
    ];
    echo "会員データの受け取りに成功しました。";
}

上記のプログラムを実行したとき、画面には処理が正常に進んだことを表すメッセージが表示されます。実際の出力結果は以下のようになります。

会員データの受け取りに成功しました。

4. ログイン機能とセッションの管理

4. ログイン機能とセッションの管理

会員登録が完了したら、次はいよいよログイン機能の実装です。ログイン機能では、画面に入力されたメールアドレスを元に、一度データベースのノートをめくって該当する会員を探し出します。もし会員が見つかったら、今度は入力されたパスワードと、ノートに暗号化されて保存されているパスワードが一致するかを検証します。

ここで新しく登場する重要な概念がセッションです。インターネットの画面は、通常、一度ボタンを押して画面を切り替えると、前の画面で誰が操作していたのかをすっかり忘れてしまう性質を持っています。これでは、ページを移動するたびに何度もログインを求められてしまい、非常に不便です。そこで、サーバーという大きなコンピューター側に利用者の仮の識別番号を一時的に保存しておく仕組みが作られました。これがセッションです。

セッションという魔法の鍵を発行することで、利用者は一度ログインすれば、サイト内の他のページに移動してもずっとログイン状態を維持できるようになります。次のコードは、入力されたパスワードの答え合わせを行い、正しかった場合にセッションに利用者の名前を記憶させる処理の例です。

public function loginCheck()
{
    $inputEmail = "test@example.com";
    $inputPassword = "password123";
    $savedPassword = password_hash("password123", PASSWORD_DEFAULT);
    if (password_verify($inputPassword, $savedPassword)) {
        $session = session();
        $session->set('userName', '山田太郎');
        echo "ログインが成功しました。ようこそ、山田太郎さん。";
    } else {
        echo "パスワードが間違っています。";
    }
}

このプログラムが動き、正しいパスワードであると判定されると、コンピューターの画面には次のような歓迎の文章が出力されます。

ログインが成功しました。ようこそ、山田太郎さん。

5. ビューによる入力画面の作成

5. ビューによる入力画面の作成

これまでは裏側の仕組みであるプログラムの説明をしてきましたが、今度は利用者が実際に目にする外観の部分を作っていきます。CodeIgniterでは、この画面のデザインを担当するファイルをビューと呼びます。ビューは、主にホームページを表示するための言語であるエイチティーエムエルで記述されます。

パソコンの操作に慣れていない方でも、インターネットで文字を入れる白い箱や、青い送信ボタンを見たことがあるかと思います。それらはすべて、このビューの中に特定の記号を使って組み立てられています。今回は、メールアドレスを入れる箱と、パスワードを入れる箱、そして登録を実行するボタンを配置したシンプルな登録画面を想定します。

CodeIgniterのビューファイルは、コントローラーからの指示を受けて初めて画面に映し出されます。以下の記述は、利用者が迷わずに情報を入力できるように整えられた、会員登録画面の元となるデザイン設計図の例です。この記述があることで、初めてシステムが人間にとって使いやすい形へと変化します。

<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">会員登録フォーム</div>
                <div class="card-body">
                    <form action="/register" method="post">
                        <div class="mb-3">
                            <label class="form-label">お名前</label>
                            <input type="text" name="name" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">メールアドレス</label>
                            <input type="email" name="email" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">パスワード</label>
                            <input type="password" name="password" class="form-control" required>
                        </div>
                        <button type="submit" class="btn btn-primary w-100">新しく登録する</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

6. ログアウト機能の実装

6. ログアウト機能の実装

安全なアプリケーションを作る上で、ログインと同じくらい重要なのが、利用を終了するためのログアウト機能です。ログアウトを行わないまま共有のパソコンなどを放置してしまうと、次にそのパソコンを開いた別の人に、自分の大切なマイページを勝手に見られてしまう危険性があります。

ログアウトの仕組みは、ログインのときに発行したセッションという魔法の鍵を、完全に破壊して消去する作業になります。鍵が消えてしまえば、ホームページのシステムは先ほどまで操作していた人が誰なのかを判別できなくなるため、自動的に一般の公開画面へと追い出すことができるようになります。

CodeIgniterでは、このセッションの消去もわずか数行の非常に短い命令文で実現できます。以下のコードは、現在保持しているセッションのデータを完全に空っぽにして、安全にログアウト処理を完了させるための具体的な記述です。この処理を入れることで、初めて誰でも安心して使える会員制サイトが完成します。

public function logout()
{
    $session = session();
    $session->destroy();
    echo "ログアウトが完了しました。安全に画面を閉じてください。";
}

ログアウトのボタンがクリックされ、このプログラムが正常に動作すると、画面には安全に終了したことを知らせるメッセージが表示されます。

ログアウトが完了しました。安全に画面を閉じてください。