Scénario : Application monopage

Découvrez tout ce que vous devez savoir pour créer une application monopage. Pour obtenir des instructions concernant Azure Static Web Apps, consultez Authentification et autorisation pour Static Web Apps à la place.

Prise en main

Si vous ne l’avez pas déjà fait, créez votre première application en suivant le guide de démarrage rapide SPA JavaScript :

Démarrage rapide : application monopage

Vue d’ensemble

De nombreuses applications web modernes sont créées en tant qu’applications monopages côté client. Les développeurs les écrivent à l’aide de JavaScript ou d’un framework d’application monopage, comme Angular, Vue et React. Ces applications s’exécutent sur un navigateur web et présentent des caractéristiques d’authentification différentes de celles des applications web classiques côté serveur.

La plateforme d’identités Microsoft offre deux options pour permettre aux applications monopages d’effectuer la connexion des utilisateurs et d’obtenir des jetons pour accéder aux services back-end ou aux API web :

  • Flux de code d’autorisation OAuth 2.0 (avec PKCE). Le flux de code d’autorisation permet à l’application d’échanger un code d’autorisation pour obtenir des jetons d’ID afin de représenter l’utilisateur authentifié et des jetons d’accès nécessaires pour appeler des API protégées.

    La clé de vérification pour l’échange de code, ou PKCE, est une extension du flux de code d’autorisation pour empêcher les attaques par injection de code d’autorisation. Cette norme IETF atténue la menace d’interception d’un code d’autorisation, et active l’échange OAuth sécurisé à partir de clients publics, comme expliqué dans le document RFC 7636. De plus, elle retourne des jetons d’actualisation qui fournissent à votre application un accès à long terme à des ressources au nom d’utilisateurs sans nécessiter d’interaction de ces utilisateurs.

    L’utilisation du flux de code d’autorisation avec PKCE est l’approche d’autorisation plus sécurisée et recommandée, non seulement dans des applications JavaScript natives et basées sur un navigateur, mais pour tout type de client OAuth.

Authentification des applications monopages

  • Flux implicite OAuth 2.0. Le flux d’octroi implicite permet à l’application d’obtenir des jetons d’ID et d’accès. Contrairement au flux de code d’autorisation, le flux d’octroi implicite ne retourne pas de jeton d’actualisation.

Flux implicite des applications monopages

Ce flux d’authentification n’inclut pas de scénarios d’application utilisant des frameworks JavaScript multiplateformes, tels qu’Electron et React-Native. Ils exigent davantage de fonctionnalités pour l’interaction avec les plateformes natives.

Spécificités

Afin d’activer ce scénario pour votre application, vous avez besoin des éléments suivants :

  • Inscription de l’application auprès d’Azure Active Directory (Azure AD). Les étapes d’inscription diffèrent entre le flux d’octroi implicite et le flux de code d’autorisation.
  • Configuration de l’application avec les propriétés de l’application inscrite, comme l’ID d’application.
  • Utilisation de la bibliothèque d’authentification Microsoft pour JavaScript (MSAL.js) pour permettre au flux d’authentification de se connecter et d’acquérir des jetons.

Si vous débutez dans la gestion des identités et des accès (IAM) avec OAuth 2.0 et OpenID Connect, voire simplement avec IAM sur la plateforme d’identité Microsoft, les articles suivants doivent figurer en bonne position dans votre liste de lectures.

Bien que ces lectures ne soient pas requises avant d’effectuer votre premier démarrage rapide ou de suivre votre premier tutoriel, elles couvrent des aspects fondamentaux de la plate-forme, et une bonne connaissance de ceux-ci vous aidera à mesure que vous créerez des scénarios plus complexes.

Étapes suivantes

Passez à l’article suivant de ce scénario, Inscription d’application.