Créer votre propre signature electronique intégré Website HTML CSS JS

signature electronique intégré

Outil Pur html JS CSS POUR SIGNATURE ELECTRONIQUE

Comme YouSign La signature électronique est un procédé technique et juridique permettant à des individus d’apporter consentement et approbation à des documents numériques. Plus qu’une image ou dessin, cet outil respecte des conditions et des normes fixées et contrôlées par les autorités européennes et françaises. Il existe plusieurs niveaux de signature.
Les critères principaux que doit respecter une signature électronique sont : l’identification de la personne qui signe (il faut pouvoir authentifier son identité), la preuve de consentement du signataire et la garantie de l’intégrité du document, c’est-à-dire que son contenu soit figé dans le temps.

Valeur juridique et légale

La signature électronique entre dans un cadre juridique précis en Europe via le règlement eIDAS et en France via sa retranscription dans les articles 1366 et 1367 du code civil.
Seules les solutions proposées par des prestataires de confiance certifiés permettent de disposer de signatures électroniques juridiquement valables. Ces tiers de confiance sont audités de manière régulière pour s’assurer de la conformité de leur solutions avec le règlement européen.

Signature électronique vs. signature manuscrite

Les accords papiers et les signatures manuscrites associées génèrent un flux considérable de paperasse, entraînent de pénibles lenteurs de traitement, déclenchent d’innombrables aller-retours et leur intégrité laisse à désirer.

La signature électronique simplifie l’ensemble de ces flux. Elle vous permet de valider vos contrats et vos accords en ligne, en utilisant des formats numériques connus comme le PDF. Vous invitez vos clients, partenaires et collaborateurs à signer des documents en ligne ou en face à face.

Le code est

signature electronique intégré

HTML Popup modal

<div class="modal fade" id="largeModal" tabindex="-1" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <img src="https://i.ibb.co/bX1rRbZ/sign.png" alt="egbw" border="0" width="70px">
                    <button type="button" class="close" data-bs-dismiss="modal">×</button>
                </div>
                <div class="modal-body">
                    <div class="col-md-12">
                        <!-- Content -->
                        <div class="container">
                            <div class="row">
                                <div class="col-md-12">
                                    <h3 class="text-title">Veuillez imposer votre Signature</h3>
                                    <p>Attention vous ne pourrez le faire qu'une fois !</p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <canvas id="sig-canvas" width="620" height="160">
                                        Get a better browser, bro.
                                    </canvas>
                                </div>
                            </div>
                            <br>

                            <form action="/valid_sign" method="POST" enctype="multipart/form-data">
                                <input type="hidden" name="_method" value="POST">
				<input type="hidden" name="_token" value="">                                <div class="row">
                                    <div class="col-md-12">
                                        <textarea hidden="" name="sig_data_url" id="sig-dataUrl" class="form-control" rows="5"></textarea>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <button type="submit" disabled="" class="btn btn-primary" id="sig-submitBtn">Valider cette Signature</button>
                                        <button type="reset" class="btn btn-warning" id="sig-clearBtn">Effacer la Signature</button>
                                    </div>
                                </div>
                                <br>
                            </form>
                            <div class="row">
                                <div class="col-md-12">
                                    <img id="sig-image" src="" alt="Your signature will go here!">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>

CSS design box signature

<style>
    #sig-canvas {
        border: 2px dotted #CCCCCC;
        border-radius: 15px;
        cursor: crosshair;
    }
</style>

JavaScript

LIbrary sweetalert2

Un remplacement magnifique, réactif, hautement personnalisable et accessible (WAI-ARIA) pour les boîtes contextuelles de JavaScript. Zéro dépendances.

signature electronique intégré
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

Les cookies pour sauver la signature

Il semble qu’il ya une liste de tous les cookies envoyés au navigateur dans le tableau retourné par php headers_list() qui, entre autres, des données renvoie « Set-Cookie » éléments comme suit:

Set-Cookie: cooke_name=cookie_value; expires=expiration_time; Max-Age=age; path=path; domain=domain

De cette façon, vous pouvez également obtenir supprimé depuis leur valeur est supprimé:

Set-Cookie: cooke_name=deleted; expires=expiration_time; Max-Age=age; path=path; domain=domain

Partir de là, il est très facile de retrouver le temps d’expiration ou de l’âge de cookie particulier. Gardez à l’esprit que ce tableau est probablement disponible uniquement APRÈS appel réel à setcookie() a été faite de sorte qu’il est valable pour les script qui a déjà achevé son travail. Je n’ai pas testé cela dans une autre voie(s) puisque cela a très bien fonctionné pour moi.

C’est plutôt vieux sujet et je ne sais pas si cela est valable pour toutes les versions php, mais j’ai pensé qu’il pourrait être utile.

Pour plus d’infos, voir:

https://www.php.net/manual/en/function.headers-list.php

https://www.php.net/manual/en/function.headers-sent.php

<script>
        function setCookie(cname, cvalue, exdays) {
            const d = new Date();
            d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
            let expires = "expires=" + d.toUTCString();
            document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
        }

        function getCookie(cname) {
            let name = cname + "=";
            let decodedCookie = decodeURIComponent(document.cookie);
            let ca = decodedCookie.split(';');
            for (let i = 0; i < ca.length; i++) {
                let c = ca[i];
                while (c.charAt(0) == ' ') {
                    c = c.substring(1);
                }
                if (c.indexOf(name) == 0) {
                    return c.substring(name.length, c.length);
                }
            }
            return "";
        }

        function checkCookie() {
            let user = getCookie("sign");
            if (user != "") {
                return null
            } else {
                signdownloadSynthese();
            }
        }
        window.onload = function() {
            checkCookie()
        };

        function signdownloadSynthese() {
            swal("Nous vous invitons à émarger ", "Vous pouvez le faire en cliquant sur Ok", "success").then(function(isConfirm) {
                if (isConfirm) {
                    $("#largeModal").modal('show');
                } else {
                    swal("Vous devez émarger pour valider la synthèse", "N'hésitez pas à nous écrire sur votre messagerie !", "error");
                }
            });
        }
    </script>

On lit maintenant la signature dessiné,

<script>
        (function() {
            window.requestAnimFrame = (function(callback) {
                return window.requestAnimationFrame ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    window.oRequestAnimationFrame ||
                    window.msRequestAnimaitonFrame ||
                    function(callback) {
                        window.setTimeout(callback, 1000 / 60);
                    };
            })();

            var canvas = document.getElementById("sig-canvas");
            var ctx = canvas.getContext("2d");
            ctx.strokeStyle = "#222222";
            ctx.lineWidth = 4;

            var drawing = false;
            var mousePos = {
                x: 0,
                y: 0
            };
            var lastPos = mousePos;

            canvas.addEventListener("mousedown", function(e) {
                drawing = true;
                lastPos = getMousePos(canvas, e);
            }, false);

            canvas.addEventListener("mouseup", function(e) {
                drawing = false;
            }, false);

            canvas.addEventListener("mousemove", function(e) {
                mousePos = getMousePos(canvas, e);
            }, false);

            // Add touch event support for mobile
            canvas.addEventListener("touchstart", function(e) {

            }, false);

            canvas.addEventListener("touchmove", function(e) {
                var touch = e.touches[0];
                var me = new MouseEvent("mousemove", {
                    clientX: touch.clientX,
                    clientY: touch.clientY
                });
                canvas.dispatchEvent(me);
            }, false);

            canvas.addEventListener("touchstart", function(e) {
                mousePos = getTouchPos(canvas, e);
                var touch = e.touches[0];
                var me = new MouseEvent("mousedown", {
                    clientX: touch.clientX,
                    clientY: touch.clientY
                });
                canvas.dispatchEvent(me);
            }, false);

            canvas.addEventListener("touchend", function(e) {
                var me = new MouseEvent("mouseup", {});
                canvas.dispatchEvent(me);
            }, false);

            function getMousePos(canvasDom, mouseEvent) {
                var rect = canvasDom.getBoundingClientRect();
                return {
                    x: mouseEvent.clientX - rect.left,
                    y: mouseEvent.clientY - rect.top
                }
            }

            function getTouchPos(canvasDom, touchEvent) {
                var rect = canvasDom.getBoundingClientRect();
                return {
                    x: touchEvent.touches[0].clientX - rect.left,
                    y: touchEvent.touches[0].clientY - rect.top
                }
            }

            function renderCanvas() {
                if (drawing) {
                    ctx.moveTo(lastPos.x, lastPos.y);
                    ctx.lineTo(mousePos.x, mousePos.y);
                    ctx.stroke();
                    lastPos = mousePos;
                }
            }

            // Prevent scrolling when touching the canvas
            document.body.addEventListener("touchstart", function(e) {
                if (e.target == canvas) {
                    e.preventDefault();
                }
            }, false);
            document.body.addEventListener("touchend", function(e) {
                if (e.target == canvas) {
                    e.preventDefault();
                }
            }, false);
            document.body.addEventListener("touchmove", function(e) {
                if (e.target == canvas) {
                    e.preventDefault();
                }
            }, false);

            (function drawLoop() {
                requestAnimFrame(drawLoop);
                renderCanvas();
            })();

            function clearCanvas() {
                canvas.width = canvas.width;
            }

            // Set up the UI
            var sigText = document.getElementById("sig-dataUrl");
            var sigImage = document.getElementById("sig-image");
            var clearBtn = document.getElementById("sig-clearBtn");
            var submitBtn = document.getElementById("sig-submitBtn");
            clearBtn.addEventListener("click", function(e) {
                clearCanvas();
                sigText.innerHTML = "Data URL for your signature will go here!";
                sigImage.setAttribute("src", "");
            }, false);
            submitBtn.addEventListener("click", function(e) {
                var dataUrl = canvas.toDataURL();
                sigText.innerHTML = dataUrl;
                sigImage.setAttribute("src", dataUrl);
                /*cookuie*/
                user = "true";
                if (user != "" && user != null) {
                    setCookie("sign", user, 3);
                }
            }, false);

        })();
    </script>

Voila merci, Aussi pour rendre valide le bouton uniquement après la signature on fait ca :

<script>
        var sigcanvas = document.getElementById("sig-canvas");
        sigcanvas.addEventListener("click", function() {
            document.getElementById('sig-submitBtn').disabled = false;
        });
        sigcanvas.addEventListener('touchstart', function(e) {
            document.getElementById('sig-submitBtn').disabled = false;
        });
    </script>

Utiliser l’outil d’inspection d’URL (quelques URL seulement)
Pour demander l’exploration d’URL individuelles, utilisez l’outil d’inspection d’URL. Vous devez être un propriétaire ou un utilisateur avec accès complet de la propriété Search Console pour pouvoir demander une indexation dans l’outil d’inspection d’URL.

N’oubliez pas qu’un quota limite l’envoi d’URL individuelles et que les demandes répétées de réexploration pour une même URL n’accélèrent pas l’exploration.

Envoyer un sitemap (beaucoup d’URL à la fois)
Si vous disposez d’un grand nombre d’URL, vous pouvez envoyer un sitemap. Un sitemap est un fichier important qui permet à Google d’identifier les URL sur votre site. Il peut être très utile si vous venez de lancer votre site ou si vous avez récemment effectué une migration de site. Il peut également inclure des métadonnées supplémentaires sur les versions dans d’autres langues et sur des pages propres à Google Vidéos, Google Images ou Actualités. Découvrez comment créer et envoyer un sitemap.

 604 total views,  2 views today

3 thoughts on “Créer votre propre signature electronique intégré Website HTML CSS JS”

  1. […] de LaTeXet AMS-LaTeX, pour les mathématiques formules. Il génère PNGimages ou de simples balises HTML,selon les préférences de l’utilisateur et de l’la complexité de l’expression. […]

  2. […] que possible, et la perte de données causée par le masquage est souvent ennuyeuse. En termes CSS, cela fait disparaître du contenu, vos visiteurs ne le remarqueront peut-être pas, et si tout ce […]

  3. […] que possible, et la perte de données causée par le masquage est souvent ennuyeuse. En termes CSS, cela fait disparaître du contenu, vos visiteurs ne le remarqueront peut-être pas, et si tout ce […]

Add a Comment

Your email address will not be published.