OneSpan Sign Developers : Prise en charge de la vue Web dans les appareils iOS

Pour intégrer OneSpan Sign New Signer Experience à votre application mobile, les développeurs mobiles disposent d'options flexibles, telles que l'utilisation des SDK OneSpan Sign Mobile ou la présentation directe de la cérémonie de signature dans une vue Web.

Dans le dernier blog de cette série, nous avons montré comment ajouter une WebView à votre application mobile Android et contrôler entièrement le flux de signature en surveillant le Notificateur d'événements Javascript. Nous allons maintenant montrer comment mettre en œuvre la même fonctionnalité pour les appareils iOS. Sans plus attendre, commençons !

Conditions préalables

Pour faciliter la formation d'aujourd'hui, veillez à effectuer les tâches suivantes :

1. Activer l'expérience du nouveau signataire dans votre compte
2. Téléchargez l'exemple de code à partir de ce partage de code

L'exemple de code présenté dans ce blog est un projet Xcode en Swift. Si c'est la première fois que vous créez une application iOS, lisez d'abord ce tutoriel d'Apple. Dans les sections suivantes, nous allons décomposer l'exemple de code en plusieurs parties. Suivez les explications ci-dessous et adaptez le code en conséquence.

Étape 1 : Les bases de WKWebView

iOS propose différentes façons de présenter une vue web externe, et celle que nous allons couvrir dans cet exemple est WKWebView qui fait partie du framework WebKit. L'API WKWebView rend une expérience de navigation mobile complète comme une partie transparente de l'interface utilisateur de votre application en chargeant une vue qui exploite le contenu HTML, CSS et JavaScript existant.

Vous trouverez ci-dessous un exemple simple de la manière dont vous pouvez créer une vue Web et la faire remplir tout l'espace disponible :

import UIKit
import WebKit

classe WebViewController : UIViewController {

    private var webKitView : WKWebView !
    public var url : URL ?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let config = WKWebViewConfiguration()
        webKitView = WKWebView(frame : self.view.frame, configuration : config)
                
        if let signingURL = url {
            webKitView.load(URLRequest(url : signingURL))
        }
    }
}

Étape 2 : Gérer le Notificateur Javascript

Il est déjà suffisant d'afficher l'expérience du nouveau signataire à l'étape 1. Cependant, si vous souhaitez être informé des changements d'état de la signature, par exemple lorsqu'un signataire a terminé de signer, et contrôler entièrement le flux de signature, vous pouvez activer le Javascript et personnaliser le WKWebView avec le code ci-dessous :

webKitView.configuration.preferences.javaScriptEnabled = true

Lorsqu'un événement intéressant est déclenché, le serveur OneSpan Sign envoie une notification via Webkit :

window.webkit.messageHandlers.{messageHandlerName}.postMessage({messageBody})

Ce code JavaScript cible spécifiquement votre gestionnaire de message et appelle la méthode userContentController(_:didReceive :) de votre gestionnaire. À l'instar du notificateur d'événements Javascript de OneSpan Sign dans le navigateur de bureau, vous pouvez configurer votre système pour qu'il écoute l'événement "ESL:MESSAGE:REGISTER" et renvoie ensuite le message "ESL:MESSAGE:ACTIVATE_EVENTS" afin de recevoir d'autres notifications. Dans notre code, le premier cas de commutation indique explicitement à OneSpan Sign que nous voulons nous enregistrer pour l'écoute d'événements.

extension WebViewController : WKScriptMessageHandler {
    func userContentController(_ userContentController : WKUserContentController, didReceive message : WKScriptMessage) {
        if let eslMessage = message.body as ? String{
            if (eslMessage == "ESL:MESSAGE:REGISTER"){
                webKitView.evaluateJavaScript("window.parent.postMessage('ESL:MESSAGE:ACTIVATE_EVENTS') ;", completionHandler : nil)
            }
            print("\(eslMessage)")
        }
    }
}

A la fin, n'oubliez pas d'installer votre gestionnaire de message où le nom implicite du gestionnaire de message est "message" :

config.userContentController.add(self, name : "message")

Étape 3 : Gestion du téléchargement du document

Après avoir cliqué sur le bouton de téléchargement, New Signer Experience naviguera dans la vue web vers une URL blob. Pour mieux gérer le téléchargement du document, nous pourrions mettre en œuvre les méthodes du protocole WKNavigationDelegate afin de suivre la progression des demandes de navigation et de fournir une fonction de téléchargement personnalisée :

extension WebViewController : WKNavigationDelegate 
webKitView.navigationDelegate = self

En particulier, nous allons surcharger les événements "didFinish" et "decidePolicyFor" :

    func webView(_ webView : WKWebView, didFinish navigation : WKNavigation !) {

        webView.evaluateJavaScript("sessionStorage.getItem(\"session\")") { (result, error) in
            print("Session Storage : ", result ? ? "")
        }
    }
    func webView(_ webView : WKWebView, decidePolicyFor navigationAction : WKNavigationAction, decisionHandler : @escaping (WKNavigationActionPolicy) -> Void) {

        if let url = navigationAction.request.url {
            if url.absoluteString.contains("blob") {
                print("ACTION DE TÉLÉCHARGEMENT")
                let rightSideOptionButton = UIBarButtonItem(title : "Download", style : .plain, target : self, action : #selector(onDownload))
                self.navigationItem.rightBarButtonItem = rightSideOptionButton
            }

        }
        decisionHandler(.allow)
    }

Testez le code

Après avoir rempli les fonctions inutiles laissées dans l'exemple de code, vous êtes prêt à exécuter l'application sur un appareil réel ou sur un émulateur. Vous pouvez aller de l'avant et terminer la signature, naviguer dans les documents, cliquer sur les boutons de téléchargement, zoomer et dézoomer la page, refuser la signature et effectuer autant de tests que vous le souhaitez.

En particulier, il y a quelques éléments auxquels vous devez prêter attention dans le journal de la console :

• Vous devriez pouvoir trouver la notification d'événement initiale "ESL:MESSAGE:REGISTER" lors du premier chargement de la cérémonie de signature.
• D'autres notifications d'événements comme la fin de la signature ("ESL:MESSAGE:SUCCESS:SIGNER_COMPLETE"), le déclin de la signature ("ESL:MESSAGE:SUCCESS:PACKAGE_DECLINE") devraient fonctionner correctement et votre application est donc en mesure de contrôler le flux de signatures.

• Lorsque vous avez cliqué sur les boutons de téléchargement, l'événement "decidePolicyFor" devrait pouvoir invoquer la fonction stub et effectuer les opérations de téléchargement.

Voilà, c'est fait. Grâce au blog d'aujourd'hui, vous devriez être en mesure d'implémenter une WKWebView dans un projet Xcode, d'installer un gestionnaire de messages Javascript et de gérer le téléchargement de documents. Si vous avez des questions concernant ce blog ou tout autre sujet relatif à l'intégration de OneSpan Sign dans votre application, visitez les forums de la communauté des développeurs. Vos commentaires nous intéressent