web-dev-qa-db-ja.com

pfSenseキャプティブポータルページに「条件に同意する」を要求しますか?

ネットワーク上にゲストwifi VLANがあり、他のVLANと通信できず、特定のポートを介してのみインターネットと通信できます。

ネットワークセグメントに「キャプティブポータル」を設定して、ゲストが特定の利用規約に同意することを示すテキストボックスをクリックしてから、ボタンをクリックしてゲスト経由でインターネットに引き続きアクセスできるようにしようとしています。 Wi-Fi。

しかし、私は少し立ち往生しています。「キャプティブポータル」の部分を構成しましたが、ユーザーに条件に同意するように促すように実際のページを構成する方法がわかりません。 、接続をキャンセルします。

誰かがこれをどこから始めるべきかについて少しのガイダンスを提供することができますか?

1
Thomas Ward

.htmlファイルを作成してから、pfSenseGUI内のキャプティブポータルページのアップロードボタンを使用してファイルをファイアウォールにアップロードする必要があります。

HTMLサンプルの場合、試してみることができます pfSenseフォーラムトピック サンプルHTMLがあります:

<style type="text/css">
<!--
.style3 {
   color: #FFFFFF;
   font-weight: bold;
   font-family: Arial, Helvetica, sans-serif;
}
.style4 {
   font-family: Arial, Helvetica, sans-serif;
   font-style: italic;
}
.style6 {color: #000099}
-->
</style>



<p align="center"><img src="logo.gif" width="200" height="150"></p>
<div align="center">
  <table width="300" border="1">
    <tr>
      <td bgcolor="#066BBC"><div align="center" class="style3">LOGIN - PORTAL </div></td>
    </tr>
  </table>
</div>
<p align="center">&nbsp;</p>
<div align="center">
  <table width="300" border="1" bgcolor="#ACCED8">
    <tr>
      <td>
        <form method="post" action="$PORTAL_ACTION$">
          <p>&nbsp; </p>
     <p align="left" class="style4"><span class="style6">User</span>
       <input name="auth_user" type="text" size="15">
         </p>
     <p align="left" class="style4"><span class="style6">Password</span>   
       <input name="auth_pass" type="password" size="15">
       <input name="redirurl" type="hidden" value="$PORTAL_REDIRURL$">
     </p>
     <p align="center">
       <span class="style4">
       <input name="accept" type="submit" value="Validar">
       </span> </p>
     <p>&nbsp;</p>
     </form>   </td>
    </tr>
  </table>
</div>
<p align="center">&nbsp;</p>

または、 PFsenseでのキャプティブポータルログインページのカスタマイズ の手順を試すことができます。

その中で最も関連性の高い部分は、はるかに洗練されたサンプルHTMLです。

<!----------------------Start Here-------------------------------------------------------------------->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>(Company Name Here) Hotspot - Secure Access!</title>
<style type="text/css">
body {
 background-color: #000;
}
.offer {
 font-size: 24px;
 color: #F00;
 text-align: center;
}
.bolder {
 border: 1px solid #FFF;
}
.copyright {
 font-size: 12px;
 text-align: center;
 color: #FFF;
}
.button {
 font-size: 16px;
 font-weight: bold;
}
body,td,th {
 color: #6FF;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 16px;
}
</style>
</head>

 <title>Secure Access - Login</title>
<body>
  <form method="post" action="$PORTAL_ACTION$">
  <input name="redirurl" type="hidden" value="$PORTAL_REDIRURL$">
    <center>
   <table cellpadding="6" cellspacing="0" width="780" height="380" style="border:1px solid #000000">
     <tr height="10" bgcolor="#990000">
      <td align="center" style="border-bottom:1px solid #000000">
       <font color='white'>
        <b>
         Welcome to (Your Company Here) Hotspot
        </b></font></td>
     </tr>
     <tr>
      <td>
       <div id="mainlevel">
        <center>
         <table width="100%" border="0" cellpadding="5" cellspacing="0">
          <tr>
           <td>
            <center>
             <div id="mainarea">
              <center>
               <table width="100%" border="0" cellpadding="5" cellspacing="5">
                <tr>
                 <td>
                  <div id="maindivarea">
                   <center>
                    <div id='statusbox'>
                     <font color='red' face='arial' size='+2'>
                      <b>

                      </b>
                     </font>
                    To gain access through the internet, Please enter your Username and Password or Voucher Code.<br><br>
                     If you have any difficulties you may contact our technical support technician at (Tel. No Here)<br></div>
                    <br/>
                    <div id='loginbox'>
                     <table>
                        <tr>
                          <td align="right">&nbsp;</td>
                          <td>Members Only</td>
                          </tr>
                        <tr><td align="right">Username:</td><td><input name="auth_user" type="text"></td></tr>
                        <tr><td align="right">Password:</td><td><input name="auth_pass" type="password"></td></tr>
                        <tr>
                          <td colspan="2" align="right">&nbsp;</td>
                          </tr>
                        <tr>
                          <td align="right">&nbsp;</td>
                          <td>Prepaid User</td></tr>
                                                                                      <tr>
                                                                                        <td align="right">Voucher Code:</td>
                                                                                        <td><input name="auth_voucher" type="text"></td>
                                                                                      </tr>
                                                                                      <tr>
                                                                                         <td align="right">&nbsp;</td>
                                                                                         <td><input name="accept" type="submit" class="button" value="Continue"></td>
                                                                                      </tr>
                                                                                      <tr>
                                                                                        <td align="right"></td><td></td></tr>
                     </table><br />
                                                                                    <hr />
                     <table width="600" border="0">
                       <tr>
                         <td colspan="5"><h2 class="offer">SERVICES OFFER!</h2></td>
                          </tr>
                       <tr>
                         <td colspan="5">&nbsp;</td>
                          </tr>
                       <tr>
                         <td colspan="2" class="bolder">Prepaid</td>
                         <td width="87">&nbsp;</td>
                         <td colspan="2" class="bolder">Unlimited Surfing - up to 4 Mbps</td>
                          </tr>
                       <tr>
                         <td width="150" class="bolder" align="left">1 Hour</td>
                         <td width="99" class="bolder" align="left">USD 1.00</td>
                         <td>&nbsp;</td>
                         <td width="142" class="bolder" align="left">1 Day</td>
                         <td width="100" class="bolder" align="left">USD 10.00</td>
                          </tr>
                       <tr>
                         <td class="bolder" align="left">3 Hours</td>
                         <td class="bolder" align="left">USD 2.00</td>
                         <td>&nbsp;</td>
                         <td class="bolder" align="left">7 Week</td>
                         <td class="bolder" align="left">USD 50.00</td>
                          </tr>
                       <tr>
                         <td class="bolder" align="left">5 Hours</td>
                         <td class="bolder" align="left">USD 4.00</td>
                         <td>&nbsp;</td>
                         <td class="bolder" align="left">1 Month</td>
                         <td class="bolder">USD 150.00</td>
                          </tr>
                       <tr>
                         <td colspan="5">&nbsp;</td>
                          </tr>
                       <tr>
                         <td colspan="5" class="offer"><h2 class="offer">OTHER SERVICE!</h2></td>
                          </tr>
                       <tr>
                         <td class="bolder" align="left">Reformatting</td>
                         <td class="bolder" align="left">USD 100.00</td>
                         <td>&nbsp;</td>
                         <td class="bolder" align="left">PC Maintenance</td>
                         <td class="bolder" align="left">USD 80.00</td>
                          </tr>
                       <tr>
                         <td class="bolder" align="left">Apps Installation</td>
                         <td class="bolder" align="left">USD 50.00</td>
                         <td>&nbsp;</td>
                         <td class="bolder" align="left">PC Upgrade</td>
                         <td class="bolder" align="left">USD 85.00</td>
                          </tr>
                       <tr>
                         <td class="bolder" align="left">PC / Laptop repair</td>
                         <td class="bolder" align="left">USD 100.00</td>
                         <td>&nbsp;</td>
                         <td class="bolder" align="left">Games</td>
                         <td class="bolder" align="left">USD 30.00</td>
                          </tr>
                       <tr>
                         <td colspan="5">&nbsp;</td>
                          </tr>
                      </table>
                      <p>&nbsp;</p>
                                                                              </div>
                   </center>
                  </div>
                 </td>
                </tr>
               </table>
              </center>
             </div>
            </center>
           </td>
          </tr>
         </table>
        </center>
       </div>
      </td>
     </tr>
                    <tr height="10" bgcolor="#990000">
      <td align="center" style="border-bottom:1px solid #000000">
        <p><font color='white'>
          <b>
            ©Copyright 2013 (Your Company Here) Hotspot. All Rights Reserved.
 </b></font><br />
 Created By: <a href="http://pfsense-tutorial.blogspot.com">Benjamin S. Roca Jr</a>. </p></td>
     </tr>
     </table>
   </center>
</form>
</body>
</html>
2