Sécuriser et effectuer le scaling des chatbots pour la production (partie 2)

Cet article constitue la deuxième partie d'une série de tutoriels qui expliquent comment procéder à la création, à la sécurisation et au scaling d'un chatbot à l'aide de Dialogflow sur Google Cloud.

Cette série se compose des parties suivantes :

Dans le premier tutoriel, vous avez mis en œuvre un chatbot à l'aide de Dialogflow. Dans ce second tutoriel, vous allez créer un webhook sécurisé de sorte que seuls les appelants autorisés puissent accéder au backend de fulfillment de votre chatbot. Vous allez également transférer le webhook vers App Engine afin qu'il soit "toujours activé" et qu'il soit évolutif. Enfin, vous allez créer une interface utilisateur de chatbot personnalisée dont vous pouvez assurer la sécurisation, le branding et le déploiement dans l'environnement d'un client.

Dans ce tutoriel, nous partons du principe que vous connaissez Cloud Shell, Datastore, Datalab, l'API Cloud Natural Language et Linux. Nous supposons également que vous avez achevé la première partie de cette série et créé un chatbot.

Objectifs

  • Sécuriser une API Python pour Dialogflow
  • Convertir le code Datalab en code Python à déployer sur App Engine
  • Connecter une interface utilisateur de chatbot personnalisée à l'API Dialogflow
  • Procéder à l'intégration à l'Assistant Google

Coûts

Ce tutoriel utilise les composants facturables suivants de Google Cloud :

Obtenez une estimation des coûts en fonction de votre utilisation prévue à l'aide du simulateur de coût. Les nouveaux utilisateurs de Google Cloud peuvent bénéficier d'un essai gratuit.

Une fois que vous avez terminé ce tutoriel, vous pouvez éviter de continuer à payer des frais en supprimant les ressources que vous avez créées. Consultez la page Effectuer un nettoyage pour en savoir plus.

Avant de commencer

  1. Terminez la partie 1 de la série.
  2. Créez un second projet Google Cloud.

    ACCÉDER À LA PAGE GÉRER LES RESSOURCES

Sécuriser le webhook

Dans cette section, vous allez ajouter l'authentification de base HTTP au webhook afin d'empêcher tout accès non autorisé à votre chatbot. Cela permet de s'assurer que les appelants non autorisés ne peuvent pas appeler votre webhook. Utilisez l'instance Datalab du tutoriel précédent.

  1. Dans Datalab, accédez à datalab > notebooks > webhook.ipynb.
  2. Dans le bloc d'importation du code Python, ajoutez la ligne suivante sous la ligne d'importation Flask (from flask import Flask, request, jsonify, make_response) pour importer le décorateur @wraps decorator :

    from functools import wraps
    
  3. Dans la troisième cellule du notebook, insérez le code suivant entre la ligne app = Flask(__name__) et la méthode handle(), et remplacez : @app.route('/webhook/', methods=['POST']). Remplacez [USERNAME] et [PASSWORD] par les identifiants que vous souhaitez utiliser.

    def requires_auth(f):
        @wraps(f)
        def decorated(*args, **kwards):
            auth = request.authorization
            if not auth or not check_auth(auth.username, auth.password):
                return authenticate()
            return f(*args, **kwards)
        return decorated
    <br>
    def check_auth(username, password):
        """This function is called to check if a username /
        password combination is valid.
        """       uname="[USERNAME]"
        pwd="[PASSWORD]"
           return username == uname and password == pwd
    <br>
    def authenticate():
        """Sends a 401 response that enables basic auth"""
        logging.info("inside authenticate")
        return Response(
        'Could not verify your access level for that URL.\n'
        'You have to login with proper credentials', 401,
        {'WWW-Authenticate': 'Basic realm="Login Required"'})
    

    Les méthodes suivantes mettent en œuvre le framework de sécurité de Flask pour l'authentification de base HTTP :

    • La méthode requires_auth() requiert une authentification pour accéder à l'application.
    • La méthode check_auth() valide le nom d'utilisateur et le mot de passe envoyés. Notez vos valeurs [USERNAME] et [PASSWORD], car vous les utiliserez ultérieurement dans ce tutoriel.
    • La méthode authenticate() envoie une réponse 401 en cas d'échec de l'authentification.
  4. Ajoutez le décorateur @requires_auth à la ligne précédant la déclaration de la méthode def handle().

  5. Pour réexécuter votre webhook, cliquez sur la flèche vers le bas en regard de Clear (Effacer), puis sur Clear all Cells (Effacer toutes les cellules). Pour arrêter votre ancien processus ngrok, sous Reset Session (Réinitialiser la session), cliquez sur Interrupt Execution (Interrompre l'exécution). Réexécutez les deuxième et troisième cellules du notebook. Saisissez SHIFT + ENTER dans les deux cellules.

    Le résultat suivant affiché au bas du notebook indique que l'API sécurisée est exécutée sur le port 5000 de votre VM locale.

    *  Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)
    
  6. Dans Datalab, accédez à Datalab > Notebooks > ngrok.ipynb.

  7. Cliquez sur la flèche vers le bas à côté de Clear (Effacer), puis sur Clear all Cells (Effacer toutes les cellules). Pour arrêter votre ancien processus ngrok, sous Reset Session (Réinitialiser la session), cliquez sur Interrupt Execution (Interrompre l'exécution).

  8. Exécutez la troisième cellule, qui contient la commande ngrok. Saisissez SHIFT + ENTER.

    Le résultat suivant s'affiche au bas du notebook :

    Résultat affiché au bas du notebook

  9. Copiez l'URL https://[NAME].ngrok.io figurant dans le résultat. Il s'agit de l'URL publique du webhook, où [NAME] représente un nom généré aléatoirement par ngrok..

  10. Dans la console Dialogflow, cliquez sur Fulfillment. Dans le champ URL, saisissez votre URL ngrok, puis ajoutez /webhook/. Par exemple, https://bc123456.ngrok.io/webhook/.

  11. Dans la section Basic Auth (Authentification de base), saisissez les valeurs [USERNAME] et [Password] que vous avez ajoutées au notebook webhook.ipynb.

  12. Cliquez sur Enregistrer.

  13. Testez votre chatbot avec la console de test Dialogflow. Vos appels au webhook sont désormais chiffrés et authentifiés.

Transférer le webhook vers App Engine

Dans Datalab, le webhook ne peut être appelé pour le chatbot que pendant l'exécution de la VM Datalab. Cela convient pour le développement et les tests, mais pour les environnements de production, vous voulez que votre webhook soit toujours activé et qu'il puisse évoluer si votre chatbot est populaire. Vous souhaitez également que le webhook soit disponible via HTTPS, afin de protéger vos données et vos identifiants lorsqu'ils sont en transit.

Dans cette section, vous allez déployer le code Python que vous avez démarré dans Datalab sur App Engine, qui fournit une présence évolutive, sécurisée et permanente pour votre webhook.

  1. Dans Datalab, accédez à Datalab > Notebooks > webhook.ipynb.
  2. Dans la liste Notebook, cliquez sur Convert to Python (Convertir en Python).

    Cela ouvre un nouvel onglet, dans lequel figure le contenu du notebook du webhook converti en un seul fichier Python que vous pouvez utiliser pour le déploiement sur App Engine.

  3. Dans Cloud Console, accédez à une fenêtre de terminal Cloud Shell de la première partie de cette série de tutoriels. Pour ouvrir un nouvel onglet, cliquez sur + Ajouter une session Cloud Shell. Accédez au sous-répertoire du webhook que vous avez cloné à partir de GitHub.

    git clone https://github.com/GoogleCloudPlatform/dialogflow-chatbot.git
    cd dialogflow-chatbot/webhook
    
  4. Dans Cloud Shell, installez toutes les bibliothèques requises dans un répertoire lib que vous utilisez pour déployer votre application sur App Engine :

    pip install -t lib -r requirements.txt
    
  5. Déployez votre service de webhook Dialogflow sur App Engine :

    gcloud app deploy
    
  6. Lorsque vous êtes invité à continuer, saisissez Y.

  7. Récupérez l'URL de l'application déployée :

    gcloud app browse
    

    Notez l'URL du service Dialogflow, car vous en aurez besoin ultérieurement. Elle est au format https://[PROJECT_ID].appspot.com, où [PROJECT_ID] représente l'ID de votre projet Google Cloud.

  8. Dans la console Dialogflow, cliquez sur Fulfillment. Dans le champ, saisissez https://[PROJECT_ID].appspot.com/webhook/.

  9. Saisissez les valeurs [USERNAME] et [PASSWORD] que vous avez précédemment configurées.

  10. Enregistrez la configuration du webhook en cliquant sur Enregistrer.

  11. Testez votre chatbot.

Créer une interface utilisateur de chatbot personnalisée

L'intégration de la démonstration Web à Dialogflow est très utile pour montrer à quoi ressemblerait une interface utilisateur de chatbot, mais elle n'est destinée qu'à des fins de démonstration. Vous ne pouvez pas personnaliser le branding et, plus important encore, vous ne pouvez pas le sécuriser. Quiconque possède votre URL de démonstration Web peut interagir avec l'interface utilisateur.

Vous allez créer votre propre interface utilisateur à exécuter dans votre second projet Google Cloud. Ce dernier est nécessaire pour mettre en œuvre la sécurité basée sur l'utilisateur, car vous souhaitez que cette sécurité ne s'applique qu'au projet d'interface utilisateur et non au premier projet réalisé avec le chatbot.

Pour mettre en œuvre la sécurité basée sur l'utilisateur, votre webhook doit continuer à s'exécuter en tant que service de backend, sans authentification basée sur l'utilisateur, tandis que votre interface utilisateur s'exécute en tant qu'application visible par l'utilisateur, avec une authentification basée sur l'utilisateur.

Initialiser App Engine pour votre second projet Google Cloud

Dans cette section, vous allez initialiser App Engine pour votre second projet. Toutes les étapes restantes de ce tutoriel seront réalisées dans ce projet.

  1. Dans Cloud Console, accédez à la page Gérer les ressources.

    ACCÉDER À LA PAGE GÉRER LES RESSOURCES

  2. Cliquez sur le nom de votre second projet Google Cloud.

  3. Cliquez sur Activer Cloud Shell.

  4. Créez une VM Datalab :

    gcloud app create
    
  5. Lorsque vous y êtes invité, sélectionnez us-central1 comme région dans laquelle vous souhaitez créer cette application.

Configurer le fichier environment.ts

  1. Dans Cloud Shell, accédez aux répertoires dans lesquels vous avez téléchargé le code précédemment dans ce tutoriel :

    cd ~/dialogflow-chatbot/angular-ui/src/environments
    
  2. Modifiez les fichiers environment.ts et environment.prod.ts afin d'inclure le jeton d'accès client issu de votre agent Dialogflow.

    1. Cliquez sur Paramètres en regard du nom de l'agent.
    2. Sous l'onglet Général, copiez le jeton d'accès client répertorié dans la section Clés API (V1).

    3. Dans Cloud Shell, cliquez sur Lancer l'éditeur de code  :

    4. Dans le répertoire, accédez à dialogflow-chatbot > angular-ui= > src > environments > environment.ts.

      Répertoire contenant le fichier &quot;environment.ts&quot;

    5. Dans le fichier environment.ts, sur la ligne angularBot:[YOUR_DIALOGFLOW_CLIENT_ACCESS_TOKEN], remplacez [YOUR_DIALOGFLOW_CLIENT_ACCESS_TOKEN] par votre code d'accès client.

    6. Pour enregistrer le fichier, accédez à Fichier, puis cliquez sur Enregistrer.

    7. Accédez à dialogflow-chatbot > angular-ui > src > environments > environment.prod.ts pour également remplacer [YOUR_DIALOGFLOW_CLIENT_ACCESS_TOKEN].

  3. Dans Cloud Shell, revenez dans le sous-répertoire angular-ui, puis exécutez la commande pour npm :

    cd ~/dialogflow-chatbot/angular-ui
    npm install
    

    Cette commande permet d'installer tous les fichiers node_modules nécessaires répertoriés dans le fichier package.json de votre projet.

  4. Installez la CLI Angular au niveau global :

    npm install -g @angular/cli@6.0.8
    
  5. Compilez l'application dans un répertoire de sortie, nommé dist/, dans lequel sont stockés les artefacts de compilation :

    ng build --prod
    

    Pour vérifier le contenu du sous-répertoire angular-ui, saisissez ls.

    Ce sous-répertoire contient l'intégralité du code AngularJS frontend et du fichier app.yaml que vous utilisez pour déployer votre application backend Python et votre application frontend Angular sur App Engine.

    Dans l'onglet Éditeur de code, développez le répertoire dialogflow-chatbot/angular-ui/src/app/chat, puis examinez le fichier chat.service.ts. Ce fichier instancie un objet ApiAiClient (Dialogflow était autrefois nommé Api.AI), qui valide le jeton d'accès client que vous avez configuré dans le fichier environment.ts. L'objet ApiAiClient extrait les données fulfillment.speech de votre agent Dialogflow pour renseigner l'interface utilisateur Angular.

Déployer votre application dans l'environnement standard App Engine

  1. Dans Cloud Shell, accédez au sous-répertoire angular-ui.

    cd ~/dialogflow-chatbot/angular-ui
    
  2. Redéployez votre interface Angular en tant que service par défaut :

    echo "Y" | gcloud app deploy
    
  3. Récupérez l'URL de l'application que vous avez déployée. Notez-la, car vous en aurez besoin dans la suite du tutoriel.

    gcloud app browse
    
  4. Pour tester votre chatbot, accédez à http://[YOUR_PROJECT_ID].appspot.com et saisissez Tell me about annual salary.

Activer Identity-Aware Proxy

Identity-Aware Proxy (IAP) intègre l'architecture de sécurité BeyondCorp de Google dans votre application App Engine. Si vous activez et configurez IAP, votre interface utilisateur Web requiert une authentification et une autorisation d'accès, ce qui contribue à la sécurité de votre application.

Activer le service IAP

  1. Dans Cloud Console, accédez à la page Identity-Aware Proxy.

    ACCÉDER À LA PAGE "IDENTITY-AWARE PROXY"

  2. Dans la colonne Resource (Ressource), recherchez l'application pour laquelle vous souhaitez restreindre l'accès. La colonne Published (Publiée) affiche l'URL de l'application. Pour activer IAP pour l'application, dans la colonne IAP, cliquez sur le bouton d'activation/de désactivation.

    Activer/Désactiver pour IAM

  3. Dans la boîte de dialogue Turn on IAP (Activer le service IAP), vérifiez que le domaine ajouté automatiquement correspond au domaine https://[PROJECT_ID].appspot.com sur lequel vous prévoyez de diffuser votre application.

    Activer IAM

  4. Pour confirmer que vous souhaitez sécuriser l'application avec IAP, cliquez sur Turn On (Activer).

    IAP exige la saisie d'identifiants pour toutes les connexions à votre application. Seuls les comptes disposant du rôle IAP-Secured Web App User (Utilisateur de l'application Web sécurisée par IAP) sur ce second projet Google Cloud y ont accès.

  5. Pour vérifier que vous ne pouvez pas accéder au site Web App Engine, cliquez sur https://[PROJECT_ID].appspot.com dans la section Published (Publiée) de la page Cloud IAP.

Ajouter un utilisateur à IAP et tester l'accès

  1. Dans Cloud Console, accédez à la page Identity-Aware Proxy.

    ACCÉDER À LA PAGE "IDENTITY-AWARE PROXY"

  2. Cochez la case de votre application App Engine.

  3. Dans la boîte de dialogue Ajouter un membre, ajoutez un utilisateur dans la zone de texte Nouveau membre, puis ajoutez le rôle Cloud IAP > Utilisateur de l'application Web sécurisée par IAP pour votre compte.

  4. Cliquez sur Save.

  5. Sur la page Identity-Aware Proxy, cliquez sur le bouton pour désactiver IAP pour l'application. Cliquez à nouveau dessus pour réactiver le service.

  6. Vérifiez que vous pouvez désormais accéder au site App Engine avec l'utilisateur connecté. Accédez à https://[PROJECT_ID].appspot.com. Vous avez maintenant accès au site Web.

Créer un chat audio avec Actions on Google

Intégrez un chat audio pour votre chatbot à Google Home ou à l'application Assistant Google sur iOS ou Android à l'aide d'Actions on Google. Pour plus d'informations, découvrez comment configurer et développer des actions.

  1. Dans la console Dialogflow, cliquez sur Intents.

  2. Cliquez sur Intent d'accueil par défaut.

  3. Si Google Assistant Welcome (Accueil de l'Assistant Google) n'est pas répertorié sous Events (Événements), ajoutez-le en saisissant Google Assistant Welcome dans le champ Events (Événements), puis cliquez sur Save (Enregistrer).

    Ajouter des événements d&#39;accueil dans l&#39;Assistant Google

  4. En bas de la page, examinez les expressions figurant dans la table Text Response (Réponse texte). Celles-ci sont sélectionnées de manière aléatoire par l'Assistant Google au démarrage de l'application. Ajoutez vos propres messages d'accueil, puis cliquez sur Save (Enregistrer).

  5. Cliquez sur Integrations (Intégrations) et, sous Google Assistant, (Assistant Google), cliquez sur Integration Settings (Paramètres d'intégration).

  6. Confirmez que le champ Explicit invocation (Appel explicite) est défini sur Default Welcome Intent (Intent d'accueil par défaut), puis définissez le champ Implicit invocation (Appel implicite) sur Topic (Sujet).

    Définir le champ &quot;Appel implicite&quot; sur &quot;Sujet&quot;

  7. Cliquez sur Test.

    Cela ouvre la page de l'agent de votre projet dans Actions on Google. Si vous acceptez les conditions d'utilisation de Google, cliquez sur Accepter.

  8. Cliquez sur Configuration > Appel.

  9. Pour Display name (Nom à afficher), saisissez [YOUR_NAME] HR Manual (Manuel RH de [VOTRE_NOM]), puis cliquez sur Enregistrer.

    Nom à afficher pour le manuel RH

  10. Pour tester votre chatbot avec Assistant Google intégré, cliquez sur Micro et prononcez les phrases suivantes :

    • Pour diriger le chatbot vers votre manuel RH, dites : "Talk to [YOUR_NAME] HR Manual" (Consulte le manuel RH de [VOTRE_NOM]). Par exemple, dites : "Talk to Liz HR Manual" (Consulte le manuel RH de Liz).
    • Pour obtenir des informations sur un sujet particulier, posez des questions sur un sujet abordé dans le manuel RH. Par exemple, dites : "Tell me about sick leave" (Parle-moi des congés maladie).
  11. Facultatif : Téléchargez l'Assistant Google sur votre iPhone ou votre appareil Android. Connectez-vous à l'application avec votre compte Google. Répétez l'étape précédente.

Nettoyer

Pour éviter que les ressources utilisées dans ce tutoriel soient facturées sur votre compte Google Cloud, supprimez les deux projets Google Cloud.

Supprimer le projet

  1. Dans Cloud Console, accédez à la page Gérer les ressources.

    Accéder à la page Gérer les ressources

  2. Dans la liste des projets, sélectionnez le projet que vous souhaitez supprimer, puis cliquez sur Supprimer.
  3. Dans la boîte de dialogue, saisissez l'ID du projet, puis cliquez sur Arrêter pour supprimer le projet.

Étape suivante