phpでのログイン機能の実装方法について詳しく解説します

phpでのログイン機能の実装。初心者には一番の壁となりうるものですよね。最初は誰しもが、

どうやって実装するのか検討もつかない……

と、つまづいた難関ポイントだと思います。

そこで、今回はphpでできるだけわかりやすく、簡単に解説していきます。ぜひこの記事を読んで、ログイン機能の実装をしてみてください。

1 phpのログイン機能はフレームワークを使用すれば簡単に実装可能、しかし……
- 1.1 フレームワークのみでは応用が効かない場合がある
2 phpのログイン機能実装の流れ
3 実際にログイン画面を作ってみよう！
4 まとめ

phpのログイン機能はフレームワークを使用すれば簡単に実装可能、しかし……

フレームワークというのはご存知でしょうか？簡単に言うと、「いろいろな機能がすでに簡単に実装可能な工作キット」というイメージです。今回のログイン機能も、フレームワークの中にすでに実装されており、難しいことを考えなくてもすぐに使えるようになります。

現在、phpで有名なフレームワークといえば、LaravelやFuelPHPなどがありますが、もしフレームワークを使ってログイン機能を実装する場合、大抵は「（フレームワーク名）　ログイン機能」などで検索すればヒットすることでしょう。

フレームワークのみでは応用が効かない場合がある

実は、フレームワークはあまりにも簡単に機能が実装できるため、フレームワークのみで学習をした場合は、いざバグが起きたとしても原因がわからず詰まってしまったり、細かな応用が効かない場合が多いです。内部でどのような処理が行われているのかを把握しないまま簡単に実装ができてしまう、というのが逆にデメリットになってしまうのです。

フレームワークを使っていたとしても、生のphpでゴリゴリ実装できる・内部の処理がわかっていると、細かなバグや修正に対応できるようになりますので、初学者やフレームワークのみで開発を行っている方は特に、この記事を読んで、実際に何が行われているのか？というのを学んでいくのがおすすめです。

phpのログイン機能実装の流れ

ここでは、まずは実際にログイン機能がどのような流れで行われているのかという流れを、一つづつ見ていきましょう。

ユーザーに情報を入力してもらう

まずは、ユーザーに情報を入力してもらわなければなりません。なので、htmlで入力フォームを作成し、送信できるようにページを作成する必要があります。

入力された情報に対してバリデーションを行う

ここで言うバリデーションというのは、「入力チェック」「書式チェック」のことを指します。例えば、Eメールアドレスであれば、

アルファベット・数字・記号のみで入力されているか？
文頭や文末に＠がなく、かつ文中に＠が含まれているか？
データベースに保存できる文字数を超過していないか？
その他、悪意のある文字列ではないか？

など、文字列をチェックする必要があります。これをデータベースに接続する前に確認する必要があるんですね。

ここでの「悪意のある文字列」というのは、例えばデータベースに不正アクセスを行い、データを不正に入手されたり、ページの改ざんを行われてしまうような文字列になります。詳しくは「SQLインジェクション」や「クロスサイトスクリプティング」で検索してみましょう。

データベースからユーザーの情報を取り出し、間違いがないかチェックする

バリデーションチェックを行い、問題がなかった場合は、データベースに接続し、入力された情報をもとにデータベースからユーザーの情報を取得します。その後、入力されたデータとデータベースのデータをチェックし、問題ない場合は次のステップに進みます。

ログイン状態を付与し、ログイン画面から別のページにリダイレクトする

ログイン状態をユーザーに付与し、マイページなどに遷移させます。ログイン状態を付与するにはセッションを使うのが一般的です。

ログイン処理はこの４ステップで行います。

実際にログイン画面を作ってみよう！

それでは、今回はログイン画面を作ってみましょう。作成の流れも、基本的に上の流れで行います。まずは、入力フォームを作成します。

入力フォームの作成

コードは以下の通りになります。

//html
<!DOCTYPE html>

<html lang="ja">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test</title>
</head>
<body>
  <h1>ログイン画面</h1>
  <form action="" method="post">
    <div class="err_msg"><?php echo $err_msg['email']; ?></div>
    <label for=""><span>メールアドレス</span>
      <input type="email" name="email" id=""><br>
    </label>
    <div class="err_msg"><?php echo $err_msg['password]; ?></div>
    <label for=""><span>パスワード</span>
      <input type="text" name="password" id=""><br>
    </label>
    <input type="submit" value="送信">
  </form>
</body>
</html>

//css
h1 {
  margin-top: 60px;
  text-align: center;
}
form {
  width: 400px;
  margin: 0 auto;
}
.err_msg {
  color: #ff838b;
  font-size: 1.5em;
}
label {
  height: 60px;
  display: block;
  overflow: hidden;
  margin-bottom: 10px;
}
label span {
  box-sizing: border-box;
  height: 50px;
  padding-top: 25px;
  padding-bottom: 25px;
  display: block;
  float: left;
}
label input {
  display: block;
  float: right;
  height: 30px;
  margin-top: 20px;
}

//html

<!DOCTYPE html>

<head>

</head>

<body>

<h1>ログイン画面</h1>

<label for=""><span>メールアドレス</span>

</label>

<label for=""><span>パスワード</span>

</label>

</form>

</body>

</html>

//css

h1 {

margin-top: 60px;

text-align: center;

}

form {

width: 400px;

margin: 0 auto;

}

.err_msg {

color: #ff838b;

font-size: 1.5em;

}

label {

height: 60px;

display: block;

overflow: hidden;

margin-bottom: 10px;

}

label span {

box-sizing: border-box;

height: 50px;

padding-top: 25px;

padding-bottom: 25px;

display: block;

float: left;

}

label input {

display: block;

float: right;

height: 30px;

margin-top: 20px;

}

これで、まずは入力フォームを作成できました。POSTでデータをこのページに送信しています。また、画像ではエラーメッセージは仮設定してあります。

入力されたデータに対してバリデーションチェックを行う

次に、バリデーションチェックを行います。今回チェックする内容は、以下のとおりです。

メールアドレス

空白であるかどうか
eメールアドレスの形式かどうか
保存可能な文字数を超えていないかどうか

パスワード

(文字数制限があれば)文字数制限内かどうか
(文字制限があれば)文字制限内であるかどうか

今回のパスワードの制限は、「６文字以上２５５文字以内」かつ「英数字のみ使用可能」とします。また、保存可能な文字数はどちらも２５５文字とします。eメールアドレスの形式かどうかは、htmlのinputタグのtype属性をemailとすると、html側で判定してくれるので今回はこれを使います。

ぜひ、みなさんもチェックをどのようにするか自分で考えてみてくださいね。

今回、私は以下のように実装してみました。

<?php

//セッションを使う
session_start();

// 変数の初期化
$email = '';
$password = '';
$err_msg = array();

// POST送信があるかないか判定
if (!empty($_POST)) {
  // 各データを変数に格納
  $email = $_POST['email'];
  $password = $_POST['password'];

  // eメールアドレスバリデーションチェック
  // 空白チェック
  if ($email === '') {
    $err_msg['email'] = '入力必須です';
  }
  // 文字数チェック
  if (strlen($email) > 255) {
    $err_msg['email'] = '255文字で入力してください';
  }
  // パスワードバリデーションチェック
  // 空白チェック
  if ($password === '') {
    $err_msg['password'] = '入力してください';
  }
  // 文字数チェック
  if (strlen($password) > 255 || strlen($password) < 5) {
    $err_msg['password'] = '６文字以上２５５文字以内で入力してください';
  }
  // 形式チェック
  if (!preg_match("/^[a-zA-Z0-9]+$/", $password)) {
    $err_msg['password'] = '半角英数字で入力してください';
  }
}

?>

<?php

//セッションを使う

session_start();

// 変数の初期化

$email = '';

$password = '';

$err_msg = array();

// POST送信があるかないか判定

if (!empty($_POST)) {

// 各データを変数に格納

$email = $_POST['email'];

$password = $_POST['password'];

// eメールアドレスバリデーションチェック

// 空白チェック

if ($email === '') {

$err_msg['email'] = '入力必須です';

}

// 文字数チェック

if (strlen($email) > 255) {

$err_msg['email'] = '255文字で入力してください';

}

// パスワードバリデーションチェック

// 空白チェック

if ($password === '') {

$err_msg['password'] = '入力してください';

}

// 文字数チェック

if (strlen($password) > 255 || strlen($password) < 5) {

$err_msg['password'] = '６文字以上２５５文字以内で入力してください';

}

// 形式チェック

if (!preg_match("/^[a-zA-Z0-9]+$/", $password)) {

$err_msg['password'] = '半角英数字で入力してください';

}

皆さんはどのように実装されましたか？この例と全く同じである必要はなく、きちんとチェックされていればOKです。また、セッションを使うので、最初にsession_start()を忘れないようにしてくださいね。

もしもこの例でわからない関数が出てきた場合は、「(関数名) php」と検索すると出てきますので、ぜひご自身で検索してみてください。

これを、htmlの<!DOCTYPE html>よりも前に記述すればバリデーションチェックの実装は完了です。

データベースからデータを取得し、入力されたパスワードが間違っていないかチェックする

次に、データベースからデータを取得した後、パスワードが間違っていないかチェックを行います。

今回は、emailアドレスから以下のデータを取得したと仮定し、進めていきます。

$data = array(
  'email' => 'webukatu@webukatu.com',
  'password' => 'webukatu'
);

$data = array(

'email' => 'webukatu@webukatu.com',

'password' => 'webukatu'

);

emailが「webukatu@webukatu.com」、パスワードが「webukatu」というデータですね。それでは、チェックを行います。

<?php

//先ほどと同じ

if (!empty($_POST)) {

//先程のバリデーションチェック

//バリデーションチェックに問題がなければ、
//$err_msgの中身が空なのでチェックを行う
if(empty($err_msg)){
  if($data['password'] === $password){
    //セッションにemailアドレスを挿入する
    $_SESSION['email'] = $email;
    //マイページへ遷移
    header('Location:mypage.php');
    exit;
  }else{
    $err_msg['email'] = 'eメールアドレスまたはパスワードが違います';
  }
}

<?php

//先ほどと同じ

if (!empty($_POST)) {

//先程のバリデーションチェック

//バリデーションチェックに問題がなければ、

//$err_msgの中身が空なのでチェックを行う

if(empty($err_msg)){

if($data['password'] === $password){

//セッションにemailアドレスを挿入する

$_SESSION['email'] = $email;

//マイページへ遷移

header('Location:mypage.php');

exit;

}else{

$err_msg['email'] = 'eメールアドレスまたはパスワードが違います';

}

このようになります。

ここでのエラーメッセージは必ず「eメールアドレスとパスワードのどちらが間違っているのかわからない」という状態にしてください。パスワードが違います、と表示するとeメールアドレスがあるということがわかってしまうので悪用されてしまう可能性があります。

最後に、セッションにログイン情報を格納し、マイページなどに遷移する

この処理は、先程のサンプルコードに記述してある以下の部分になります。

//セッションにemailアドレスを挿入する
$_SESSION['email'] = $email;
//マイページへ遷移
header('Location: mypage.php');
exit;

//セッションにemailアドレスを挿入する

$_SESSION['email'] = $email;

//マイページへ遷移

header('Location: mypage.php');

exit;

セッションに連想配列形式でデータを格納し、マイページに遷移する、という処理になります。ログイン状態かどうかは、$_SESSIONの中身が空かどうかで判別できるようになります。

まとめ

いかがでしたか？今回は、

phpでのログイン機能の実装方法

について紹介しました。初学者にとっては最初の壁になりうる部分ですが、ひとつひとつ見ていくことができれば必ず実装可能です。ぜひこの記事を参考に、実装してみてくださいね。

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。