Nuxt

nuxt-auth ist ein Beispiel, wie man casdoor in einem nuxt-Projekt integrieren kann. Wir werden Sie durch die folgenden Schritte führen. Viele Schritte ähneln nextjs-auth.

Schritt 1: Casdoor bereitstellen

Zuerst sollte Casdoor bereitgestellt werden.

Sie können sich auf die offizielle Casdoor-Dokumentation 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 mithilfe der folgenden Schritte schnell eine auf Casdoor basierende Anmeldeseite in Ihrer eigenen App 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 modifizieren, indem Sie umschreiben, umleiten, die Anfrage- oder Antwort-Header ändern oder direkt antworten.

Erstellen Sie .js- oder .ts-Dateien im middleware-Verzeichnis im Wurzelverzeichnis Ihres Projekts, um Middleware zu definieren. Und die Dateinamen werden als Namen der Middleware identifiziert. Zum Beispiel erstellen wir in nuxt-auth eine Datei namens myMiddleware.js im middleware-Verzeichnis, die an anderen Stellen wie nuxt.config.js als myMiddleware referenziert werden kann.

Beispiel

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

export default function ({route, redirect}) {

  if (protectedRoutes.includes(route.path)) {
    //redirect the incoming request to a different URL
    redirect('/login');
  }
}

Damit Middleware funktioniert, sollten Sie den Router in nuxt.config.js hinzufügen, so:

export default {
    // other configuations

    // what to add
    router: {
    middleware: ['myMiddleware'] // replace to your middleware name
  },
}

Siehe nuxt offizielle Dokumentation middleware für weitere Details.

Schritt 3: Verwenden Sie Casdoor SDK

1.SDK installieren

Zuerst installieren Sie casdoor-js-sdk über NPM oder Yarn:

npm install casdoor-js-sdk

Oder:

yarn add casdoor-js-sdk

2.SDK initialisieren

Initialisieren Sie dann 6 Zeichenketten-Typ-Parameter in der folgenden Reihenfolge:

Name	Erforderlich	Beschreibung
serverUrl	Ja	Casdoor Server-URL, wie http://localhost:8000
clientId	Ja	Anwendungsklienten-ID
clientSecret	Ja	Anwendungsklienten-Geheimnis
organizationName	Ja	Anwendungsorganisation
appName	Ja	Anwendungsname
redirectPath	Ja	Umleitungs-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 sie 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 Casdoor-Dokumentation für die Verwendung des Casdoor SDK beziehen.

Schritt 4: Authentifizierungsfunktion der Middleware hinzufügen

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

Beispiel

import Cookies from "js-cookie";

const protectedRoutes = ["/profile"];

export default function ({route, redirect}) {
  const casdoorUserCookie = Cookies.get('casdoorUser');
  const isAuthenticated = !!casdoorUserCookie;

  if (!isAuthenticated && protectedRoutes.includes(route.path)) {
    redirect('/login');
  }
}