Passer au contenu principal
Cette fonctionnalité utilise la délégation. Par défaut, la délégation est désactivée pour les locataires qui n’utilisaient aucun module complémentaire en date du 8 juin 2017. Les anciens locataires qui utilisent actuellement un module complémentaire nécessitant la délégation peuvent continuer à utiliser cette fonctionnalité. Si la fonctionnalité de délégation est modifiée ou retirée du service, les clients qui l’utilisent actuellement en seront avisés au préalable et disposeront de suffisamment de temps pour migrer. De plus, notez que la délégation ne prend pas en charge l’utilisation de domaines personnalisés; toute fonctionnalité qui en dépend pourrait donc ne pas être entièrement fonctionnelle avec un domaine personnalisé.

​
Étape 3 - Créer l’application

Dans cette étape, vous créerez une application monopage sans serveur à l’aide du framework AngularJS, que vous hébergerez dans un compartiment AWS S3 configuré comme site Web statique.

​
Étape 1. Configurez votre application d’exemple

Pour partir d’une application simple, téléchargez un projet d’exemple adapté à ce tutoriel. Connectez-vous pour que vos identifiants Auth0 soient préconfigurés. Copiez le contenu de ce projet de démarrage dans un dossier local nommé pets, que vous utiliserez pour le reste de ce tutoriel. Dans ce dossier, mettez à jour auth0-variables.js avec les valeurs AUTH0_CLIENT_ID et AUTH0_CLIENT_ID de votre application Auth0 (ces renseignements sont accessibles dans le Auth0 Dashboard pour l’application en question).

​
Compartiment AWS S3

Assurez-vous d’avoir créé le compartiment AWS S3 configuré pour servir de site Web statique. Pendant la configuration, copiez le contenu du dossier pets dans votre compartiment S3 pour fournir le contenu du site Web. Si vous utilisez un compartiment existant, vous pouvez déplacer les fichiers avec l’AWS CLI à l’aide de la commande suivante. 
aws s3 cp --recursive --acl "public-read" ./ s3://{yourBucket}/
Avant de poursuivre, assurez-vous d’avoir au moins un utilisateur associé à votre connexion Username-Password-Authentication (ou à la connexion de base de données associée à l’application que vous utilisez). Pour profiter pleinement des fonctionnalités de votre application exemple et de son intégration avec AWS, vous aurez besoin de cet utilisateur pour tester l’authentification et y accéder. Enfin, assurez-vous qu’Auth0 autorise l’authentification à partir de votre site Web en indiquant l’URL dans le champ Allowed Origins de la page Settings de votre application. L’URL de votre site Web devrait ressembler à ceci : http://your-bucket.s3-website-us-east-1.amazonaws.com Si vous ne connaissez pas votre URL, vous pouvez la trouver sous l’onglet Properties de votre compartiment S3. Avant d’aller plus loin, testez l’ouverture de session dans votre application. Ouvrez http://your-bucket-domain/index.html dans votre navigateur. Après vous être connecté, vous devriez voir une boîte d’alerte s’afficher indiquant “getPets not implemented” : Vous devriez aussi voir la page permettant de consulter les animaux de compagnie.

​
Utiliser la délégation pour obtenir un jeton AWS

À ce stade, l’authentification est configurée avec Auth0, et vous disposez d’un . Voici la structure des répertoires du code généré :
AWS API Gateway - répertoire du projet
Vous pouvez utiliser la fonction de délégation d’Auth0 pour obtenir un jeton AWS fondé sur le Auth0. En coulisses, Auth0 authentifie votre jeton d’identité, puis utilise selon le module complémentaire que vous avez configuré. Mettez à jour pets/login/login.js comme suit afin d’obtenir un jeton de délégation AWS à partir du jeton d’identité après une connexion réussie avec auth.signin. Notez que vous considérez comme administrateur tout utilisateur qui ne s’est pas connecté au moyen d’une Connexion sociale. Plus tard, nous coderons un deuxième rôle et montrerons de meilleures façons d’imposer la sélection du rôle. 
auth.signin(params, function(profile, token) {
  //Définir l'utilisateur comme administrateur s'il n'a pas utilisé une connexion sociale.
  profile.isAdmin = !profile.identities[0].isSocial;
  store.set('profile', profile);
  store.set('token', token);

  // Obtenir le jeton de délégation à partir du jeton d'identité.
  var options = getOptionsForRole(profile.isAdmin, token);

  // TODO : Étape 3 : Activer cette section une fois la délégation AWS configurée.
  /*
  auth.getToken(options)
    .then(
      function(delegation)  {
        store.set('awstoken', delegation.Credentials);
        $location.path("/");
      },
    function(err) {
       console.log('failed to acquire delegation token', err);
  });
  */
  // TODO : Étape 3 : Supprimer cette redirection après avoir ajouté l'API d'obtention du jeton.
  $location.path("/");

}, function(error) {
  console.log("There was an error logging in", error);
});

​
Modifier les chaînes role et principal

Pour modifier les chaînes role et principal (qui correspondent aux deux dernières lignes de l’instruction if dans la fonction fournie), indiquez les valeurs appropriées dans Rules : 
function (user, context, callback) {
  if (context.clientID === 'CLIENT_ID' &&
      context.protocol === 'delegation') {
    // définir les paramètres AWS
    context.addonConfiguration = context.addonConfiguration || {};
    context.addonConfiguration.aws = context.addonConfiguration.aws || {};
    context.addonConfiguration.aws.principal = 'arn:aws:iam::[omitted]:saml-provider/auth0-provider';
    context.addonConfiguration.aws.role = 'arn:aws:iam::[omitted]:role/auth0-role';
  }

  callback(null, user, context);
}
Assurez-vous de remplacer les valeurs ARN role et [principal] par celles de votre intégration. Copiez les fichiers mis à jour dans votre compartiment S3 pour votre site Web. Au besoin, vous pouvez définir un point d’arrêt dans le navigateur à store.set('awstoken', delegation.Credentials);. Lorsque vous ouvrez une session de nouveau après vous être déconnecté, examinez delegation.Credentials lorsque vous atteignez le point d’arrêt. Vous verrez des valeurs familières comme AccessKeyId et SecretAccessKey : 
{
    AccessKeyId: "ASIAJB...BNQ",
    SecretAccessKey: "vS+b6...2Noav",
    SessionToken: "AQoDYBqsivOV...DdQW0gsKr8rgU=",
    Expiration: "2015-08-27T14:48:32.000Z"
}
Si vous ne voyez pas ces valeurs, assurez-vous que le module complémentaire Amazon Web Services est activé dans l’onglet Addons de votre application Auth0.

​
Afficher les animaux avec le service API d’AWS

La première étape consiste à afficher les animaux aux utilisateurs finaux.

​
Ajoutez le code d’API pour appeler votre API

Pour ajouter le code d’API nécessaire à l’appel de votre service, copiez le contenu de apiGateway-js-sdk.zip que vous avez téléchargé précédemment dans le répertoire pets. Le contenu devrait inclure :
  • apiClient.js;
  • le dossier lib;
  • README.md.
Pour examiner le téléchargement, consultez Tutoriel AWS API Gateway, partie 2. Un fichier README.md se trouve déjà dans le répertoire pets; vous devrez donc renommer l’un des fichiers pour pouvoir les conserver tous les deux dans ce répertoire. Le fichier README.md de la passerelle API explique comment utiliser l’application API depuis votre application Auth0. Ouvrez le fichier index.html situé à la racine de votre dossier pets pour ajouter à index.html tous les scripts indiqués au haut du fichier README de l’API : 
<!-- scripts pour aws api gateway à inclure après avoir créé votre package depuis aws pour api gateway. -->
<script type="text/javascript" src="/lib/axios/dist/axios.standalone.js"></script>
<script type="text/javascript" src="/lib/CryptoJS/rollups/hmac-sha256.js"></script>
<script type="text/javascript" src="/lib/CryptoJS/rollups/sha256.js"></script>
<script type="text/javascript" src="/lib/CryptoJS/components/hmac.js"></script>
<script type="text/javascript" src="/lib/CryptoJS/components/enc-base64.js"></script>
<script type="text/javascript" src="/lib/moment/moment.js"></script>
<script type="text/javascript" src="/lib/url-template/url-template.js"></script>
<script type="text/javascript" src="/lib/apiGatewayCore/sigV4Client.js"></script>
<script type="text/javascript" src="/lib/apiGatewayCore/apiGatewayClient.js"></script>
<script type="text/javascript" src="/lib/apiGatewayCore/simpleHttpClient.js"></script>
<script type="text/javascript" src="/lib/apiGatewayCore/utils.js"></script>
<script type="text/javascript" src="/apigClient.js"></script>
Si vous ouvrez apigClient.js, vous verrez que la bibliothèque téléchargée a créé des fonctions d’enrobage comme petsPost et petsGet pour les méthodes de votre API. Vous n’avez pas besoin de modifier ce code généré.

​
Configurer la méthode getPets

Ouvrez home.js dans le dossier home, puis mettez à jour le contenu de getPets avec une méthode pour récupérer les données sur les animaux de compagnie (assurez-vous de mettre à jour la région si vous n’utilisez pas us-east-1) : 
function getPets() {
    // ceci n'est pas authentifié
    var apigClient = apigClientFactory.newClient({
        region: 'us-east-1' // La région où l'API est déployée
    });

    apigClient.petsGet({},{})
      .then(function(response) {
        console.log(response);
        $scope.pets = response.data;
        $scope.$apply();
      }).catch(function (response) {
        alert('pets get failed');
        showError(response);
    });
}
Copiez le code mis à jour dans votre compartiment S3. Actualisez la page pour voir deux animaux s’afficher (si vous avez exécuté le test décrit précédemment sur vos API, qui a créé ces animaux de compagnie).

​
Mettre à jour les animaux avec le service API AWS

Maintenant que vous disposez d’une application Auth0 fonctionnelle avec API Gateway, vous allez ajouter une méthode pour mettre à jour la table pets. Modifiez la logique de la méthode putPets afin de mettre à jour les animaux à l’aide de votre fonction d’API. Cette fonction servira à la fois à ajouter et à supprimer des animaux. 
function putPets(updatedPets) {
    var body = {pets: updatedPets};

    var apigClient = apigClientFactory.newClient({
        region: 'us-east-1' // définissez ceci sur la région dans laquelle vous exécutez votre application.
    });

    apigClient.petsPost({},body)
      .then(function(response) {
        console.log(response);
       }).catch(function (response) {
        alert('pets update failed');
        showError(response);
      });
}
Copiez le code mis à jour dans votre compartiment S3. Testez la méthode :
  1. Déconnectez-vous, puis reconnectez-vous.
  2. Saisissez des valeurs pour Pet Type et Pet Price.
  3. Cliquez sur Enregistrer pour envoyer vos données.
Vous devriez voir un message indiquant : “Nous avons un <Pet Type> à vendre pour <Pet Price>”, avec un bouton rouge SUPPRIMER à gauche. Pour renforcer la sécurité, ajoutez la fonction getSecureApiClient au début de la méthode putPets : 
function putPets(updatedPets) {
     var apigClient = getSecureApiClient();
}
Copiez le code dans votre compartiment S3. La fonction getSecureApiClient fournie récupère, dans le stockage local, le jeton AWS obtenu par délégation à l’API, puis utilise la clé d’accès, la clé secrète et le jeton de session : 
function getSecureApiClient() {
    var awstoken = store.get('awstoken');

    return apigClientFactory.newClient({
        accessKey: awstoken.AccessKeyId,
        secretKey: awstoken.SecretAccessKey,
        sessionToken: awstoken.SessionToken,
        region: 'us-east-1' // La région dans laquelle vous travaillez.
    });
  }