Captive Portal(CoovaChilli)のログイン画面の場合は
USERID と PASSWORD を入力する必要があったので
認証にチェックを付けるだけで利用出来るように改造した時のメモ書きです。
また、jquery-1.8.3.min.js が必要になります。
設定方法
①.vi /etc/chilli/defaults
※.79行目を変更する。
変更前
HS_UAMHOMEPAGE=http://\$HS_UAMLISTEN:\$HS_UAMPORT/www/coova.html
変更後
HS_UAMFORMAT=http://\$HS_UAMLISTEN:\$HS_UAMUIPORT/www/login.html
②.vi /etc/chilli/www/login.html
※.ログイン画面の情報になります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Cache-control" content="no-cache"/> <meta http-equiv="Pragma" content="no-cache"/> <title>認証画面</title> <script src="jquery-1.8.3.min.js"></script> <style> html { font-family: "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, Meiryo, sans-serif; } body { margin: 0 auto; height: 100%; background: #fff; } #Contents{ width:100%; } .checkContents{ margin:0 auto 40px; vertical-align: middle; text-align: center; } .checkContents img#logo{ width:25%; margin:0 auto; border:none; } h1{ font-size:18px; font-weight:normal ; color:#fff; margin:0 auto 40px; text-align:center; background-color:#49ae89; } h2{ font-size:25px; text-align:center; } h2 span{ display:block; font-size:16px; } p.checkText{ text-align:center; } a { color: #555; text-decoration: underline; } a:hover { color: #555; text-decoration: underline; } input[type="submit"] { width: 80%; height: 50px; font-size:18px; background-color: #49ae89; border: none; color: #fff; -webkit-transition: background-color .2s; transition: background-color .2s; cursor: pointer; -webkit-appearance: none; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; } input[type="submit"]:hover { background-color: #ccc; } input[type="submit"][disabled] { background-color: #ccc; cursor: default; } </style> <script> $(function() { $('#submit').attr('disabled', 'disabled'); $('#check').click(function() { if ($(this).prop('checked') == false) { $('#submit').attr('disabled', 'disabled'); } else { $('#submit').removeAttr('disabled'); } }); }); </script> <script src="ChilliLibrary.js"></script> <script src="chilliController.js"></script> <script> /* login */ function getElement(e) { if(document.all) { return document.all[e]; } else { return document.getElementById(e); } } function toggle(obj) { var el = document.getElementById(obj); if (el.style.display != 'none') { el.style.display = 'none'; } else { el.style.display = ''; } } var last = 'login'; function toggleAuth(newauth, name) { toggle(newauth+'-form'); toggle(newauth+'-label'); toggle(last+'-form'); toggle(last+'-label'); last=newauth; } /* URL switch */ function getURLParam() { var vars = [], hash; var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); for(var i = 0; i <hashes.length; i++) { hash = hashes[i].split('='); vars.push(hash[0]); vars[hash[0]] = hash[1]; } return vars; } var response; window.onload = function() { response = getURLParam()["res"]; console.log(response); if (response == "notyet" || response == "logoff" || response == "failed") { $('#checkContents').css('display', 'table'); setTimeout(redirect, 3000); } else if (response == "success" || response == "already") { location.href = 'https://www.google.co.jp/'; } } </script> </head> <body> <div id="Contents"> <h1>認証ページ</h1> <div class="checkContents"> <h2>Free Wi-fi<span>Azione</span></h2> <img src="img/logo.png" id="logo" alt="ロゴ" ><br> <img src="img/wait_resize.gif" alt="loading" border="0" height="30" width="30"> </div> <p class="checkText"> <input type="checkbox" id="check" /> <label for="check"><a href="policy.html" target="_blank">利用規約</a>に同意します</label> </p> <div class="checkContents"> <form name="form" method="post" action="login.chi"> <input type="hidden" name="username" value="0000" /> <input type="hidden" name="password" value="0000" /> <p class="checkText"> <input type="submit" id="submit" value="送信" /> </p> </form> </div> </div> </body> </html>
③.cd /etc/chilli/www/
④.wget http://code.jquery.com/jquery-1.8.3.min.js
※.jquery-1.8.3.min.js をダウンロードします。
⑤.vi /etc/chilli/www/policy.html
※.サンプルの利用規約の情報です。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Cache-control" content="no-cache"/> <meta http-equiv="Pragma" content="no-cache"/> <title>利用規約</title> <style> html { font-family: "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, Meiryo, sans-serif; } body { margin: 0 auto; height: 100%; background: #fff; } #Contents{ width:100%; margin:0 auto; } h1{ font-size:18px; font-weight:normal ; color:#fff; margin:0; text-align:center; background-color:#49ae89; } h2{ font-size:25px; text-align:center; } a { color: #555; text-decoration: none; } a:hover { color: #555; text-decoration: none; } /* プライバシーポリシー */ h2#policy{ font-size:15px; } ol.policy{ font-size:10px; list-style: none; margin-left: -20px; } p#policyTxt, ol.policy:first-child{ width:95%; font-size:14px; margin:0 auto; } /* ボタン */ .commonBtn{ width: 80%; padding:11px 0; text-align:center; font-size:18px; margin:40px auto; background-color: #49ae89; border: none; color: #fff; -webkit-transition: background-color .2s; transition: background-color .2s; cursor: pointer; -webkit-appearance: none; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; } .commonBtn:hover { background-color: #ccc; } p.commonBtn a{ color:#fff; } </style> </head> <body> <div id="Contents"> <h1>利用規約</h1> <h2 id="policy">利用規約について</h2> <p id="policyTxt">この規約(以下「本規約」といいます。)は、株式会社○○○(以下「当社」といいます。)が提供する ○○○ に関するすべての製品およびサービス(以下「本サービス」といいます。)の利用に関する条件を、本サービスを利用するお客様(以下「お客様」といいます。)と当社との間で定めるものです。</p> <ol class="policy"> <li>1.利用規約</li> <li>サンプルテキストサンプルテキストサンプルテキスト</li> <li>サンプルテキストサンプルテキストサンプルテキスト</li> <li>サンプルテキストサンプルテキストサンプルテキスト</li> </ol> <ol class="policy"> <li>2.利用規約</li> <li>サンプルテキストサンプルテキストサンプルテキスト</li> <li>サンプルテキストサンプルテキストサンプルテキスト</li> <li>サンプルテキストサンプルテキストサンプルテキスト</li> </ol> <ol class="policy"> <li>3.利用規約</li> <li>サンプルテキストサンプルテキストサンプルテキスト</li> <li>サンプルテキストサンプルテキストサンプルテキスト</li> <li>サンプルテキストサンプルテキストサンプルテキスト</li> </ol> <p class="commonBtn"> <a href="login.html" >戻る</a> </p> </div><!-- Contents End --> </body> </html>
簡単な内容で作成していますので画像などは環境に合わせる必要があります