Fermer

juillet 11, 2019

Sécurisation de votre API Web à l'aide d'Azure Active Directory


Grande ou petite entreprise, toutes les entreprises ont besoin de la sécurité Web. Et quel meilleur moyen de sécuriser votre API Web ASP.NET Core que d’utiliser Azure Active Directory?

Étant donné que les applications de type MVC sont la force dominante sur le marché, la majorité de la documentation sur le sujet est centrée ici. Cela me laissait désirer créer une API Web faiblement couplée au lieu d'une application MVC, parcourir la documentation Microsoft, les questions relatives au débordement de pile et les exemples GitHub pour trouver des réponses.

Maintenant que j'ai terminé la tâche avec succès, j'aimerais partager la solution à vous tous dans une quête similaire. J'espère que mon guide aidera à accélérer le processus (et vous laissera bien paraître devant le patron).

Technologies utilisées

  1. Compte d'organisation Azure
  2. JavaScript
  3. ASP.NET Core
  4. NPM ou Yarn
  5. Adal.js

Prérequis

  1. Installez les langues répertoriées ci-dessus (à part Adal.js, nous le ferons plus tard) et votre choix d'un gestionnaire de paquets (NPM ou Yarn-I use Yarn).
  2. ] Assurez-vous d'avoir un compte Azure associé à une organisation
  3. J'utiliserai Visual Studio (pour l'API) et le code Visual Studio (pour le client) – Je vous recommande également de les utiliser également.

Étapes [19659015] Si vous souhaitez simplement passer au code, consultez l'exemple de projet que j'ai créé.

Création d'une structure d'API Web

Commençons par l'API. Tout cela sera fait dans Visual Studio.

  1. Créez le projet.
    1. Sélectionnez Fichier> Créer un nouveau projet
    2. Choisissez une application Web ASP.NET Core
    3. Nommez votre projet et cliquez sur «Créer»
    4. Sélectionnez «API»
    5. À droite sous «Authentification». il dit "Pas d'authentification." Cliquez sur l'option sous "Change"
    6. . Une fenêtre s'ouvre.
      1. Sélectionnez “Comptes professionnels ou scolaires”
      2. Dans “Domaine”, vous pouvez déjà indiquer l’adresse de votre organisation. Sinon, renseignez-le avec l'adresse «onmicrosoft» de votre entreprise (par exemple, perficient.onmicrosoft.com)
    7. Configuration
      1. Ouvrir appsettings.json
        1. Vous verrez un objet JSON intitulé «AzureAd». Remplacez-le par la structure ci-dessous, à l'aide des valeurs préexistantes Domain, TenantId et ClientId. S'ils n'existent pas, vous pouvez les obtenir à partir du registre d'applications de votre API. Laissez le public et l'émetteur en blanc pour le moment.

          Exemple
      2. [Optional] Test de point final
        1. Exécutez votre API avec IIS Express
        2. Notez que la page Web située sur localhost: [your_port] / api / values ​​génère une erreur 401. En effet, dans Controller> ValuesController.cs, l'attribut «[Authorize]» couvre la classe entière. Cela signifie que chaque noeud final défini ici nécessite une autorisation appropriée pour être accessible. Si vous supprimez l'attribut et essayez à nouveau, les données s'afficheront.

Sécurisez avec JWT et Azure AD

  1. Configuration de JWT
    1. Ouvrez le fichier Startup.cs
    2. Dans ConfigureServices (), vous ajoutez ceci à votre code:
      Exemple
  1. Sécurisez vos points de terminaison.
    1. Accédez à l'un de vos contrôleurs
    2. Pour demander une autorisation pour accéder à vos points de terminaison, nous allons utiliser l'attribut «[Authorize]». Pour sécuriser tous les points de terminaison du fichier, placez l'attribut au-dessus de la déclaration de classe. Pour sécuriser un seul point de terminaison, placez l'attribut uniquement au-dessus de la méthode.
  2. À vous de jouer
    1. Maintenant, c'est à vous. Ajoutez vos contrôleurs, modèles, accès à la base de données et tout ce dont vous avez besoin pour compléter votre API. Nous reverrons ce code à la fin pour renseigner les valeurs vides dans appsettings.json.

Configurer la structure du client

  1. Configuration du paquet
    1. Créez la structure de votre projet.
    2. J’utiliserai Yarn pour cet exemple, mais NPM a des commandes très similaires (Yarn est construit sur NPM)
    3. Initialize Yarn dans le dossier parent de votre client avec $ yarn init

      4. .

  1. Nous allons utiliser deux paquets, Adal.js et http-server. Installez ces:
    1. $ fil add http-server
    2. $ fil add adal-angular
      (Ne vous inquiétez pas de la partie angulaire, elle est également utilisée pour JS vanille)
  2. À vous de jouer
    1. À votre tour de configurer votre code côté client (si vous ne l’avez pas déjà fait). N'hésitez pas à écrire vos demandes CRUD déjà, il nous suffira d'ajouter une ligne à chacune d'entre elles après notre prochaine étape.

Integrate Adal.js

  1. Configuration de la connexion
    1. Créez un fichier JavaScript. Il servira de contrôleur de connexion.
    2. Ajoutez le code suivant:
      Exemple
      À l'exécution, cela vous installera et vous redirigera vers la page de connexion Microsoft.
    1. Accédez maintenant au Portail Azure et ouvrez l’enregistrement de l’application de votre client. Remplissez le ClientId avec votre ID d'application / client. Remplissez le locataire avec votre ID de répertoire / locataire.
    2. N'oubliez pas d'ajouter ce script à votre page de connexion (avant vos autres scripts)! Il se lancera automatiquement lors de la navigation vers la page.
    3. Vous pouvez appeler la déconnexion à votre guise, mais le programme ne fonctionnera pas tout seul. Après la déconnexion, la page sera (éventuellement) redirigée vers la page spécifiée dans le paramètre window.config «postLogoutRedirectUri»
  1. Extraction de jetons de support.
    1. Dans le fichier JavaScript contenant vos demandes d'API, ajoutez le code suivant:
      Exemple
    2. La variable "token" stocke le jeton porteur que nous utiliserons dans notre demande. Si vous utilisez XMLHttpRequest pour effectuer la demande, vous pouvez ajouter le jeton à l'en-tête de la demande à l'aide de: setRequestHeader (“Authorization”, `Bearer $ {token}`)

Configurer SSL

  1. Configurez OpenSSL sur votre machine
    1. Le guide que j'ai utilisé
  2. Exécutez la commande suivante pour générer votre clé et votre certificat (vous devrez peut-être exécuter votre terminal en tant qu'administrateur).
    $ openssl req -newkey rsa: 2048 -nouveau -nodes -x509 -days 3650 -keyout .pem -out cert.pem
  3. Placez key.pem et cert.pem dans votre dossier client
  4. Maintenant, lorsque vous allez exécuter http-server, utilisez les indicateurs suivants:
    $ http-server -S -C cert.pem –o
  5. Lorsque votre projet est en cours d'exécution, copiez le jeton que nous avions précédemment imprimé à partir de la console et enregistrez-le pour l'étape suivante.

Enregistrement Azure App

.

  1. Accédez au portail Azure et connectez-vous à l'aide du domaine de votre organisation
  2. Sélectionnez «Azure Active Directory», puis «Enregistrements d'application» (à gauche)
  3. Vous devriez déjà voir votre application API inscrit. Sinon, répétez l'étape suivante pour votre application API.
  4. Enregistrez votre application client.
    1. Cliquez sur “Nouvel enregistrement”
    2. Entrez le nom de votre choix (vous pourrez le modifier ultérieurement) et cliquez sur “Enregistrer”
  5. Paramètres de l'API
    1. Sélectionnez votre application API
    2. Authentification
      1. Sélectionnez l'onglet “Authentification”
      2. Cochez les cases “Jetons d'accès” et “Jetons d'identification”
      3. Save
    3. Manifeste
      1. Sélectionnez l'onglet "Manifest"
      2. Recherchez "oauth2AllowIdTokenImplicitFlow" et "oauth2AllowImplicitFlow" – définissez ces deux fonctions sur
      3. Save

        4. .

  6. Paramètres du client
    1. Sélectionnez votre application client
    2. Authentification
      1. Sélectionnez l'onglet “Authentification”
      2. Pour votre URI de redirection, entrez la page où vous vous connecterez.
        1. Cela se trouve en regardant sur la page sur laquelle vous vous trouvez lorsque votre code Adal.js appelle login ()
        2. Si vous obtenez une erreur sur le login Microsoft indiquant que l'URL de réponse ne correspond pas à ce qui est attendu, décodez l'URL de cette page. L'URL de réponse devrait être correct.
      3. Pour votre URL de déconnexion, entrez la page vers laquelle vous souhaitez être redirigé après la déconnexion
      4. Save
    3. Autorisations d'API
      1. Sélectionnez l'onglet “Autorisations d'API”
      2. Cliquez sur “Ajouter une autorisation”
      3. Sélectionnez l'onglet “Mes API” dans la fenêtre qui s'ouvre
      4. Sélectionnez votre application API
      5. Cliquez sur “Autorisations déléguées ”Et“ user_impersonation ”
    4. Manifeste
      1. Sélectionnez l'onglet "Manifest"
      2. Recherchez "oauth2AllowIdTokenImplicitFlow" et "oauth2AllowImplicitFlow" – définissez ces deux fonctions sur
      3. Save

        4. .

  7. Mise à jour des configurations d'API
    1. Ouvrir appsettings.json
      1. Pour TenantId, entrez l'ID de répertoire / locataire dans la vue d'ensemble des enregistrements de l'application Azure de votre API
      2. . Pour ClientID, entrez l'ID application / client de la même page.
      3. Saisissez le jeton de support que nous avons enregistré précédemment et collez-le dans. le formulaire sous jwt.io.
      4. Pour le public, entrez la valeur trouvée sous “aud” ici.
      5. Pour l'émetteur, saisissez l'URL de base à partir de “iss” (par exemple, https://sts.windows.net/).
    2. [Optional] Ouvrir les propriétés> launchSettings.json
      1. Modifiez les valeurs «launchUrl» pour qu'elles correspondent aux données de terminal que vous souhaitez voir lors du lancement d'IIS Express

Vous devriez maintenant avoir terminé! Démarrez IIS Express et le serveur http (à l'aide de la commande ci-dessus pour ajouter SSL) et testez-le. Si vous avez des commentaires ou des doutes sur mon code ou sur la marche à suivre pour le reproduire, n'hésitez pas à m'envoyer un e-mail à l'adresse josh.kostal@perficient.com

Le meilleur outil 2023 pour ta croissance Instagram !



Source link