Next.js

nextjs-auth ist ein Beispiel, wie man Casdoor in einem Next.js-Projekt integrieren kann. Wir werden Sie durch die folgenden Schritte führen.

Schritt 1: Casdoor bereitstellen

Zuerst sollte Casdoor bereitgestellt werden.

Sie können sich auf die offizielle Dokumentation von Casdoor für die Server-Installation beziehen. Bitte stellen Sie Ihre Casdoor-Instanz im Produktionsmodus bereit.

Nach einer erfolgreichen Bereitstellung stellen Sie sicher, dass Folgendes:

• Öffnen Sie Ihren bevorzugten Browser und besuchen Sie http://localhost:8000. Sie werden die Anmeldeseite von Casdoor sehen.
• Testen Sie die Anmeldefunktionalität, indem Sie admin als Benutzernamen und 123 als Passwort eingeben.

Danach können Sie schnell eine Casdoor-basierte Anmeldeseite in Ihrer eigenen App mit den folgenden Schritten implementieren.

Schritt 2: Middleware hinzufügen

Middleware ermöglicht es Ihnen, Code auszuführen, bevor eine Anfrage abgeschlossen ist. Dann können Sie basierend auf der eingehenden Anfrage die Antwort durch Umschreiben, Umleiten, Modifizieren der Anfrage- oder Antwort-Header oder direktes Antworten ändern.

Verwenden Sie die Datei middleware.ts (oder .js) im Wurzelverzeichnis Ihres Projekts, um Middleware zu definieren. Zum Beispiel auf derselben Ebene wie pages oder app, oder innerhalb von src, falls zutreffend.

Beispiel

//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));
  }
}

Siehe die offizielle Dokumentation von Next.js middleware für weitere Details.

Schritt 3: Casdoor SDK verwenden

1.SDK installieren

Installieren Sie zuerst casdoor-js-sdk über NPM oder Yarn:

npm install casdoor-js-sdk

Oder:

yarn add casdoor-js-sdk

2.SDK initialisieren

Dann initialisieren Sie 6 Zeichenketten-Typ-Parameter in der folgenden Reihenfolge:

Name	Erforderlich	Beschreibung
serverUrl	Ja	Casdoor Server-URL, wie http://localhost:8000
clientId	Ja	Anwendungskunden-ID
clientSecret	Ja	Anwendungskunden-Geheimnis
organizationName	Ja	Anwendungsorganisation
appName	Ja	Anwendungsname
redirectPath	Ja	umgeleitete URL

Beispiel

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

Vorsicht

Ersetzen Sie die Konfigurationswerte durch Ihre eigenen Casdoor-Instanz, insbesondere die clientId, clientSecret und serverUrl.

3.Zur Anmeldeseite umleiten

Wenn Sie Benutzer authentifizieren müssen, die auf Ihre App zugreifen, können Sie die Ziel-URL senden und zur Anmeldeseite umleiten, die von Casdoor bereitgestellt wird.

Stellen Sie sicher, dass Sie die Callback-URL (z.B. http://localhost:8080/callback) vorher in der Anwendungskonfiguration hinzugefügt haben.

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

4.Token erhalten und speichern

Nachdem die Casdoor-Überprüfung bestanden ist, wird es mit Token zurück zu Ihrer Anwendung umgeleitet.

Sie können sich dafür entscheiden, ein Cookie zu verwenden, um das Token zu speichern.

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));
  });

Sie können sich auf die offizielle Dokumentation von Casdoor für die Verwendung des Casdoor SDK beziehen.

Schritt 4: Middleware-Authentifizierungsfunktion hinzufügen

Wenn Benutzer versuchen, auf eine geschützte Route zuzugreifen, überprüft die Middleware-Authentifizierungsfunktion ihre Identität. Wenn der Benutzer nicht authentifiziert ist, wird er zu einer Anmeldeseite umgeleitet oder der Zugang wird verweigert.

Beispiel

//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));
}