Captive Portal(ログイン画面作成)

Captive Portal(CoovaChilli)のログイン画面の場合は

USERIDPASSWORD を入力する必要があったので

認証にチェックを付けるだけで利用出来るように改造した時のメモ書きです。

また、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>

簡単な内容で作成していますので画像などは環境に合わせる必要があります

コメントを残す

サブコンテンツ

カレンダー

2017年10月
« 3月    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

賢威

電脳卸

天気予報


-天気予報コム-

お奨め情報

COUNTER

合計:64902
本日:811
昨日:53
訪問者:0

このページの先頭へ