Demande d'évolution : ajout de paramètres pour envoi de SMS avec OVH

[cleneveu]

Bonjour,

Est-ce possible de rajouter les properties suivantes dans le cas d'envoi de SMS avec OVH :

• senderForResponse: false ==> permet de mettre un nom alpha numerique en sender au mieu d'un numéro court
• noStopClause: true ==> désactive la possibilité de répondre au SMS

En pratique dans application.yml avec le service OVH on aurait comme paramétrage :

sms:
    enable-sms : true
    service-name: OVH
    url: UN_URL # peu importe ça ne sert pas ici
    username: ECM # le nom en alpha numérique du sender déclaré chez OVH, ECM dans notre cas 
    consumerKey: MON_CONSUMMER_KEY 
    apiKey: MON_API_KEY
    password: MON_API_SECRET # cas OVH
    senderForResponse: false
    noStopClause: true

Dans OVHSmsService.java ça donnerait pour la méthode sendSms:

    @Override
    public void sendSms(String phoneNumber, String message) throws EsupSignatureRuntimeException {
        String METHOD = "POST";
        try {
            String ServiceName = objectMapper.readValue(getSmsAccount(), String[].class)[0];
            URL    QUERY  = new URI("https://eu.api.ovh.com/1.0/sms/"+ServiceName+"/jobs").toURL();
            String BODY   = "{\"receivers\":[\"+33" + phoneNumber.substring(1, 10) + "\"],\"message\":\""+ message + "\",\"priority\":\"high\",\"senderForResponse\":"+smsProperties.getSenderForResponse()+",\"sender\":\""+smsProperties.getUsername()+"\",\"noStopClause\":"+smsProperties.getSenderForResponse()+"}";
            StringBuffer response = getStringBuffer(METHOD, QUERY, BODY,  true);
            logger.info("sms sended : " + response.toString());
        } catch (IOException | URISyntaxException e) {
            throw new EsupSignatureRuntimeException(e.getMessage(), e);
        }

    }

J'ai testé (en test unitaire) et ça fonctionne bien.

Bonne journée

Clément

Centrale Med.

[dlemaignent]

Bonjour,
Pas de problème pour ajouter ces paramètres. Je me pose la question du +33 qui limite l'usage du connecteur ovh à la france seule. Je me demande s'il serait possible de le supprimer pour qu'il soit saisi directement au niveau du champ numéro de mobile ?

[cleneveu]

Bonjour David,
D'abord merci pour l'ajout des paramètres. C'est aussi une bonne idée de ne pas coder le +33 en dur par contre ça suppose :

• d'avoir quand même un indicatif par défaut (aussi dans les properties)
• de pouvoir sélectionner un pays d'envoi dans l'interface afin d'avoir l'indicatif dudit pays.

Bref c'est un peu plus de boulot, cela étant il nous arrive d'avoir, par exemple, des stages à l'étranger et donc potentiellement des conventions de stage à faire signer à des résidents étrangers. Donc l'évolution serait en effet utile.

[cleneveu]

J'ajoute que je suis tombé sur ce projet : https://github.com/jackocnr/intl-tel-input?tab=readme-ov-file#demo-and-examples
Qui doit répondre pas mal à la problématique du n° de tel, si ça permet d'aller plus vite :)

[cleneveu]

Re,
J'ajoute (encore) que j'ai tésté l'affichage dudit module dans l'interface de saisie d'un extérieur, sans aller jusqu'à l'envoi du SMS toutefois et ça semble bien fonctionner :

Dans le pom.xml :

		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>intl-tel-input</artifactId>
			<version>21.1.0</version>
		</dependency>

Dans le head.html :

....
		<link rel="stylesheet" th:href="@{/webjars/intl-tel-input/css/intlTelInput.css}" />
....
		<script th:src="@{/webjars/intl-tel-input/js/intlTelInput.js}"></script>

Dans SelectUser.js :

    appendTempUser(e) {
        let name = '#tempUsers-' + this.selectField.attr("id");
        let tempUsersDiv = $(name);
        if(e.phone == null) {
            e.phone = "";
        }
        let alertPhoneMessage = "<div id=\"output_div_"+e.id+"\" class=\"alert alert-phone\"><span id=\"output_"+e.id+"\" class=\"closebtn\" onclick=\"this.parentElement.style.display='none';\">&times;Merci de saisir un numéro valide.</span></div>"
        if(this.globalProperties.smsRequired) {
            tempUsersDiv.append(
                "<div class='alert alert-primary' id='recipient_" + e.email + "'>" +
                "<b>Destinataire externe : <span>" + e.email + "</span></b>" +
                "<input id=\"emails\" class=\"form-control \" type=\"hidden\" name=\"emails\" value=\"" + e.email + "\">" +
                "<div class=\"d-flex col-12\"><label for=\"name\" class='col-3'>Nom</label>" +
                "<input id=\"names\" class=\"form-control \" type=\"text\" name=\"names\" value=\"" + e.name + "\" required></div>" +
                "<div class=\"d-flex col-12\"><label for=\"firstname\" class='col-3'>Prénom</label>" +
                "<input id=\"firstnames\" class=\"form-control \" type=\"text\" name=\"firstnames\" value=\"" + e.firstname + "\" required></div>" +
                "<div class=\"d-flex col-12\"><label for=\"phones\" class='col-3'>Mobile</label>" +
                "<input id=\"phones_"+e.id+"\" class=\"form-control \" type=\"tel\" name=\"phones\" value=\"" + e.phone + "\" required>"+alertPhoneMessage+"</div>" +
                "</div>");
        } else {
            let html ="<div class='alert alert-primary' id='recipient_" + e.email + "'>" +
                "<b>Destinataire externe : <span>" + e.email + "</span></b>" +
                "<input id=\"emails\" class=\"form-control \" type=\"hidden\" name=\"emails\" value=\"" + e.email + "\">" +
                "<div class=\"d-flex col-12\"><label for=\"name\" class='col-3'>Nom</label>" +
                "<input id=\"names\" class=\"form-control \" type=\"text\" name=\"names\" value=\"" + e.name + "\" required></div>" +
                "<div class=\"d-flex col-12\"><label for=\"firstname\" class='col-3'>Prénom</label>" +
                "<input id=\"firstnames\" class=\"form-control \" type=\"text\" name=\"firstnames\" value=\"" + e.firstname + "\" required></div>";
            if(this.enableSms) {
                html += "<div class=\"d-flex col-12\"><label for=\"phones\" class='col-3'>Mobile</label>" +
                    "<input id=\"phones_"+e.id+"\" class=\"form-control \" type=\"tel\" name=\"phones\" value=\"" + e.phone + "\">"+alertPhoneMessage+"</div>" +
                    "<div class=\"d-flex col-12\"><label for=\"forcesms\" class='col-3'>Autentification SMS</label>" +
                    "<input id=\"forcesmses\" class=\"form-check-input \" type=\"checkbox\" name=\"forcesmses\" value='1'></div>";
            }
            html += "</div>";
            tempUsersDiv.append(html);
        }

        const inputPhones = document.querySelector("#phones_"+e.id);
        const output = document.querySelector("#output_"+e.id);
        const outputDiv = document.querySelector("#output_div_"+e.id);

        let iti = window.intlTelInput(inputPhones, {
            initialCountry: "fr",
            initialValue: e.phone,
        });
        window.intlTelInputGlobals.loadUtils("/webjars/intl-tel-input/21.1.0/js/utils.js?1733756310855");
        
        iti.setNumber(inputPhones.value);

        const handleChange = () => {
            let text;
            if (inputPhones.value) {
              if(iti.isValidNumber())
                {
                    text = "Numéro valide! Format international : " + iti.getNumber();
                    outputDiv.className = 'alert alert-phone-success';
                    // document.getElementById('phones_inttel_'+e.id).value = iti.getNumber();
                } else {
                    text = "Numéro non valide - merci de vérifier";
                    outputDiv.className = 'alert alert-phone-danger';
                }
            } else {
              text = "Merci de saisir un numéro de téléphone";
              outputDiv.className = 'alert alert-phone';
            }
            output.innerHTML = "";
            const textNode = document.createTextNode(text);
            output.appendChild(textNode);
        };

        inputPhones.addEventListener('change', handleChange);
        inputPhones.addEventListener('keyup', handleChange);

    }

J'ai ajouté ça dans les CSS pour que ça s'affiche plus joliment :

.iti__selected-country {
    border-right: solid var(--bs-border-color) !important;
}

.alert-phone {
    padding: 5px 12px;
    color: var(--primary);
}

.alert-phone-danger {
    padding: 5px 12px;
    color: var(--red);
}

.alert-phone-success {
    padding: 5px 12px;
    color: var(--green);
}

Ne sachant pas si c'était mieux de sauvegarder le format international du n° dans la table OTP ou de carrément ajouter une nouvelle colonne dans cette même table, je ne suis pas aller plus loin, je te laisse jusge.
Je ne sais pas non plus si ça répond à tous les besoins/usages des établissmeents, mais au moins tu verras comment ça présente.

Bonne journée