Next.js

nextjs-auth est un exemple d'intégration de casdoor dans un projet next-js. Nous allons vous guider à travers les étapes ci-dessous.

Étape 1 : Déployer Casdoor

Tout d'abord, Casdoor doit être déployé.

Vous pouvez vous référer à la documentation officielle de Casdoor pour l'Installation du Serveur. Veuillez déployer votre instance Casdoor en mode production.

Après un déploiement réussi, assurez-vous de ce qui suit :

• Ouvrez votre navigateur préféré et visitez http://localhost:8000. Vous verrez la page de connexion de Casdoor.
• Testez la fonctionnalité de connexion en entrant admin comme nom d'utilisateur et 123 comme mot de passe.

Après cela, vous pouvez rapidement mettre en œuvre une page de connexion basée sur Casdoor dans votre propre application en suivant les étapes suivantes.

Étape 2 : Ajouter un Middleware

Le Middleware vous permet d'exécuter du code avant qu'une requête ne soit complétée. Ensuite, en fonction de la requête entrante, vous pouvez modifier la réponse en réécrivant, redirigeant, modifiant les en-têtes de la requête ou de la réponse, ou en répondant directement.

Utilisez le fichier middleware.ts (ou .js) à la racine de votre projet pour définir le Middleware. Par exemple, au même niveau que pages ou app, ou à l'intérieur de src si applicable.

Exemple

//define which paths Middleware will run on
const protectedRoutes = ["/profile"];

export default function middleware(req) {
  if (protectedRoutes.includes(req.nextUrl.pathname)) {
    //redirect the incoming request to a different URL
    return NextResponse.redirect(new URL("/login", req.url));
  }
}

Voir la documentation officielle de next.js middleware pour plus de détails.

Étape 3 : Utiliser le SDK Casdoor

1.Installer le SDK

Tout d'abord, installez casdoor-js-sdk via NPM ou Yarn :

npm install casdoor-js-sdk

Ou :

yarn add casdoor-js-sdk

2.Initialiser le SDK

Ensuite, initialisez 6 paramètres de type chaîne de caractères dans l'ordre suivant :

Nom	Requis	Description
serverUrl	Oui	URL du serveur Casdoor, comme http://localhost:8000
clientId	Oui	ID client de l'application
clientSecret	Oui	Secret client de l'application
organizationName	Oui	Organisation de l'application
appName	Oui	Nom de l'application
redirectPath	Oui	URL redirigée

Exemple

const sdkConfig = {
  serverUrl: "https://door.casdoor.com",
  clientId: "294b09fbc17f95daf2fe",
  clientSecret: "dd8982f7046ccba1bbd7851d5c1ece4e52bf039d",
  organizationName: "casbin",
  appName: "app-vue-python-example",
  redirectPath: "/callback",
};

prudence

Remplacez les valeurs de configuration par celles de votre propre instance Casdoor, en particulier le clientId, clientSecret, et serverUrl.

3.Rediriger vers la Page de Connexion

Lorsque vous avez besoin d'authentifier les utilisateurs qui accèdent à votre application, vous pouvez envoyer l'URL cible et rediriger vers la page de connexion fournie par Casdoor.

Assurez-vous d'avoir ajouté l'URL de rappel (par exemple http://localhost:8080/callback) dans la configuration de l'application au préalable.

const CasdoorSDK = new Sdk(sdkConfig);
CasdoorSDK.signin_redirect();

4.Obtenir le Token et le Stockage

Après que la vérification Casdoor est passée, elle redirigera vers votre application avec le token.

Vous pouvez choisir d'utiliser un cookie pour stocker le token.

CasdoorSDK.exchangeForAccessToken()
  .then((res) => {
    if (res && res.access_token) {
      //Get Token
      return CasdoorSDK.getUserInfo(res.access_token);
    }
  })
  .then((res) => {
    // Storage Token
    Cookies.set("casdoorUser", JSON.stringify(res));
  });

Vous pouvez vous référer à la documentation officielle de Casdoor pour Comment utiliser le SDK Casdoor.

Étape 4 : Ajouter une Fonction d'Authentification Middleware

lorsque les utilisateurs tentent d'accéder à une route protégée, la fonction d'Authentification Middleware vérifie leur identité. Si l'utilisateur n'est pas authentifié, il est redirigé vers une page de connexion ou l'accès lui est refusé.

Exemple

//protected route
const protectedRoutes = ["/profile"];
const casdoorUserCookie = req.cookies.get("casdoorUser");
const isAuthenticated = casdoorUserCookie ? true : false;

//Authentication Function
if (!isAuthenticated && protectedRoutes.includes(req.nextUrl.pathname)) {
  return NextResponse.redirect(new URL("/login", req.url));
}