Webixライブラリを使ったWebアプリと自動ログイン機能についてNo.057
いままで、Webixライブラリを使ってJavascript言語でリッチWebUIの開発方法を紹介していますが、今回は、ログイン機能に少し、機能追加したので、紹介します。
業務系アプリケーションをWebアプリでサービス提供するとき、誰が操作するかと、操作可能なユーザであることを認証するためにログイン画面を実装することが多いです。一方、複数の人に同時に閲覧してもらいたい場合などで、ログインIDとパスワードを資料上に記載しない（セキュリティ面を考慮）で、連絡するのは、けっこう面倒です。どうにか、一定期間（例えば、当日だけとか）は、指定URLでアクセスすれば、自動ログインできる方式がいいこともあります。
今回は、その自動ログイン機能についての紹介です。
ログイン機能には、以前からユーザIDをURLで指定できる実装はしていました。以下のようにuserid=で指定すれば、自動的に画面上のログインID情報に指定した情報(例では、admin)がセットされます。
https://sunsun.sakura.ne.jp/webix02/?userid=admin
URLでPHPソースが未指定のときは、index.phpが自動的に動作しますが、そのindex.phpの中で最初に指定されているパラメータをチェックし、出力する画面用のソース（Javascript）に反映させます。
URL上にuseridパラメータがあれば、$useridに代入し、その値を画面上のログインIDのフィールドの初期値に設定します。
$userid = '';
if(isset($_GET['userid'])){
$userid = $_GET['userid'];
}
echo '{ view:"text", label:"ログインID", id:"userid",name:"userid", value:"'.$userid.'", invalidMessage:"ログインIDが空欄です" ,placeholder:login_id_placeholder,attributes:{ maxlength: 40}},'."\n";
今回、自動ログインする方法は、上記の方法とは少しだけ異なります。ユーザIDとパスワードをURLと同時にパラメータ指定する方法ではなく、別のパラメータ（apikey)を指定し、apikeyとuseidがあれば、PHP言語（サーバサイド）でDBを検索して事前に設定しているapikeyと指定されたapikeyが一致しているときに、出力する画面のソースコードを通常と変更し、自動的にログイン後のメニュー画面へ遷移する動作となるようにソースを出力します。
$apikey = "";
if(isset($_GET['apikey'])){
$apikey = $_GET['apikey'];
}
if(apikey != "" && loginuserid != ""){
if(login_check()== 0){ //ユーザIDとパスワードかapikeyで認証処理を実施（サーバへの問い合わせ）
menu_search_and_jump(); //ログイン認証できたら指定ユーザでメニュー画面に遷移
}
}apikey情報は事前に対象ユーザの管理画面で、パスワード登録などと同じように事前に作成してDBに保存しておきます。（今回は、16桁の英数字を乱数で発生させて作成しています）
詳しいソースは、実際の運用で使うソースでセキュリティを考慮して、本ページでは記載を省略します。
URLを指定して自動ログインができるモードを使うユーザは、期間限定で使用する場合などに限るので、必要なときにapikeyを作成してDBに保存し、そのapikeyを使ってURLをＱＲコードで利用者に配布すれば、そのときだけ自動ログインが可能となります。サービスしたくないときは、再度、apikeyを再作成すれば、ＤＢ検索で一致しないので、自動ログインにはなりません。
例として、以下のようなURLを指定しますが、実際のapikeyと一致していないので、通常のログイン画面になります。
https://sunsun.sakura.ne.jp/webix02/index.php?userid=commonuser&apikey=LqgPvy4PMtI050a1
ログインIDだけが、URLで指定されたログインIDになります。
会合やパーティなどで、同時に複数の人に、その時点で情報を配信したい場合など、QRコードを配布すれば、そのときだけ、自動ログインして、情報連絡がスマホなどでできるサービスも実現できます。
スマホでのキー操作なしで使ってもらえるので、有効です。
また、パスワードの配信でもないので、期間限定で使用できます。