見出し画像

自由研究でSNSをつくろう！ ユーザー登録編

猫アイコンには言われたかない

ミニマムSNSをつくる自由研究の続きです。夏はいいなあ。

今回は、ユーザー登録について考えつつ、実際にユーザーアカウントを作成できるページを作っていきますよ～。

データ仕様を考える

さてさて、それではまずこのミニマムSNSでどんなユーザーデータを持つかを考えていきます。もちろん最小限にしますから……

・アカウントID　（他者との区別に必要）
・パスワード　（ログイン時の認証に必要）
・メールアドレス　（本人認証に必要）

の3つというところでしょうか。

広告媒体にしてガッポリ儲けようなどは考えていませんから、本名、居住地、誕生日といった個人情報はいっさい不要です。不要どころか、個人情報を得てしまうと管理義務が生じてしまうので、少なくとも必須項目にはしません。

なお本人認証も、本当は大して必要性がありません。ただ、今回は「IDとパスワードを利用者に一度届けておく」ために行なうことにします。

というのも、この手の仕組みではアカウントのIDやパスワードをメモしない人がけっこういて、あとになってわからなくなり「ID・パスワードを教えてくれ」という問い合わせが来てしまう場合があります。それに応じる手間を省く必要はある、というわけです。

このほかに必須とは言えないデータとして、今後はアイコン画像やニックネームも持つことになると思いますが、それらはあとから"設定変更"するつもりで、ユーザーアカウント作成時には指定しないものとします。

ところで、なんとなくカラーバリエーションを追加した「老兵」が初期アイコンになりそうな気配がありますが、それはやめておこうと思います。たぶんね。たぶんです。フフ。

流れを考える

次にユーザーアカウント作成の流れを考えます。

①必須データ指定　（操作：フォームに希望するIDとメアドを記入）
　・記入を完了すると、仮登録を行なう。
　・仮パスワードを生成、指定されたメアドにメールで送る。

②本人確認　（操作：フォームで仮パスワードを記入）
　・仮登録データのパスワードと記入されたものが一致するか確認。

③結果表示　（操作なし）
　・一致すれば本登録データを作成し、仮登録データは消去する。
　・一致しない場合は仮登録データを消去して、①からやり直しを求める。
　・最後に結果を表示。

赤紙（召集令状）を受け取り、おじいちゃんは兵隊さんに；；

パスワードが一致しない場合に①からやり直しを求めるのは親切ではないのですが、途中復帰の仕組みを作るのはやめておくことにしました。たまにしか使われない機能はバグが潜みやすいので、できれば避けたいのです。

さっそく作ってみた

というわけで、『にちよう企画班』のサイト内にテストページを作ってみました（PHP使用）。本当に最低限の機能＋なんの飾りもなし！ なので何もおもしろくはありませんが、実際にアカウントを作る動作の流れを確認できます。（ためしに操作・登録してもらってOKです）

なお、今回作成したユーザーアカウント作成のコード（user.php）を記事の末尾に掲載しておきます。PHPのコードを読める方なら、フォームに記入したデータを受け取ったり、手順に応じて表示内容を変えていることを確認できると思います。

ただし、このコードは「よそゆき」にする前提で書いてはいないためフォーマルな設計になっていませんし、今後動作を変えることもあります。また、OGP（Twitterカードとか）の設定や仮パスワード生成など関数化している処理もあるので、このコードをそのままコピペするだけでは動作させられません。あくまで参考としてご利用ください。

さて、次回はIDとパスワードを使ってこのミニマムSNSにログインし、なにかちょっと表示するくらいまでの仕組みを作成しようと思います。

（つづく）

参考PHPコード

<?php
//日本語を指定
  mb_language("Japanese");
//UTF-8を指定
  mb_internal_encoding("UTF-8");

  include '../code/ut.php'; //関数読み込み

//メインタイトル
  $main_title='自由研究SNS(仮)';
  $sub_title='ユーザーアカウント作成';
//パス関連
  $url_index='https://nykk.jp/sns/index.php';
  $url_user='https://nykk.jp/sns/user.php';
  $pageicon='https://nykk.jp/sns/icon_oldsoldier192.png';
  $folder_u_pre='./u_pre/'; //認証前フォルダ
  $folder_u_reg='./u_reg/'; //認証後フォルダ
  $folder_u_dat='./u_dat/'; //保管フォルダ
//一般情報
  $info_datetime=date("YmdHis");
//定数的な変数
  $min_id=3; //ID最小文字数=3
  $max_id=15; //ID最大文字数=15
?>

<?php
//ヘッダー
echo "<head>";
$sitename=$main_title;
$pagetitle=$main_title.'/'.$sub_title;
$pageurl=$url_user;
$ogppicture="https://nykk.jp/sns/ogppicture640.png";
//基礎設定
  utHeadBasic($pagetitle,$pageicon,480);
//OGP設定
  utHeadOgp($sitename,$sitename,$pagetitle,$pageurl,$ogppicture);
echo "</head>";
?>

<?php
//変数初期設定
$form_command='step1'; //1=作成開始,2=本人確認,3=認証
$account_id='';
$form_password='';
$safe=true; //チェック初期化(有効判定)
$short_error=''; //エラーの理由
?>

<?php
//引数を取得
if(isset($_POST['form_command'])) {
  $form_command = $_POST['form_command'];
}
if(isset($_POST['to'])) {
  $mailto = $_POST['to'];
}
if(isset($_POST['account_id'])) {
  $form_aid = $_POST['account_id'];
  $account_id=$form_aid;
  //補正
  $account_id=trim(mb_convert_kana($account_id, 'as', 'UTF-8')); //半角化
  $account_id=preg_replace('/[^0-9a-zA-Z]/', '', $account_id); //英数字のみに
  $account_id=strtolower($account_id); //小文字化
}
if(isset($_POST['password'])) {
  $form_password = $_POST['password'];
}
?>

<!-- 共通処理：ページ開始 -->

<?php
echo '<body>';
echo '<b>'.$main_title.'</b><br>';
echo '<br>';
//仮登録データのpath準備(step2,3で必要)
  $pre_file=$account_id.'.txt';
  $pre_path=$folder_u_pre.$pre_file;
//本登録データのpath準備(step3で必要)
  $reg_path=$folder_u_reg.$pre_file;
//保管フォルダのpath準備(step3で必要)
  $dat_folder=$folder_u_dat.'user_'.$account_id;
?>

<!-- step1：アカウント作成開始 -->

<?php
if( $form_command=='step1' ){
  //ページ冒頭表示
  $step_title='手順① ユーザーアカウント作成開始';
  echo '<b>'.$step_title.'</b>';
  echo '<br>';

  //フォーム表示
  echo '・ユーザーアカウントのIDと、関連付けるメールアドレスを指定してください。<br>';
  echo '・[決定]すると、指定のメールアドレスに仮パスワードが送られます。<br>';
  echo '<br>';
  echo '<form action="./user.php" method="post">';
  echo '<input type="hidden" name="form_command" value="step2">';
  echo 'ID(半角英数字3～15文字)<br>';
  echo '<input type="text" name="account_id" size="30" placeholder="半角3～15文字の英数字でIDを記入"></p>';
  echo 'メールアドレス(半角英数字)<br>';
  echo '<input type="text" name="to" size="30" placeholder="半角英数字でメールアドレスを記入"></p>';
  echo '';
  echo '<input type="submit" name="send" value="決定">';
  echo '</form>';
}
?>

<!-- step2：本人確認(メール送信+パス入力) -->

<?php
if( $form_command=='step2' ){

//ID文字数チェック
  if(strlen($account_id) < $min_id or strlen($account_id) > $max_id){
  $safe=false; //無効化
  $short_error='ID('.$account_id.')の文字数が不正です（最小'.$min_id.'～最大'.$max_id.'文字）。';
}
//ID重複チェック
if(file_exists($pre_path)==true or file_exists($reg_path)==true){
//(仮登録or本登録のファイルがある)
  $safe=false; //無効化
  $short_error='そのID('.$account_id.')は利用できません。';
}

if($safe==true){
  //password作成
  $new_pass=utPasswordMake();
  //送信準備
  $mailhead = "From: noreply@nykk.jp";
  $mailsubject=$main_title.'/'.$sub_title;
  $mailmsg='ユーザーアカウントの仮登録情報'."\n";
  $mailmsg=$mailmsg.'・ID: '.$account_id."\n";
  $mailmsg=$mailmsg.'・パスワード: '.$new_pass."\n";
  $mailmsg=$mailmsg.'※パスワードはいずれ任意のものに変更可能にする予定ですが未対応です。';
  //送信実行
  if(mb_send_mail($mailto, $mailsubject, $mailmsg, $mailhead)){
  //(成功)
  //ページ冒頭表示
  $step_title='手順② 本人確認';
  echo '<b>'.$step_title.'</b>';
  echo '<br>';
  //ページ本文表示
  echo '・本人確認メール送信に成功しました。<br>';
  echo '（宛先: '.$mailto.'）<br>';
  echo '（件名: '.$mailsubject.'）<br>';
  echo '<br>';
  //仮登録データをセーブ
  $fp = fopen($pre_path, "w");
  fwrite($fp, $new_pass."\n");//1行目:password
  fclose($fp);
  //フォーム表示
  echo '・指定メールアドレスに送られたパスワードを記入してください。<br>';
  echo '・[決定]すると認証処理へ進み、ユーザーアカウント作成が終わります。<br>';
  echo '<br>';
  echo '<form action="./user.php" method="post">';
  echo '<input type="hidden" name="form_command" value="step3">';
  echo '<input type="hidden" name="account_id" value="'.$account_id.'">';
  echo '<input type="hidden" name="to" value="'.$mailto.'">';
  echo 'ID: '.$account_id.'<br>';
  echo '<br>';
  echo 'パスワード<br>';
  echo '<input type="text" name="password" size="30" placeholder="ここにパスワードを記入"></p>';
  echo '';
  echo '<input type="submit" name="send" value="決定">';
  echo '</form>';
  }else{
  //(失敗)
  $safe=false;
  $short_error='メール送信に失敗しました。';
  }
}
if($safe==false){
  //ページ冒頭表示
  $step_title='手順② ユーザーアカウント作成に失敗...';
  echo '<b>'.$step_title.'</b>';
  echo '<br>';
  //ページ本文表示
  echo '・'.$short_error.'<br>';
  echo '・はじめからやり直してください。<br>';
  echo '　<a href="'.$url_user.'">'.$main_title.'/'.$sub_title.'</a><br>';
  }
}
?>

<!-- step3：認証 -->

<?php
if( $form_command=='step3' ){
  //仮登録データ存在チェック
  if(file_exists($pre_path)==false){
  $safe=false;
  $short_error='仮登録されていません。';
}
//ID重複チェック
if(file_exists($reg_path)==true){
  $safe=false;
  $short_error='このID('.$account_id.')はすでに登録済みのため利用できません。';
}

//仮登録データをロード
if($safe==true){
  //ロード
  $info_lines=0;
  $fp = fopen($pre_path, "r");
  while ($line = fgets($fp)) {
  $info_lines=$info_lines+1;
  if($info_lines==1){$pre_password=trim($line);}
  }
  fclose($fp);
  //password判定
  if($pre_password<>$form_password){
    $safe=false;
    $short_error='パスワードが一致しません。';
  }
}

if($safe==true){
  //ページ冒頭表示
  $step_title='手順③ ユーザーアカウント作成の完了';
  echo '<b>'.$step_title.'</b>';
  echo '<br>';
  //ページ本文表示
  echo '・パスワードの一致を確認し、ユーザーアカウントの作成が完了しました！<br>';
  echo '<br>';
  //仮登録削除
  unlink($pre_path);
  echo '・ID: '.$account_id.'<br>';
  echo '<br>';
  //本登録データをセーブ
  $fp = fopen($reg_path, "w");
  fwrite($fp, $form_password."\n");//1行目:password
  fwrite($fp, $mailto."\n");//2行目:メアド
  fclose($fp);
  //保管フォルダ作成
  mkdir($dat_folder,0700);
  echo '※ログイン処理などは今後作成していきます！<br>';
  echo '　<a href="'.$url_index.'">'.$main_title.'</a><br>';
}

if($safe==false){
  //ページ冒頭表示
  $step_title='手順③ ユーザーアカウント作成に失敗...';
  echo '<b>'.$step_title.'</b>';
  echo '<br>';
  //ページ本文表示
  echo '・'.$short_error.'<br>';
  echo '・はじめからやり直してください。<br>';
  echo '　<a href="'.$url_user.'">'.$main_title.'/'.$sub_title.'</a><br>';
  //仮登録削除
  unlink($pre_path);
  }
}
?>

<!-- 共通処理：締め -->
<?php
  echo '</body>';
?>

https://nykk.jp/sns/user.php(2023/7/31版)

この記事が参加している募集

#つくってみた

19,939件

この記事が気に入ったらサポートをしてみませんか？