Module de d'authentification azure pour les applications React

Ce module npm moduleauthazureapp est un package conçu pour être utilisé avec React. Il offre deux fonctionnalités principales : la connexion et la déconnexion à l'aide des identifiants Microsoft, ainsi que la protection des routes d'application.

Grâce à ce module, vous pouvez facilement intégrer un processus de connexion et de déconnexion dans votre application React en utilisant les identifiants Microsoft. Cela permet aux utilisateurs de se connecter à leur compte Microsoft, offrant ainsi une expérience d'authentification sécurisée et simplifiée.

De plus, le module "moduleauthazureapp" fournit également des fonctionnalités pour protéger les routes de votre application. Vous pouvez définir des routes spécifiques comme étant accessibles uniquement aux utilisateurs connectés, garantissant ainsi que seules les personnes authentifiées peuvent accéder à certaines parties de votre application.

Avec moduleauthazureapp, vous pouvez ajouter facilement des fonctionnalités de connexion sécurisées et de protection des routes à votre application React, tout en utilisant les identifiants Microsoft pour une expérience utilisateur optimale.

Configuration

Le module de Logs API est configurable via quatre variables d'environnement :

• azureGatewayAPI : l'URL de l'API Azure Gateway, cette api gere l'acces à azure AD Cette variable est obligatoire.
• tenantId : Le tenantId est l'identifiant de locataire qui est l'identifiant de l'Azure AD Cette variable est obligatoire.
• clientId : Le clientId est l'identifiant unique qui est spécifique à votre application dans Azure AD Cette variable est obligatoire.
• redirectUri : Le redirectUri (URI de redirection) est une URL spécifique vers laquelle une application est redirigée après une opération d'authentification réussie. Il s'agit de l'adresse où l'utilisateur est renvoyé après avoir fourni ses informations d'identification et s'être authentifié avec succès. Cette variable est obligatoire.

Note Azure pour les nuls (comme moi ). Imagine que tu as une grande boîte appelée "Azure Active Directory" (Azure AD) et l'identifiant de locataire, le tenant id est comme le nom de la grande boîte Azure AD, à l'intérieur de cette grande boîte, il y a de nombreuses petites boîtes, chacune contenant une application. Chaque petite boîte à une étiquette spéciale qui l'identifie appelée "clientId". Ainsi, l'identifiant de locataire est comme le nom de la grande boîte Azure AD, tandis que le clientId est comme le nom de chaque petite boîte d'application à l'intérieur de la grande boîte.

Note Ces deux étiquettes sont importantes lorsque les applications veulent parler à la grande boîte Azure AD. L'identifiant de locataire indique à quelle organisation ou service appartient l'application, et le clientId indique quelle application spécifique est en train de parler.

Installation

Pour installer le module, utilisez npm en exécutant la commande suivante :

npm install moduleauthazureapp

Elément exposé et utilisation

initConfig

Cette méthode permet d'initialiser la configuration nécessaire pour utiliser le module "@azure/msal-browser" et l'authentification avec Azure Active Directory. La méthode initConfig prend les paramètres suivants :

clientId : l'ID du client de l'application Azure AD. tenantId : l'ID du locataire Azure AD. redirectUri : l'URI de redirection après l'authentification. azureGatewayAPI : l'URL de l'API Azure Gateway; urlLogin (optionnel) : l'URL de la page de connexion, par défaut "/";

La méthode retourne un objet de configuration qui peut être utilisé pour initialiser le module MSAL. En utilisant cette méthode, vous pouvez configurer et personnaliser le module MSAL pour votre application, en spécifiant les informations d'authentification, l'emplacement du cache et les options de journalisation.

Utilisation

// app.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { PublicClientApplication } from '@azure/msal-browser';
import { MsalProvider } from '@azure/msal-react';
import { initConfig } from "moduleauthazureapp"

async function initializeApp() {
  var msalConfig = await initConfig("53fef79b-ff37-4a13-951d-2dc737f15b64", "091cc566-b641-44cd-8417-6dea6b16abae", "http://localhost:3000/", "http://localhost:3010");

  const msalInstance = new PublicClientApplication(msalConfig);

  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <React.StrictMode>
      <MsalProvider instance={msalInstance}>
        <App />
      </MsalProvider>
    </React.StrictMode>
  );
}

initializeApp();
 

SignInButton

Cette méthode est un composant React appelé "SignInButton" qui utilise le module "@azure/msal-react" pour gérer la connexion de l'utilisateur.

Le composant "SignInButton" prend un enfant composant et l'affiche en lui ajoutant la propriété onClick. Lorsque le composant est cliqué, il déclenche la fonction handleLogin qui effectue une connexion redirigée pour démarrer le processus de connexion en redirigeant l'utilisateur vers la page de connexion Azure AD.

Utilisation

import { SignInButton } from "moduleauthazureapp";
import ButtonExempleLogin from "./ButtonExempleLogin"

.
.
.

<SignInButton >
    <ButtonExempleLogin > </ButtonExempleLogin>
</SignInButton>
 

Logout

Cette méthode est une composante React appelée "Logout" qui utilise le module "@azure/msal-react" pour gérer la déconnexion de l'utilisateur.

Si des comptes d'utilisateur sont présents, le composant supprime le jeton d'accès (accessToken) du stockage local (localStorage). Ensuite, il effectue une redirection vers la page de déconnexion Azure AD

Si aucun compte d'utilisateur n'est présent, le composant redirige simplement l'utilisateur vers l'URL de connexion spécifiée dans la configuration qui a été founir à l'aide de la methode initConfig avec le paramètre urlLogin.

Utilisation

import { logout } from "moduleauthazureapp"
import { BrowserRouter, Routes, Route } from "react-router-dom"

<BrowserRouter>
    <Routes>
        <Route path="/logout" exact element={<Logout />} />
    </Routes>
</BrowserRouter>

RequireAuth

Ce composant React appelé "RequireAuth" est utilisé pour protéger certaines routes de l'application en exigeant une authentification et une autorisation appropriées.

Le composant "RequireAuth" utilise les modules react-router-dom et @azure/msal-react pour gérer la navigation et l'authentification avec Azure AD.

Le composant "RequireAuth" nécessite que l'utilisateur fournisse une liste de rôles autorisés en utilisant l'attribut ArrayRoles. Cette liste de rôles permet au composant de vérifier si l'utilisateur possède l'autorisation appropriée pour accéder à une route sécurisée.

Utilisation

import { RequireAuth } from "moduleauthazureapp"
import { BrowserRouter, Routes, Route } from "react-router-dom"
import ChildComposat from "./exemple" 

<BrowserRouter>
    <Routes>
        <Route path="/exemple"  element={<RequireAuth ArrayRoles={['admin', 'manager']}> <ChildComposat /> </RequireAuth>} />
    </Routes>
</BrowserRouter>

Support

Nous espérons que le module de Auth azure APP sera utile pour la connexion et la deconnexion de vos utilisateur microsoft et pour securiser vos route d'apllication. Si vous avez des questions ou des commentaires, n'hésitez pas à nous contacter à [email protected]