Création d’un lien de configuration pour SPA 1001 et similaire
Switzernet
Nicolas jorand
2009-08-12
Pour simplifier la configuration des équipements Linksys de type SPA 1001 ou similaires, il est possible de créer un lien en HTML/PHP. Cela va nous permettre de configurer notre appareil via une simple page web.
2) l’adresse IP
- Distinguer les champs de Line1 et ceux de Line2
Configuration à l’aide du lien
Création du fichier
Pour commencer, créez un nouveau fichier texte (clique droit->Nouveau->Document Texte). Donnez-lui un nom et modifiez l’extension .txt en .php.
Les éditeurs possibles pour pouvoir créer le lien sont, entre autres, Bloc-Notes et Notepad++. En utilisant Notepad++, on peut colorier le code en allant sous l’onglet Langage -> PHP. Cela le rendra plus lisible. Ouvrez donc ce fichier.php à l’aide d’un de ces deux logiciels.
Au départ, on a toujours la même structure :
<html>
<head>
<!-- à remplir -->
</head>
<body>
<!-- à remplir -->
</body>
</html>
<head> : cette balise "ouvre" la partie qui contient les informations d’entête de la page web, dans notre cas ça sera un script écrit en javascript.
<body> : celle-ci contient le contenu de la page web, c’est également ici qu’on aura du code en PHP.
</ … > : cela signifie que l’on "ferme" une partie
Pour l’instant, copiez ces quelques lignes.
Partie <body>
(On va commencer par la partie <body>, on verra la partie <head> plus tard. Laissez donc celle-ci vide pour le moment).
Comme son nom l’indique, c’est le corps du document. C’est ici que l’on va définir les valeurs utilisées pour configurer l’appareil. Voici le code qui se trouve dans <body> pour le model SPA 1001 :
<body>
<?php
$usr=$_GET["usr"];
$pwd=$_GET["pwd"];
$sip=$_GET["sip"];
$view=$_GET["view"];
?>
IP Address of SPA1001 adapter:
<form name=ip method=post>
<input name=addr value="192.168.1.xxx">
</form>
<form name=config action="" method=POST target=voip_spa1001>
<input <?php if($view!=1) echo "type=hidden"; ?> name=21359 value="<?php echo $sip; ?>">
<input <?php if($view!=1) echo "type=hidden"; ?> name=20591 value=600>
<input <?php if($view!=1) echo "type=hidden"; ?> name=20527 value="<?php echo $usr; ?>">
<input <?php if($view!=1) echo "type=hidden"; ?> name=20719 value="<?php echo $usr; ?>">
<input <?php if($view!=1) echo "type=hidden"; ?> name=P20655 value="<?php echo $pwd; ?>">
<input <?php if($view!=1) echo "type=hidden"; ?> name=16623 value=G711u>
<input <?php if($view!=1) echo "type=hidden"; ?> name=16751 value=0>
<br>
<input <?php if($view!=1) echo "type=hidden"; ?> name=33071 value="time.nist.gov">
<input <?php if($view!=1) echo "type=hidden"; ?> name=43183 value="GMT+01:00">
<input <?php if($view!=1) echo "type=hidden"; ?> name=5422 value="start=3/24/7/02:0:0;end=10/24/7/02:0:0;save=1">
<br>
<input type=submit value=Configure onclick=action_and_place()>
</form>
</body>
On peut séparer ce bloc en trois parties, 1) les variables, 2) l’adresse IP de l’appareil et 3) la configuration.
1) les variables
$xxx : est une variable à laquelle on va donner une valeur
$_GET["yyy"] : est une méthode qui permet de récupérer la valeur contenue par yyy
yyy : est un des paramètres qui se trouve dans l’URL
Cette partie est du code PHP, car entourée de < ?php et ?>. C’est les valeurs qui sont à configurer et qui change d’un appareil à l’autre, comme l’identifiant du compte (usr), le mot de passe (pwd) et le serveur SIP utilisé (sip). Ces informations sont des paramètres contenus directement dans l’URL, comme nous le montre l’exemple suivant :
Ici on voit que l’identifiant est 1234567890 avec le mot de passe abcdef et qu’on utilise le serveur sip15.
En fait, si on regarde la ligne $pwd=$_GET["pwd"];, cela veut dire : « Je prend la valeur du champ pwd de l’URL (donc abcdef) et je la mets dans la variable $pwd »
Remarques : - Si d’autres paramètres doivent être ajouté, il suffit de déclarer une nouvelle variable : $nomVariable=$_GET["nom_dans_url"]
- l’utilité de la variable $view est décrite dans la partie 3) la configuration.
2) l’adresse IP
Pour la saisie de l’adresse IP de l’appareil, on utilise un formulaire. Dans notre cas, ça sera une zone de saisie :
|
|
Dans <form … >, il y a deux paramètres à définir :
- name, le nom que l’on veut donner au formulaire
- methode, il y a POST et GET
Dans <input … >, il y a également deux paramètres :
- name, nom du champ
- value, sa valeur
Cette partie va donc ajouter cette zone de saisie pour l’adresse IP de l’appareil. La valeur par défaut est 192.168.1.xxx, il suffit de compléter le dernier nombre symbolisé par les xxx avec la vraie valeur que l’on obtient à partir des réglages de l’appareil. Si vous ne savez pas comment l’obtenir, allez dans l’aide de configuration de votre appareil à la page http://switzernet.com/public/070723-config_UA/
3) la configuration
Il faut maintenant faire la configuration de l’appareil. Comme pour l’adresse IP, on va utiliser un formulaire pour remplir les champs à configurer. On a donc un form avec des input à l’intérieur.
Dans <form … >, il y a deux nouveaux paramètres :
- action, dans lequel on met l’URL de la page web que l’on veut ouvrir. Dans notre cas "", car celle-ci sera définie dans le script en java se trouvant dans la partie <head>.
- target, fenêtre dans laquelle on veut écrire ces informations. La page web qui va s’ouvrir avec action, sera dans une nouvelle fenêtre qui a pour nom voip_spa1001.
Il y a aussi de nouveaux paramètres qui apparaissent dans <input … > :
- <?php if($view!=1) echo "type=hidden"; ?>, pour rendre la page plus lisible tous les champs sont masqués. Donc si la valeur de $view est différente de 1, les champs ne s’affiche pas à l’écran. Pour qu’ils soient visibles, il faut ajouter un paramètre view=1 dans l’URL.
- type, ici nous voulons avoir un bouton pour configurer l’appareil. On va donc utiliser submit qui va créer ce bouton.
- onclick, en pressant le bouton on va exécuter la méthode action_and_place() qui se trouve dans le script java.
Les champs à configurer
Pour savoir quels champs il faut configurer, allez sur le site http://switzernet.com/public/070723-config_UA/ et choisissez le model que vous utilisez. Ces champs sont encadrés en rouge, dans l’exemple du SPA 1001 on a :
- Proxy
- Register Expires
- Display Name
- User ID
- Password
- Preffered Codec
- Use Pref Codec Only
- Primary NTP Server
- Time Zone
- Dayligth Saving Time Rule
Cette fois-ci ce n’est pas nous qui définissons le nom du champ (paramètre name des input), mais nous devons le chercher dans le code source de la page de configuration. De plus, comme nous pouvons le constater, le nom du champ n’est pas très explicite. En effet, si on prend le cas de Proxy, on voit que le nom qui lui est attribué est 21359. En fait chaque champ possède un nom qui apparaît à l’écran (comme ceux cités ci-dessus) qui lui-même possède un nom de référence dans le code (dans notre cas c’est un numéro). C’est ce dernier qui nous intéresse.
Trouver le nom des champs
Pour récupérer ces noms de champ (numéro), il faut aller à la page de configuration de l’appareil. Pour ceci, tapez l’adresse IP de l’appareil dans la barre d’adresse de votre navigateur (http://192.168.1.xxx). Pour avoir accès à tous les champs de configuration, il faut se mettre en administrateur et en mode advanced. Cliquez donc sur Admin Login et advanced en haut à gauche de la page :
Maintenant il faut aller dans le code source de cette page et chercher le nom du champ que l’on veut configurer. Pour ceci, clique droit sur la page puis View Source. Et voilà ce qui apparaît :
Dans tout ce code il va falloir trouver ce nom. Faites Ctrl+f pour lancer une recherche et tapez le nom du champ qui apparaît sur la page web de configuration, comme par exemple Proxy, User ID, etc… Puis appuyez sur Enter. Il se peut que le mot recherché apparaisse plusieurs fois dans le code, il faut donc en plus trouver la bonne ligne.
Prenons l’exemple de Proxy :
1) on lance la recherche de ce mot dans le code (Ctrl+f, saisie du mot recherché et Enter)
2) il faut maintenant trouver la bonne ligne. Regardez sur la page web de configuration quel est le nom exacte qui apparaît et rechercher la ligne dans le code source qui correspond :
On voit que celui-ci est entouré de la balise <td>. Il faut vraiment avoir <td>Proxy:<td>, si entre les deux <td> il y a autre chose c’est que ce n’est pas la ligne que l’on recherche. Un peu plus loin il y a deux informations qui nous intéressent, name (le nom de référence que l’on recherche) et value (sa valeur actuelle, ici il est vide).
Pour certain model, il est possible de configurer deux lignes téléphoniques, comme pour le PAP2T et le PAP2. Par contre le SPA1001 peut être configuré avec seulement une ligne. La page web de configuration ne changeant pas suivant le model (une ou deux lignes), on aura donc dans le code source de la page deux fois la ligne en surbrillance ci-dessus, mais avec un name différent. Pour trouver la bonne ligne aller à Distinguer les champs de Line1 et ceux de Line2.
3) Une fois le name récupéré, on peut écrire le input dans notre code. Continuons cet exemple avec Proxy, la ligne à écrire est la suivante :
<input <?php if($view!=1) echo "type=hidden"; ?> name=21359 value="<?php echo $sip; ?>">
Précédemment, on a vu que la valeur du Proxy était une variable (dans du code PHP) donnée en paramètre dans l’URL. Pour la récupérer, il faut de nouveau faire appel au PHP : < ?php … ?>. La variable dans laquelle cette valeur est contenue est $sip.
Pour d’autres champs la valeur est fixe, dans ce cas on aura value=xxx. Comme pour Register Expires, on a :
<input <?php if($view!=1) echo "type=hidden"; ?> name=20591 value=600>
Pour savoir quelle valeur mettre, référez-vous à la Configuration Switzernet de votre appareil sur le site http://switzernet.com/public/070723-config_UA/
Distinguer les champs de Line1 et ceux de Line2
Pour ces models, on a les onglets suivants sur la page de configurations :
Quand on va faire la recherche, on va trouver ceci :
Et
On voit que dans ces deux lignes en surbrillance seule la valeur de name change. Comment savoir laquelle concerne la configuration de Line 1 et laquelle concerne Line 2 ? Le plus simple et pour être sûr de ne pas se tromper, il suffit d’aller dans l’onglet Line 1 et de remplir le champ avec quelque chose. Ne pas oublier de sauver la modification (bouton Submit All Changes en bas de page).
Comme on vient de modifier la valeur d’un champ, le code source a lui aussi changé et il faut donc le rouvrir. Fermez donc la fenêtre contenant l’ancien code source et ouvrez le nouveau (clique droit -> View Source). En effectuant la même recherche que précédemment, on va obtenir :
Et
On peut en déduire que pour Line 1, le name du champ Proxy est 21359, car on a value=abcd1234 (donc ce qu’on a entré). Et que pour Line 2, le name de ce même champ est 879, car value est toujours vide.
Partie <head>
Comme expliqué au tout début, dans cette partie d’entête on a du javascript. Il nous est utile, car l’adresse IP de chaque appareil est différente. Nous ne connaissons donc pas l’URL de configuration à l’avance. Voici le code de ce script :
<head>
<script type="text/javascript">
function setAction(){
var a=document.forms.ip
var b=document.forms.config
var ua="http://"+a.addr.value+"/"
b.action=ua+"admin/asipura.spa"
}
function action_and_place(){
window.open('','voip_spa1001',
'width=100,height=300,toolbar=no,location=no,directories=no,'+
'status=no,menubar=no,scrollbars=no,copyhistory=no,resizable=yes,'+
'top=0,left=0');
setAction();
}
</script>
</head>
Le code qui suit la balise <script … > est écrit en javascript, car c’est ce que l’on a spécifié dans type. Il y a deux fonctions : action_and_place() et setAction().
La première, action_and_place, s’occupe d’ouvrir une nouvelle fenêtre qui a pour nom voip_spa1001 avec la méthode window.open. Vous pouvez remarquer que ce nom est le même que celui du target dans le deuxième form du <body>. Donc tout ce qu’on a configuré dans ce form sera envoyé à la fenêtre appelée voip_spa1001. Ce qui suit, width=100,height=300,… , concerne les caractéristiques de la fenêtre qui est ouverte. Pour finir, on appel la seconde fonction : setAction().
Cette deuxième fonction va définir l’action, donc l’URL de la page de configuration.
- var a=document.forms.ip : on a une variable a qui est une référence/raccourci à la form <form name=ip …
- var b=document.forms.config : on a une variable b qui est une référence/raccourci à la form <form name=config …
- var ua="http://"+a.addr.value+"/" : on a une variable ua qui est la concaténation entre http:// et la valeur du champ addr de la form référencée par a, http://192.168.1.xxx/
- et enfin, b.action=ua+"admin/asipura.spa" : qui ouvre l’URL où les champs doivent être configurés. Pour l’obtenir aller sur http://192.168.1.xxx/, en bas de page faites un Submit All Changes. Vous aurez l’affichage suivant et vous aurez l’URL à utiliser :
Programme complet
Voici au final le programme complet pour créer le lien de configuration pour le model SPA 1001 :
<html>
<head>
<script type="text/javascript">
function setAction(){
var a=document.forms.ip
var b=document.forms.config
var ua="http://"+a.addr.value+"/"
b.action=ua+"admin/asipura.spa"
}
function action_and_place(){
window.open('','voip_spa1001',
'width=100,height=300,toolbar=no,location=no,directories=no,'+
'status=no,menubar=no,scrollbars=no,copyhistory=no,resizable=yes,'+
'top=0,left=0');
setAction();
}
</script>
</head>
<body>
<?php
$usr=$_GET["usr"];
$pwd=$_GET["pwd"];
$sip=$_GET["sip"];
$view=$_GET["view"];
?>
IP Address of SPA1001 adapter:
<form name=ip method=post>
<input name=addr value="192.168.1.xxx">
</form>
<form name=config action="" method=POST target=voip_spa1001>
<input <?php if($view!=1) echo "type=hidden"; ?> name=21359 value="<?php echo $sip; ?>">
<input <?php if($view!=1) echo "type=hidden"; ?> name=20591 value=600>
<input <?php if($view!=1) echo "type=hidden"; ?> name=20527 value="<?php echo $usr; ?>">
<input <?php if($view!=1) echo "type=hidden"; ?> name=20719 value="<?php echo $usr; ?>">
<input <?php if($view!=1) echo "type=hidden"; ?> name=P20655 value="<?php echo $pwd; ?>">
<input <?php if($view!=1) echo "type=hidden"; ?> name=16623 value=G711u>
<input <?php if($view!=1) echo "type=hidden"; ?> name=16751 value=0>
<br>
<input <?php if($view!=1) echo "type=hidden"; ?> name=33071 value="time.nist.gov">
<input <?php if($view!=1) echo "type=hidden"; ?> name=43183 value="GMT+01:00">
<input <?php if($view!=1) echo "type=hidden"; ?> name=5422 value="start=3/24/7/02:0:0;end=10/24/7/02:0:0;save=1">
<br>
<input type=submit value=Configure onclick=action_and_place()>
</form>
</body>
</html>
Configuration à l’aide du lien
Le lien a la forme suivante :
Pour configurer votre appareil, cliquez sur celui-ci ou copiez-le dans la barre d’adresse de votre navigateur :
Il faut maintenant entrer vos propre User ID, Password et Proxy. Supprimez ceux de cette exemple et tapez les votre, puis faites Enter :
Pour l’exemple qui suit on va prendre usr=1234567890, pwd=abcdef et sip=sip15.youroute.net. Dans cette page, il faut saisir l’adresse IP de votre appareil. Si vous ne savez pas comment la récupérer, allez dans l’aide de configuration de votre appareil à la page http://switzernet.com/public/070723-config_UA/
Il ne reste plus qu’à appuyer sur Configure. Cela a pour effet d’ouvrir une nouvelle fenêtre comme celle-ci-dessous. Si ce n’est pas le cas, vérifiez que vous pouvez accéder à la configuration de l’appareil en tapant l’adresse IP directement dans la barre d’adresse de votre navigateur. Si cela ne fonctionne pas non plus, débranchez puis rebranchez le tout et réessayez :
Au bout de quelques secondes, elle doit afficher ceci :
Et enfin, vous pouvez vérifier que les informations que vous avez configurées sont correctes.
Remarque : Si on a auparavant modifié d’autres champs que Les champs à configurer et que l’on configure l’appareil avec le lien, ceux-ci garde leur valeur. La valeur n’est pas changé, pas de reset ou de remise à la valeur d’origine.
Affichage sans view
Dans l’explication ci-dessus, on a l’affichage sans le view dans l’URL :
Affichage avec view
Si on ajoute &view=1 dans l’URL, tous les champs que l’on configure qui n’était pas visible apparaissent :
Références
Lien vers la version Word de ce document [doc]
* * *