1

У меня есть гостевая Wi-Fi VLAN в моей сети, которая не может взаимодействовать с другими VLAN и может выходить в Интернет только через определенные порты.

Я пытаюсь настроить «Captive Portal» в сегменте сети, чтобы гости могли щелкнуть текстовое поле, подтверждающее, что они согласны с определенными условиями использования, а затем нажать кнопку, чтобы продолжить получать доступ к Интернету через гостя. Wi-Fi.

Тем не менее, я немного застрял. У меня настроена часть 'портала портала', но я не знаю, как настроить настоящую страницу так, чтобы она предлагала пользователю принять условия, а если нет, отменила подключение.

Кто-нибудь может дать небольшое руководство о том, с чего начать?

|источник

1 ответ1

2

Вам нужно создать файл .html, а затем использовать кнопку загрузки на странице Captive Portal в графическом интерфейсе pfSense, чтобы загрузить файл в брандмауэр.

Для примеров 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>

Или вы можете попробовать инструкции на странице настройки страницы входа в Captive Portal на 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>
|источник

Всё ещё ищете ответ? Посмотрите другие вопросы с метками .