COUPLAGE DE ROUNDPIN AVEC ASTERISK

Publié le 7 décembre 2023 par berenger benam

Introduction :

Roundpin est un téléphone à navigateur multifonctionnel qui met en œuvre les appels audio/vidéo, la vidéoconférence et la messagerie texte cryptée à l'aide de SIP sur WebSocket et WebRTC. Il peut se connecter aux fournisseurs SIP via Asterisk ou directement.

Roundpin est destiné à être utilisé conjointement avec Asterisk, pour bénéficier du contrôle, de l'autonomie et des fonctionnalités avancées du PBX offertes par Asterisk. Cependant, il peut être utilisé sans Asterisk, si vous le connectez directement au fournisseur SIP (cela implique que le fournisseur SIP autorise les connexions directes à partir d'applications Web qui utilisent SIP sur WebSocket).

Partie I. Installation et Configuration de Roundpin & Asterisk

Installer Roundpin

Pour Installer roundpin, créez d’abord un nouveau répertoire :

#mkdir /var/www/roundpin.rtn.sn

Ensuite on se déplace dans le dossier /var/www/roundpin.rtn.sn

# cd /var/www/roundpin.rtn.sn

On télécharge roundpin via ce lien

#wget https://www.doublebastion.com/wp-content/uploads/2022/05/roundpin_v1_0_4.zip

Décompressez le fichier zip par la commande : unzip

# unzip roundpin_v1_0_4.zip

Modifier la propriété et les autorisations du répertoire et de son contenu :

Maintenant on peut supprimer le fichier zip pour éviter des ennuis après.

On supprime le fichier zip de roundpin

# chown -R www-data:www-data /var/www/roundpin.rtn.sn

# find /var/www/roundpin.rtn.sn -type d -exec chmod 750 {} +

On édite le fichier install-signup-check.php

On change les valeurs de :

$installcheck = true; a $installcheck = true;
$signupcheck = false; a $signupcheck = true;

Installation et configuration de Nginx pour Roundpin

# apt install nginx

# systemctl status nginx.service

Le serveur nginx tourne sans problème

Installation de certificat tinyca

# apt-get install tinyca

Utilisation de TinyCA

TinyCA (plus exactement TinyCA2) est développé en perl-GTK2. Il est disponible dans sa dernière version pour Debian, Ubuntu. Nous allons créer une CA, un certificat pour un serveur, un autre pour un client. Enfin, nous exporterons le nécessaire sous une forme que GNU/Linux aime : le format « pem ».

Création de la CA

Nous ouvrons TinyCA2 et demandons la création de la CA :

On remplit les champs

Dans l'exemple, notre organisation s'appelle « rtn » et notre domaine sera rtn.sn.

Le mot de passe saisi sera demandé à chaque validation de demande de certificat par la CA. Il faut bien sûr :

Le choisir solide ;
Ne pas l'oublier.

Prenez garde à la durée de validité. Une validité courte obligera à renouveler rapidement les certificats. La date de fin de validité de la CA impose une date de fin de validité inférieure ou égale à tous les certificats qu'elle approuvera.

Après avoir rempli et validé ce formulaire, il en vient un autre :

Cliquer sur Valider

Les options par défaut conviendront dans la plupart des cas. En cas de doute, consultez la documentation d'OpenSSL (rappelons-nous que je ne suis pas un spécialiste des PKI). Au bout du compte, nous disposons maintenant de notre CA, avec son certificat. Rappelons que celui-ci servira à authentifier les divers certificats que nous allons créer par la suite.

Certificat du serveur

Nous allons maintenant créer le certificat du serveur, ainsi que sa clé privée. « Nouveau certificat » :

On remplit les champs

Le serveur s'appelle serveur et se situe dans le domaine rtn.sn. Le mot de passe demander ici est destiné à protéger la clé privée qui va être générée, en cas de vol de cette dernière. Même si nous désirons en définitive utiliser une clé non protégée par mot de passe, ce qui est parfois nécessaire lorsque cette clé est manipulée par des logiciels (OpenVPN par exemple), nous devons ici saisir un mot de passe.

Le reste des informations est fourni par défaut. Il peut être préférable de choisir l'algorithme DSA, réputé plus solide, pour l'usage de la clé privée.

Nous allons maintenant faire signer cette requête par la CA, créant ainsi le certificat et la clé privée pour le serveur.

Prenez soin d'indiquer une durée de validité qui ne dépassera pas celle de la CA au moment où vous signez le certificat. De toutes manières, TinyCA vous alertera s'il y a dépassement de durée.

Le mot de passe demander ici est bien entendu celui que vous avez fourni lors de la création de la CA (celui que l'on a fait solide et que l'on n'a pas oublié).

Le certificat du serveur est créé, ainsi que sa clé privée. Nous finaliserons lors de l'exportation de tout ceci.

Certificat du client

La procédure est rigoureusement identique, hormis que l'on aura choisi de créer un certificat pour un client. Nous ne la détaillerons donc pas ici. Le client s'appelle berenger est se trouve dans le domaine rtn.sn.

Nous pouvons vérifier que les certificats et les clés privées sont bien créés et valides dans TinyCA aux onglets respectifs :

Export des clés et certificats

Une fois les certificats créés, nous devons les empaqueter dans des conteneurs normalisés. Il existe plusieurs formats de conteneurs, les plus couramment utilisés étant sans doute pem, der et pkcs#12.

pem comme pkcs#12 sont des conteneurs qui peuvent inclure non seulement le certificat x509 (avec la clé publique), mais également la clé privée associée, le tout protégé par un mot de passe, pour protéger la clé privée.

Nous allons utiliser ici le conteneur pem (Privacy Enhanced Mail), mais nous empaquèterons le certificat et la clé privée dans des conteneurs différents.

La CA d'abord

L'ordre n'a bien entendu pas d'importance, mais commençons par le plus simple, puisqu'ici il n'y aura pas de clé privée à exporter. Rappelons que la clé privée est « privée » et que celle de la CA ne doit pas quitter la CA. Il n'y a donc pas à l'exporter :

Commençons par le certificat. Nous travaillons toujours au format pem :

On entre le mot de passe

Voici le certificat et la clé

Configurer Nginx pour Roundpin

Ouvrez le fichier de configuration des blocs du serveur nginx pour le modifier ou bien créons notre propre fichier.

On se déplace dans le dossier /etc/nginx/sites-enabled/

# cd /etc/nginx/sites-enabled/

Voici le contenu du fichier roundpin-conf

server {
    listen  80;
    listen [::]:80;
    server_name roundpin.rtn.sn;
    return  301 https://roundpin.rtn.sn$request_uri;
  }
  
  server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
  
    server_name roundpin.rtn.sn;
    root /var/www/roundpin.rtn.sn;
    index index.php;
  
    ssl_certificate /etc/asterisk/keys/asterisk.pem;
    ssl_certificate_key /etc/asterisk/keys/asterisk.pem;
  #    ssl_trusted_certificate /etc/letsencrypt/live/cloud.rtn.sn/chain.pem;
  #   ssl_dhparam /etc/nginx/ssl/dhparam.pem;
  
    ssl_session_timeout 4h;
    ssl_session_cache shared:SSL:40m;
  
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
  
    ssl_stapling on;
    ssl_stapling_verify on;
    add_header Strict-Transport-Security "max-age=63072000" always;
    add_header X-Content-Type-Options nosniff;
    add_header X-Robots-Tag "noindex, nofollow, nosnippet, noarchive";
    fastcgi_hide_header X-Powered-By;
  
    add_header X-Frame-Options SAMEORIGIN;
  
    location = /robots.txt {
        allow all;
    }
  
    location ^~ /.well-known/acme-challenge {
        root /var/www;
    }
  
    location / {
       try_files $uri $uri/ /index.php?$args;
    }
  
    location ~ \.php$ {
       try_files $uri =404;
       fastcgi_split_path_info ^(.+\.php)(/.+)$;
       include fastcgi_params;
       fastcgi_index index.php;
       fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
       fastcgi_param HTTPS on;
       fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
    }
  
    location /restr {
       deny all;
    }
  
    location = /src/email-to-fax/send-email-attachment-as-fax.php {
       deny all;
    }
  
    access_log /var/log/sites/roundpin.rtn.sn/access.log;
    error_log  /var/log/nginx/roundpin.rtn.sn.error.log notice;
  }
  
  
  
  
 
 

On redémarre nginx

#systemctl restart nginx.service

Créons le répertoire des journaux d’accès

# mkdir -p /var/log/sites/roundpin.rtn.sn

On redémarre nginx

Exécutez l’Installation basée sur le Web

Utilisez mysql pour créer une base de données MariaDB (par exemple roundpindb), un utilisateur (par exemple roundpindbuser) et un mot de passe. Copiez ensuite le roundpin-setup.php_samp le fichier sous roundpinsetup.php et modifiez le propriétaire, comme ceci :

Ensuite on édite le fichier /etc/hosts pour faire la résolution de nom de domaine

# cp roundpin-setup.php_sample roundpin-setup.php

# chown www-data:www-data roundpin-setup.php

# sudo add-apt-repository ppa:ondrej/php

On met les deux options a true

# nano /etc/hosts

Cliquez sur Avancé…

Cliquez sur Accepter le risque et poursuivre

Voici l’interface de roundpin.

On se connecte à la base de donnée mysql pour créer la base dataroundpin et l’utilisateur berenger236

J’ai déjà installé mysql

#create database dataroundpin;

On se connecte à la base de donnée par use dataroundpin ;

On crée l’utilisateur berenger236

#create user berenger236 identified by 'Passer1234/';

Appliquons les privilèges au compte berenger236

#grant all privileges on *.* to berenger236;

# flush privileges;

Entrez le nom de la base de données, l'utilisateur de la base de données et le mot de passe de l'utilisateur de la base de données, puis cliquez sur "Suivant".

Dans le deuxième écran d'installation, entrez les informations d'identification du Superadmin : nom d'utilisateur, mot de passe, adresse e-mail. Cliquez ensuite sur 'Soumettre'.

Le troisième écran vous informe que l'installation est terminée

Après l'installation, le roundpin-setup.php fichier deviendra inaccessible. Si vous souhaitez y accéder à nouveau dans le navigateur et exécuter à nouveau le processus de configuration, vous devrez modifier manuellement le fichier et modifier à nouveau le paramètre.

Une fois l'installation terminée, il est recommandé de supprimer le fichier :/var/www/roundpin.rtn.sn/install-signupcheck.php $installcheck false a true

Il faut supprimer ce fichier roundpin-setup.php

#rm roundpin-setup.php

Ensuite, accédez à Roundpin et connectez-vous à l'aide du nom d'utilisateur et du mot de passe que vous avez configurés précédemment pour Superadmin : https://roundpin.rtn.sn

Maintenant on fait un tour dans la base de donnée pour vérifier les tables qu’il génère

Installation d'Asterisk

Asterisk est une solution de téléphonie sur IP open source. Développé par la société Digium, Il s'agit donc d'une solution gratuite avec une communauté très active. Asterisk est disponible sous Windows et Linux, même si la version Linux utilisée est de loin la moins rependue. Il fait office d'IPBX, mais il est aussi capable de s'interfacer avec un réseau de téléphonie analogique, à l'aide de cartes additionnelles. Un serveur Asterisk peut donc faire de la VoIP ainsi que de la téléphonie analogique.

L’Objectif de ce TP est de savoir installer convenablement Asterisk afin de bénéficier de quasiment toutes les fonctionnalités que nous offre ce logiciel.

Note : Ceci est une façon d'installer Asterisk parmi tant d'autres !

Infrastructure : Ubuntu 18.04

Installation des prérequis

# apt install libxml2-dev libxml2-utils libcurl4-openssl-dev libeditline-dev libsqlite3-dev curl autoconf gcc g++ build-essential linux-headers-$(uname -r) libssl-dev openssl libc-dev ncurses-dev

NB : Les paquets en installer pour avoir les codecs audio et vidéo opus et vp8 et vp9

On installe Opus le codec audio de la dernière génération.

Pour installer les codecs vidéos VP8 et VP9

ET aussi les deux paquets pour la partie sécurité

# libsrtp2-dev et libssl-dev

Télécharger l'archive Asterisk 18

Vous ne trouverez pas la dernière version d'Asterisk dans les dépôts système officiels. Nous devrons télécharger manuellement l'archive tar et créer l'application à partir des sources.

Utilisez la commande wget pour télécharger le fichier d'archive.

#wget http://downloads.asterisk.org/pub/telephony/asterisk/asterisk-18-current.tar.gz

Extraire le fichier avec tar dans le dossier /usr/local

#tar xvf asterisk-18-current.tar.gz -C /usr/local

On se déplace dans le dossier /usr/local/asterisk-18.17.0

Ensuite dans contrib/scripts

Exécutez la commande suivante pour télécharger la bibliothèque du décodeur mp3 dans l'arborescence source.
#./get_mp3_source.sh

Sortie d'exécution de commande attendue :

Assurez-vous que toutes les dépendances sont résolues :

./install_prereq install

Vous devriez recevoir un message de réussite à la fin :

Construisez et installez Asterisk 18 sur Ubuntu

Après l'installation des dépendances, vous devriez être prêt à construire Asterisk 18 à partir de la source que nous avons téléchargée.

Exécutez le script de configuration pour satisfaire les dépendances de construction.

Il faut reculer dans le dossier asterisk pour exécutez le script de configuration.

La sortie du scripte de configuration

Configurez les options du menu en exécutant la commande suivante :

#make menuselect

Utilisez les touches fléchées pour naviguer et la touche Entrée pour sélectionner.

Sélectionnez Addons à activer.

On coche le codec opus

Activez les modules de son Core que vous souhaitez utiliser.

Vous pouvez également ajouter des packages MOH supplémentaires que vous souhaitez utiliser.

Faites de même pour les forfaits Extra Sound.

Vous pouvez également parcourir les autres menus et sélectionner les options que vous jugez adaptées à votre cas d'utilisation.

Une fois terminé, exécutez la commande suivante pour compiler Asterisk 18 sur Ubuntu 18.04.

#make

Voici ma sortie de construction réussie :

Voici la commande que vous exécuterez pour installer Asterisk 18 sur Ubuntu :

#make install

Exemple de sortie :

#make samples

#make config

Redémarrez le service d'astérisque après avoir apporté les modifications :

# systemctl restart asterisk

Activer le service astérisque pour qu'il démarre au démarrage du système :

# systemctl enable asterisk

# asterisk -rvvvvvvvvv

Si vous avez un pare-feu ufw actif, ouvrez les ports http et les ports 5060,5061 :

# ufw allow proto tcp from any to any port 5060,506

Asterisk 18 est maintenant installé et fonctionne sur le serveur Linux Ubuntu 18.04.

Création de compte PJSIP

SIP (Session Initiation Protocol) est un protocole de signalisation souvent utilisé pour établir et terminer des sessions de communication multimédia, telles que des appels voix et vidéo sur IP. La vidéo conférence, la diffusion multimédia en continu, la messagerie instantanée, l'indication de présence et les jeux en ligne figurent parmi les autres exemples d'application potentielle. SIP est un protocole de type « requête-réponse », très similaire à deux autres protocoles Internet, HTTP et SMTP, qui correspondent respectivement aux protocoles sous-jacents du Web et du courrier électronique.

PJSIP est une pile de protocoles SIP Open Source écrite en C, conçue pour être très compacte, performante et très flexible. Le développement de PJSIP est principalement axé sur une pile SIP à faible encombrement, modulaire et très portable à des fins de développement intégré (bien qu'il soit également parfaitement adapté à Win32/Linux/MacOS).

Appel

Un appel téléphonique est l'opération de mise en connexion entre une personne qui utilise un téléphone et son ou ses destinataires. À la suite de la numérotation du numéro de téléphone de ce dernier sur le clavier de l'appareil émetteur, une sonnerie téléphonique retentit à destination jusqu'à ce que l'individu contacté accepte l'appel. La conversation téléphonique peut alors commencer, le plus souvent par la question « allô ? » Un appel téléphonique transite par un réseau téléphonique fixe ou un réseau cellulaire via des antennes-relais disposées quasiment partout dans le monde. Un interlocuteur peut contacter un autre interlocuteur situé à plusieurs milliers de kilomètres. Les appels téléphoniques représentent un marché majeur pour les opérateurs de télécommunications, l'un des principaux avec l'éventuel abonnement à leurs services: l'abonnement téléphonique et le marché de l'accès à Internet. Les appels sont le plus souvent facturés au client selon leur durée, la localisation du destinataire de l'appel et la qualité du numéro appelé, qui peut faire l'objet d'une tarification spéciale ou sous forme de forfaits.

Fichiers concernés : pjsip.conf et extensions.conf

Fonctionnement :

D’abord, avant d’utiliser pjsip.conf pour la création des comptes on doit s’assurer que le fichier sip.conf est arrêté. Si c’est pas arrêté, il faut aller dans le fichier modules.conf pour activer la prise en compte du pjsip.

# noload = chan_sip.so

On ajoute cette ligne.

Dans pjsip.conf , la création de comptes se fait comme suit :

On crée le compte 1001 aussi

On fait de même pour créer tout le reste des comptes :

Création d’un compte WebRTC(roundpin) avec PJSIP

Dans /etc/asterisk/pjsip.conf

Génération de certificats serveur

On utilise le script "ast_tls_cert" dans le répertoire source Asterisk "contrib/scripts" pour créer une autorité de certification auto-signée et un certificat Asterisk.

#./ast_tls_cert -C rtn.sn -O "RTN" -d /etc/asterisk/keys

On se déplace dans le dossier keys pour voir les certificats

Paramétrage d’asterisk pour qu’il utilise les certificats et l’hébergement de ctxphone dans asterisk

Dans le fichier : /etc/astersik/http.conf

#/etc/astersik/http.conf

ARI

ARI : une interface pour les applications de communication L'interface Asterisk RESTful (ARI) a été créée pour répondre à ces préoccupations. Alors qu'AMI est bon pour le contrôle des appels et AGI est bon pour permettre à un processus distant d'exécuter des applications de plan de numérotation, aucune de ces API n'a été conçue pour permettre à un développeur de créer sa propre application de communication personnalisée. ARI est une API asynchrone qui permet aux développeurs de créer des applications de communication en exposant les objets primitifs bruts dans Asterisk - canaux, ponts, points de terminaison, médias, etc. - via une interface REST intuitive. L'état des objets contrôlés par l'utilisateur est transmis via des événements JSON sur un WebSocket.

Fondamentaux de l'ARI

ARI se compose de trois pièces différentes qui sont - à toutes fins utiles - interdépendantes et utilisées ensemble. Ils sont:

Une interface RESTful qu'un client utilise pour contrôler les ressources dans Asterisk.
Un WebSocket qui transmet au client des événements au format JSON concernant les ressources d'Asterisk.
L’application de plan de numérotation Stasis qui transmet le contrôle d'un canal d'Asterisk au client.

Mise en œuvre d’ARI sous asterisk

Paramétrage d’ARI dans le fichier

#/etc/asterisk/ari.conf

Il faut créer le contexte d’asterisk.

[asterisk]

type=user

read_only=no

password=passer

On recharge asterisk en faisant core restart now.

#reload

On tape sur le navigateur : ari.asterisk.org pour avoir l’interface swagger d’asterisk.

Dans la barre api_key on renseigne le compte asterisk :passer exactement la même config dans ari.conf

Là on a l’interface swagger d’asterisk, on peut maintenant faire les tests.

On clique sur channels pour pouvoir mettre en communication deux utilisateur.

Voici notre interface :

Pour pouvoir mettre en communication deux utilisateurs : Endpoint : on met PJSIP/1002(l’utilisateur qui initie l’appel) Extensions : on met 1008(l’utilisateur qui reçoit l’appel) Priority : 1 (la première priorité) Apres on clique sur Try it out ! (Pour passer l’appel)

Le téléphone de 1002 sonne s’il décroche automatiquement l’appel est rediriger vers le compte 1008 (WebRTC)

Configuration de téléphone roundpin :

On va configurer le téléphone roundpin pour pouvoir effectuer des appels

On clique sur Save

On remarque que le compte 1008 s’est connecté.

TEST d’appel entre 1008 et 1000

1000 décroche le téléphone

Coté serveur on peut voir les appels entre 1008 et 1000

Comment personnaliser une image sur le profil des utilisateurs Roundpin

On clique sur Select File

On clique sur Save

On remarque que son profil à changer

Si on appelle Berenger sa photo affiche

Pour laisser un message vocal il suffit de cliquer sur l’option

Puis cliquer sur la flèche Transfert

On remarque que la musique d’attente entraine de jouée et pour réécouter le vocale il suffit de clique sur le bouton Play.

On peut voir le vocale en claire Ici

Pour afficher de détail sur la personne qui a laissé ce vocale on clique Ici.

Pour télécharger l’audio on clique sur cette flèche

On peut voir l’audio au format fichier

Pour faire le chat

Partie II. Mise en Place d’une Interface d’appel

On se connecte à la base de données et créer la base connexion

# create database connexion;

On se déplace dans la base de donnée connexion

# use connexion;

On crée la table étudiants et voici sa description

#desc etudiants;

Ensuite on insert le compte berenger pour gérer la page d’authentification

Ensuite créer un compte dans mon cas c’est berenger qui a tous les privilèges sur la base de données connexion.

On crée le dossier myprojet dans /var/www/html/

On crée le fichier de connexion.php et voici son contenu

J’ai créé un dossier logo et mettre une image pour ma page d’authentification

On crée le fichier déconnexion logout.php

Ensuite il faut créer le fichier index.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page de Connexion</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
  <style>
    body {
      background-color: #f8f9fa;
    }
    .login-container {
      max-width: 400px;
      margin: 0 auto;
      margin-top: 100px;
      padding: 40px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    }
    .login-form input[type="text"],
    .login-form input[type="password"] {
      border: none;
      border-bottom: 1px solid #ddd;
      outline: none;
      padding: 10px;
      margin-bottom: 20px;
      transition: border-color 0.3s;
    }
    .login-form input[type="text"]:focus,
    .login-form input[type="password"]:focus {
      border-color: #007bff;
    }
    .login-form button[type="submit"] {
      background-color: #007bff;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    .login-form button[type="submit"]:hover {
      background-color: #0056b3;
    }
    .login-form .form-check-label {
      color: #888;
      font-weight: normal;
    }
    .login-form .form-check-input:checked~.form-check-label {
      color: #007bff;
      font-weight: bold;
    }
    .login-form .form-check-input:checked~.form-check-label:before {
      content: '\f00c';
      font-family: 'FontAwesome';
      margin-right: 5px;
    }
    .login-form .form-check-input {
      display: none;
    }
    .company-logo {
      text-align: center;
      margin-bottom: 20px;
    }
    .company-logo img {
      width: 130px;
      height: auto;
      border-radius: 20%;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="login-container">
      <div class="company-logo">
        <img src="logo/admin.png" alt="Photo Berenger">
  </div>
     <h4 class="text-center mb-4 text-primary">Page d'Authentification</h4>
      <form class="login-form" method="POST" action="traitlogetudiant.php">
        <div class="mb-3">
          <input type="text" class="form-control" placeholder="Nom d'utilisateur" name="email">
        </div>
        <div class="mb-3">
          <input type="password" class="form-control" placeholder="Mot de passe" name="password">
        </div>
        <div class="mb-3">
        </div>
        <button type="submit" class="btn btn-primary btn-block" name="ok">Se Connecter</button>
      </form>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>


 
 

On crée le fichier style.css pour gérer le design

label {
    width: 150px;
    background: blue;
    text-align: center;
    margin: 6px;
    vertical-align: center;
    display: inline-block;
    font-size: 28px; 
   }
   input {
    width: 150px;
    display: inline-block;
    font-size: 28px; 
   }
   body{
     background-color: pink;
   }
   
  
 

On se déplace dans /usr/lib/cgi-bin/

#cd /usr/lib/cgi-bin/

On crée le fichier mis.py

#!/usr/bin/python3
# -*- coding: UTF-8 -*-
import cgi, cgitb
import requests
def call(appelant,appele):
    para="PJSIP/"+appelant
    params = (('endpoint', para),('extension', appele),('context', 'rtn'),('priority', '1'),('callerId', appelant),)
    response = requests.post('http://192.168.1.136:8088/ari/channels',params=params, auth=('asterisk', 'passer'))
print("Content-Type: text/html")
print()
print("<html><head><title>MISE EN CONYACT</title></head>")
print("<body>")
form = cgi.FieldStorage()
appelant = form.getvalue('appelant')
appele = form.getvalue('appele')
call(appelant,appele)
print("Appel en cours ...")
print("</body>")
print("</html>")

Ensuite dans /var/www/html/myprojet on crée le fichier myapp.php

<?php
session_start(); 
    if (!isset($_SESSION['user'])) {
      header('location:index.php');
      exit();
    }
?>
<!doctype html>
<html>
<head>
<title>demo ari cgi</title>
<style type="text/css">
body {
    background-color: pink;
}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="javascript:void(0)"><span>EC2LT</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="https://192.168.1.136:8089/static/master2/index.html">CTXPHONE</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://192.168.1.136/index.php">ROUNDPIN</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="logout.php">Deconnexion</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="Search">
        <button class="btn btn-primary" type="button">Search</button>
      </form>
    </div>
  </div>
</nav>
 <div class="container">
  <h1>Bienvenue Sur la Page d'Appel</h1> 
</div>
<div class=" p-3 mb-2 bg-primary text-white"><span>Interface D'appel Asterisk</span></div>
<div class="container col-lg-4 mt-2 col-md-2">
    <form name="pyform" method="POST" action="/cgi-bin/mis.py">
        <div class="mb-3">
            <label for="appelant" class="form-label">Appelant:</label>
            <input type="text" class="form-control" name="appelant" id="appelant">
        </div>
        <div class="mb-3">
            <label for="appele" class="form-label">Appele:</label>
            <input type="text" class="form-control" name="appele" id="appele">
        </div>
        <button type="submit" class="btn btn-dark btn-outline-primary">Appeler</button>
    </form><br><br>
</div>
</body>
</html>

Et le dernier fichier c’est traitlogetudiant.php

<?php
session_start();
include("connexion.php");
// lorsque le bouton valider a été cliqué
if (isset($_POST['ok'])) {
    $email = $_POST['email'];
    $password = $_POST['password'];
    // on sélectionne les etudiants avec une condition WHERE
    $select = $connexion->prepare("SELECT * FROM etudiants WHERE email = ? AND password = ?");
    $select->bindParam(1, $email);
    $select->bindParam(2, $password);
    $select->execute();
    $result = $select->fetch(PDO::FETCH_OBJ);
    // on vérifie si ça correspond avec un etudiant dans la bd
    if ($result && $result->profil == "admin"){
        if ($result->etat == 1){
            $_SESSION['user'] = $result;
            header('location:myapp.php');
        } else {
            $_SESSION['erreurLogin']="<strong>Erreur!! </strong>Votre Compte est Désactivé.<br> Veuillez Contacter l'Administrateur.";
            header('location:index.php');
        }
    } else {
        $_SESSION['erreurLogin'] = "<strong>Erreur!!</strong> Login ou Mot de Passe Incorrect!!!";
        header('location:index.php');
    }
}
?>