Applications à page unique

Avec IBM Cloud® App ID, vous pouvez rapidement ajouter des processus d'autorisation et d'authentification à vos applications à page unique (SPA). Ce type d'application s'exécute intégralement dans votre navigateur, sans système de back end à gérer et ne nécessite aucun rechargement de page lorsque l'application est en cours d'utilisation. Angular et Reactsont des infrastructures communes utilisées avec les agents de service de service (SPA).

Votre application fonctionne-t-elle avec un système de back end que vous contrôlez ? Dans ce cas, le flux d'application à page unique (SPA) ne vous convient pas. Essayez le flux d'application Web.

Comprendre le flux

Bien qu'il s'agisse de la norme industrielle actuelle pour les SPA, le groupe de travail OAuth ne recommande plus l'utilisation du flux implicite en raison de plusieurs problèmes de sécurité. Sur la base de leurs conseils, App ID est configuré pour utiliser le flux de codes d'autorisation avec PKCE.

Flux d'autorisation
flux d'autorisation des
à page unique*

  1. Un utilisateur tente de se connecter à votre application à page unique.
  2. Le logiciel SDK App ID crée un vérificateur de code pour la demande d'autorisation, qui est la version en texte clair de la demande d'authentification de code. En même temps que la demande d'autorisation, le client envoie la demande d'authentification de code et la méthode de demande d'authentification utilisée pour coder cette demande.
  3. Le flux d'authentification est démarré par App ID dans une nouvelle fenêtre.
  4. L'utilisateur choisit un fournisseur d'identité pour l'authentification et termine le processus de connexion.
  5. Le logiciel SDK App ID sur l'application reçoit le code d'octroi d'autorisation
  6. Le logiciel SDK envoie ensuite une demande XHR au noeud final du jeton App ID en ajoutant le code d'octroi d'autorisation et le vérificateur de code pour obtenir des jetons d'accès et d'identité.

Utilisez-vous la connexion unique (SSO) pour Cloud Directory ? Vous pouvez utiliser le logiciel SDK du client App ID pour obtenir automatiquement une nouvelle paire de jetons sans exiger que l'utilisateur signe explicitement. Pour plus d'informations, voir Connexion silencieuse.

Pourquoi un code d'autorisation + PKCE ?

De par leur nature, les applications à page unique ne sont pas en mesure de stocker les valeurs confidentielles de manière sécurisée. Le flux d'autorisation + PKCE, qui est une variante du flux de code d'autorisation OAuth 2.0, utilise un vérificateur de code à usage unique et une demande d'authentification (challenge) au lieu d'une valeur confidentielle pour régler le problème. Le vérificateur et le défi veillent à ce que l'entité qui appelle les nœuds finaux d'autorisation et de jeton soient les mêmes. Ce processus signifie qu'un pirate ne serait pas en mesure de demander des jetons à partir du serveur d'autorisation sans connaître également le vérificateur de code.

Bien que le flux implicite soit la norme actuelle de l'industrie, plusieurs failles de sécurité peuvent être trouvées. Par exemple, le flux implicite utilise des URI de redirection pour obtenir des jetons, ce qu'évite le flux d'autorisation + PKCE en utilisant à la place une demande XHR. En raison des failles de sécurité, le flux implicite n'est plus recommandé, ni considéré comme sûr, pour les motifs suivants :

  • Le flux implicite renvoie des jetons en tant que partie de l'URL - comme paramètre de requête ou dans le fragment de hachage. Ainsi, les jetons peuvent être interceptés et être accessibles. Les jetons peuvent être sauvegardés dans l'historique ou les journaux de navigateur d'un utilisateur. L'historique ou les journaux peuvent être stockés dans un service cloud et envoyés à plusieurs appareils, ce qui augmente également les risques.

  • Le flux implicite est susceptible de faire l'objet d'une attaque par URI de redirection, ce qui signifie qu'un pirate peut remplacer un URI de redirection approuvé par une destination de son choix. En cas d'attaque d'URI de redirection, les utilisateurs suivent le lien modifié pour autoriser leur client. Après l'autorisation, ils sont redirigés vers l'URI de l'attaquant qui peut ainsi avoir accès aux jetons légitimes des utilisateurs.

Les exemples précédents ne représentent que quelques-uns des problèmes majeurs. Pour plus d'informations, voir OAuth 2.0 meilleures pratiques actuelles en matière de sécurité.

Avant de commencer

Avant de commencer, assurez-vous de disposer des prérequis suivants.

  • Une instance du service App ID.
  • Vos URI de redirection définis dans le tableau de bord du service App ID.
  • Une application à page unique. Si vous n'en avez pas et que vous souhaitez tester le flux, essayez de télécharger l'exemple d'application sur la page de présentation du tableau de bord App ID.

Création de données d'identification d'application

avec l'interface graphique utilisateur

Vos données d'identification sont utilisées pour connecter votre application au service App ID. Pour créer vos données d'identification, enregistrez votre application avec App ID.

Aucun secret client n'est renvoyé dans vos données d'identification de zone de mémoire auxiliaire. Un secret dans le flux d'autorisation + PKCE n'est pas nécessaire. Vous ne pouvez pas utiliser des données d'identification d'application Web ordinaire dans votre flux d'application à page unique.

  1. Connectez-vous au tableau de bord IBM Cloud dans la région dans laquelle vous souhaitez travailler.
  2. Accédez à l'onglet Applications et cliquez sur Ajouter une application.
  3. Attribuez un nom à votre application.
  4. Sélectionnez Application à page unique dans la liste déroulante Type.
  5. Cliquez sur Sauvegarder.
  6. Dans le tableau, cliquez sur Afficher les données d'identification pour voir les informations nécessaires dans la configuration suivante.

Création de données d'identification d'application avec l'API

Vos données d'identification sont utilisées pour connecter votre application au service App ID. Pour créer vos données d'identification, enregistrez votre application avec App ID.

Aucun secret client n'est renvoyé dans vos données d'identification de zone de mémoire auxiliaire. Un secret dans le flux d'autorisation + PKCE n'est pas nécessaire. Vous ne pouvez pas utiliser des données d'identification d'application Web ordinaire dans votre flux d'application à page unique.

  1. Adressez la demande de poste suivante au /management/v4/Noeud final /applications.

    curl -X POST \
https://us-south.appid.cloud.ibm.com/management/v4/<tenantID>/applications/ \
-H 'accept: application/json' \
-H 'Authorization: Bearer <IAMToken>' \
-H 'Content-Type: application/json' \
-d '{"name": "MySampleSPA", "type": "singlepageapp"}'

    Exemple de réponse :

    {
   "clientId": "<clientID>",
   "tenantId": "<tenantID>",
   "name": "MySampleSPA",
   "oAuthServerUrl": "https://us-south.appid.cloud.ibm.com/oauth/v4/<tenantID>",
   "type": "singlepageapp"
}

Configuration du SDK JavaScript

Pour installer le logiciel SDK dans votre application, utilisez les étapes suivantes pour vous guider.

  1. En utilisant l'invite de commande, accédez au répertoire contenant votre application.

  2. Installez le service App ID en utilisant NPM ou en liant le réseau de diffusion de contenu (CDN) dans votre fichier HTML principal.

    • Pour utiliser NPM, exécutez la commande suivante.

      npm install ibmcloud-appid-js

    • Pour ajouter le réseau de diffusion de contenu, ajoutez le lien suivant à votre fichier HTML principal.

      <script src="https://cdn.appid.cloud.ibm.com/appid-0.3.0.min.js"></script>

  3. Ajoutez votre ID client (clientId) et le noeud final de reconnaissance (discoveryEndpoint) à votre application pour initialiser le logiciel SDK.

    const appID = new AppID();
await appID.init({
   clientId: '<spaClientID>',
   discoveryEndpoint: '<wellKnownEndpoint>'
});

  4. Dans le code de votre application, après la configuration du bouton de connexion, ajoutez un appel dans la section signin. Une fenêtre en incrustation s'ouvre pour inviter l'utilisateur à saisir ses données d'identification. Après une authentification réussie, l'écran se ferme et l'utilisateur est authentifié.

    const tokens = await appID.signin();

Configuration de la connexion silencieuse

Lorsque la connexion unique pour Cloud Directory est activée, vous pouvez obtenir automatiquement de nouveaux jetons pour un utilisateur sans nécessiter de nouvelle authentification de sa part, en utilisant la connexion silencieuse. Pour activer la connexion silencieuse, utilisez les étapes suivantes pour vous guider.

Les jetons d'actualisation ne sont pas renvoyés dans le flux de l'application à page unique (SPA).

  1. Dans le tableau de bord App ID, accédez à Cloud Directory > Connexion unique.

  2. Faites basculer Activer la connexion unique sur Activé.

  3. Cliquez sur Sauvegarder.

  4. Ajoutez le code suivant à votre application. Veillez à configurer votre application pour que le bouton de connexion s'affiche en cas d'échec de la connexion silencieuse.

    const tokens = await appID.silentSignin();
if (!tokens) {
   document.getElementById('login').addEventListener('click', async () => {
   const tokens = await appID.signin();
   });
}