Tutoriel Passerelle AWS API – Étape 3

Au cours de cette étape, vous allez créer une application à page unique sans serveur en utilisant le cadre d’applications AngularJS, que vous déploierez à partir d’un groupe AWS S3 configuré pour fonctionner comme un site Web statique.

Pour une application de démarrage simple, téléchargez un exemple de projet propre à 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 votre application Auth0 AUTH0_CLIENT_ID et AUTH0_CLIENT_ID (ces informations sont accessibles dans le Management Dashboard pour l’application en question).

Assurez-vous que vous avez créé le groupe AWS S3 configuré pour agir comme un site Web statique. Pendant le processus d’installation, copiez le contenu du dossier pets dans votre groupe S3 pour fournir du contenu au site Web.

Si vous utilisez un groupe existant, vous pouvez déplacer les fichiers à l’aide de l'interface de ligne de commande  AWS en exécutant la commande suivante.

aws s3 cp --recursive --acl "public-read" ./ s3://{yourBucket}/

Avant de poursuivre, assurez-vous de disposer d’au moins un utilisateur associé à votre connexion Nom d’utilisateur-Mot de passe-Authentification (ou à la connexion de la base de données liée à l’application que vous utilisez). Pour tirer pleinement parti des fonctionnalités de votre exemple d’application et de son intégration avec AWS, vous devrez vous assurer que cet utilisateur teste l’authentification et en obtienne l’accès.

Enfin, assurez-vous qu’Auth0 autorise l’authentification depuis votre site Web en fournissant l’URL dans le champ Origines autorisées sur la page de paramètres de votre application. L’URL de votre site Web ressemblera à ceci :

http://your-bucket.s3-website-us-east-1.amazonaws.com

Si vous ne savez pas quelle est votre URL, vous pouvez la trouver sous l’onglet Propriétés de votre groupe S3.

Avant d’aller plus loin, effectuez un test de connexion à 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 indiquant « getPets non implémenté » :

La page qui vous permet de visualiser les animaux de compagnie, s’affiche également.

À ce stade, vous avez configuré l’authentification avec Auth0 et vous disposez d’un JWT OpenID. Voici la structure du répertoire pour le code généré :

Vous pouvez exploiter la fonctionnalité de délégation d’Auth0 pour obtenir un jeton d’accès AWS à partir du jeton d’identité Auth0. En arrière-plan, Auth0 authentifie votre jeton d’identité, puis utilise SAML en fonction du 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. Veuillez noter que tout utilisateur non connecté utilisant une connexion sociale est traité comme un administrateur. Plus tard, nous coderons un deuxième rôle et montrerons de meilleures façons d’appliquer la sélection de rôle.

auth.signin(params, function(profile, token) {
  //Set user as admin if they did not use a social login.
  profile.isAdmin = !profile.identities[0].isSocial;
  store.set('profile', profile);
  store.set('token', token);

  // get delegation token from identity token.
  var options = getOptionsForRole(profile.isAdmin, token);

  // TODO: Step 3: Enable this section once you setup AWS delegation.
  /*
  auth.getToken(options)
    .then(
      function(delegation)  {
        store.set('awstoken', delegation.Credentials);
        $location.path("/");
      },
    function(err) {
       console.log('failed to acquire delegation token', err);
  });
  */
  // TODO: Step 3: Remove this redirect after you add the get token API.
  $location.path("/");

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

Pour modifier les chaînes role et principal (qui sont les deux dernières lignes de la déclaration if contenue dans la fonction fournie), spécifiez les valeurs appropriées via Règles :

function (user, context, callback) {
  if (context.clientID === 'CLIENT_ID' &&
      context.protocol === 'delegation') {
    // set AWS settings
    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 mettre à jour les valeurs ARN role et [principal] avec celles de votre intégration.

Copiez les fichiers mis à jour dans votre groupe S3 pour votre site Web.

En option, vous pouvez définir un point d’arrêt dans le navigateur à store.set(’awstoken’, delegation.Credentials);. Lorsque vous vous déconnectez et vous vous reconnectez, inspectez delegation.Credentials quand vous arrivez au point d’arrêt. Vous constaterez 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 ces valeurs n’apparaissent pas, vérifiez que le module complémentaire Amazon Web Services est activé dans l’onglet Modules complémentaires de votre application Auth0.

La première étape consiste à présenter les animaux de compagnie aux utilisateurs finaux.

Pour ajouter le code API permettant d’effectuer un appel à votre service, copiez le contenu de apiGateway-js-sdk.zip, que vous avez précédemment téléchargé, dans le répertoire pets. Le contenu doit inclure :

• apiClient.js;

• dossier lib;

• README.md.

Pour examiner le téléchargement, veuillez consulter Tutoriel sur la passerelle API AWS, deuxième partie.

Il existe déjà un fichier README.md dans le répertoire pets, vous devrez donc renommer l’un des fichiers afin de conserver les deux dans le même répertoire. Le fichier README.md pour la passerelle API explique comment utiliser l’application API à partir de votre application Auth0.

Ouvrez le fichier index.html situé à la racine de votre dossier pets, pour ajouter tous les scripts répertoriés en haut du fichier readme de l’API à index.html:

<!-- scripts for aws api gateway include after you create your package from aws for api gateway. -->
<script type="text/javascript" src="/docs/lib/axios/dist/axios.standalone.js"></script>
<script type="text/javascript" src="/docs/lib/CryptoJS/rollups/hmac-sha256.js"></script>
<script type="text/javascript" src="/docs/lib/CryptoJS/rollups/sha256.js"></script>
<script type="text/javascript" src="/docs/lib/CryptoJS/components/hmac.js"></script>
<script type="text/javascript" src="/docs/lib/CryptoJS/components/enc-base64.js"></script>
<script type="text/javascript" src="/docs/lib/moment/moment.js"></script>
<script type="text/javascript" src="/docs/lib/url-template/url-template.js"></script>
<script type="text/javascript" src="/docs/lib/apiGatewayCore/sigV4Client.js"></script>
<script type="text/javascript" src="/docs/lib/apiGatewayCore/apiGatewayClient.js"></script>
<script type="text/javascript" src="/docs/lib/apiGatewayCore/simpleHttpClient.js"></script>
<script type="text/javascript" src="/docs/lib/apiGatewayCore/utils.js"></script>
<script type="text/javascript" src="/docs/apigClient.js"></script>

Si vous ouvrez le fichier apigClient.js, vous pouvez constater que la bibliothèque téléchargée a créé des enveloppeurs comme petsPost et petsGet, pour vos méthodes API. Vous n’avez pas besoin de modifier ce code généré.

Ouvrez le fichier home.js dans le dossier home et mettez à jour le contenu de getPets avec une méthode de récupération des données sur les animaux de compagnie (assurez-vous de mettre à jour la région si l’exécution n’a pas lieu dans us-east-1) :

function getPets() {
    // this is unauthenticated
    var apigClient = apigClientFactory.newClient({
        region: 'us-east-1' // The region where the API is deployed
    });

    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 groupe S3. Rafraîchissez la page pour afficher deux animaux répertoriés, à condition d’avoir effectué le test décrit précédemment sur vos API, ayant créé ces animaux de compagnie.

Maintenant que vous disposez d’une application Auth0 fonctionnelle avec la passerelle API, vous pouvez ajouter une méthode pour mettre à jour le tableau pets.

Modifier la logique de la méthode putPets pour mettre à jour les animaux de compagnie à l’aide de la fonction API. Cette fonction sera utilisée à la fois pour ajouter et supprimer des animaux de compagnie.

function putPets(updatedPets) {
    var body = {pets: updatedPets};

    var apigClient = apigClientFactory.newClient({
        region: 'us-east-1' // set this to the region you are running in.
    });

    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 groupe S3. Testez la méthode :

1. Déconnectez-vous et reconnectez-vous.

2. Saisissez les valeurs pour Pet Type et Pet Price.

3. Cliquez sur Enregistrer pour publier vos données.

Le message « We have a <Pet Type> for sale for <Pet Price> », s’affiche avec un bouton rouge RETIRER sur la gauche.

Pour ajouter de 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 groupe S3.

La fonction getSecureApiClient fournie pour vous vous permettra de récupérer le jeton AWS à partir du stockage local acquis à l’aide de la délégation à l’API et utilise la clé d’accès, le secret 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' // The region you are working out of.
    });
  }