Test in einer Live-Umgebung
Test in der Produktion ohne Wasserzeichen.
Funktioniert überall, wo Sie es brauchen.
Authentifizierung ist entscheidend für moderne Webanwendungen, da sie sicherstellt, dass Benutzer sicher auf ihre Daten und Funktionen zugreifen können und Unterstützung für die Infrastruktur bietet. NextAuth.js ist eine leistungsstarke und flexible Authentifizierungsbibliothek, die nahtlos mit Next.js zusammenarbeitet. Dieser Artikel wird erläutern, wie Sie NextAuth.js in einem Next.js-Projekt einrichten und verwenden können, damit Sie Benutzerdaten mühelos absichern können. Wir werden Ihnen auch zeigen, wie dieses npm mit anderen Bibliotheken wie der IronPDF-Bibliothek für intuitive zustandslose Authentifizierung in Ihre Projekte integriert werden kann.
NextAuth.js ist eine Open-Source-Authentifizierungsbibliothek für Next.js-Anwendungen, die eine flexible und sichere Möglichkeit bietet, Authentifizierung in Web-Apps zu implementieren. Mit NextAuth.js können Entwickler problemlos Authentifizierung in ihre Next.js-Projekte integrieren, ohne die Komplexität der Benutzer-Authentifizierung und Sitzungsverwaltung verwalten zu müssen.
Das Paket ist hoch konfigurierbar und ermöglicht es Entwicklern, Authentifizierungsabläufe anzupassen, API-Routen abzusichern und Benutzersitzungen nahtlos zu verwalten. Mit erweiterten Funktionen, die es Ihnen ermöglichen, Ihre eigenen Verfahren zur Verwaltung des Zugangs zu Konten zu erstellen, JSON-Web-Tokens zu verschlüsseln und zu entschlüsseln sowie benutzerdefinierte Cookie-Sicherheitsrichtlinien und Sitzungsattribute zu etablieren, was Ihnen erlaubt, den Zugang zu Konten und die Häufigkeit der Sitzungsverifizierung zu regulieren.
NextAuth.js bietet mehrere Vorteile:
Erstellen wir zuerst ein neues Next.js-Projekt. Öffnen Sie Ihr Terminal und führen Sie Folgendes aus:
npx create-next-app@latest my-next-auth-app
cd my-next-auth-app
Als nächstes installieren Sie NextAuth.js:
npm install next-auth
Erstellen Sie eine neue Datei für Ihre API-Route zur Handhabung der Authentifizierung. Im Verzeichnis 'pages/api/auth' erstellen Sie Folgendes:[...nextauth].js-Datei:
// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import GitHubProvider from 'next-auth/providers/github';
import GoogleProvider from 'next-auth/providers/google';
export default NextAuth({
providers: [
GitHubProvider({
clientId: process.env.GITHUB_ID,
clientSecret: process.env.GITHUB_SECRET,
}),
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
],
secret: process.env.NEXTAUTH_SECRET,
});
Erstellen Sie eine Datei '.env.local' im Stammverzeichnis Ihres Projekts, um Ihre Umgebungsvariablen zu speichern:
// Just make sure to fill out the variables with your actual information!
GITHUB_ID=your_github_client_id
GITHUB_SECRET=your_github_client_secret
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
NEXTAUTH_SECRET=your_nextauth_secret
Fügen wir nun die Authentifizierung zu Ihrer Anwendung hinzu. Erstellen Sie eine Login-Schaltfläche und eine Profilkomponente, um Benutzerinformationen anzuzeigen.
// components/LoginButton.js
import { signIn, signOut, useSession } from 'next-auth/react';
const LoginButton = () => {
const { data: session, status } = useSession();
const loading = status === "loading";
return (
<div>
{!session && (
<>
<button onClick={() => signIn('github')}>Sign in with GitHub</button>
<button onClick={() => signIn('google')}>Sign in with Google</button>
</>
)}
{session && (
<>
<p>Signed in as {session.user.email}</p>
<button onClick={() => signOut()}>Sign out</button>
</>
)}
</div>
);
};
export default LoginButton;
Die LoginButton-Komponente verwaltet die Benutzerauthentifizierung in einer Next.js-Anwendung mit NextAuth.js. Es verwendet den useSession-Hook, um festzustellen, ob ein Benutzer eingeloggt ist. Wenn der Benutzer nicht authentifiziert ist, werden Schaltflächen angezeigt, die es ihm ermöglichen, sich mit GitHub oder Google anzumelden. Wenn der Benutzer authentifiziert ist, wird eine Nachricht mit seiner E-Mail-Adresse und einem Button zum Abmelden angezeigt. Diese Komponente bietet eine einfache Schnittstelle zur Verwaltung von Benutzeranmeldungen und -abmeldungen durch Manipulation eines Sitzungsobjekts.
Um Routen zu schützen und sicherzustellen, dass nur authentifizierte Benutzer auf bestimmte Seiten zugreifen können, verwenden Sie die Funktion getSession von NextAuth.js.
// pages/protected.js
import { getSession } from 'next-auth/react';
const ProtectedPage = ({ session }) => {
if (!session) {
return <p>You need to be authenticated to view this page.</p>;
}
return <p>Welcome, {session.user.email}!</p>;
};
export async function getServerSideProps(context) {
const session = await getSession(context);
return {
props: { session },
};
}
export default ProtectedPage;
Die ProtectedPage-Komponente in einer Next.js-Anwendung verwendet NextAuth.js, um den Zugriff nur auf authentifizierte Benutzer zu beschränken. Es ruft die Sitzungseigenschaften des Benutzers auf der Serverseite mit getServerSideProps ab und übergibt sie als Prop an die Komponente. Wenn der Benutzer nicht authentifiziert ist, zeigt die Seite eine Nachricht an, die darauf hinweist, dass eine Authentifizierung erforderlich ist. Wenn der Benutzer authentifiziert ist, wird er begrüßt, indem seine E-Mail-Adresse angezeigt wird. Diese Einrichtung stellt sicher, dass nur angemeldete Benutzer auf den Inhalt der Seite zugreifen können.
IronPDFist eine leistungsstarke Node.js-PDF-Bibliothek, die Entwicklern ermöglicht, PDFs in ihren Node.js-Projekten zu erstellen und zu bearbeiten. Egal, ob Sie PDFs aus HTML erstellen, bestehende PDFs bearbeiten oder Webseiten in das PDF-Format konvertieren möchten, IronPDF hat alles für Sie.
Konvertieren Sie mühelos HTML-Inhalte in PDF-Dokumente. Diese Funktion ist besonders nützlich für die Erstellung dynamischer PDFs aus Webinhalten.
Generieren Sie PDFs direkt aus URLs, so dass Sie den Inhalt von Webseiten erfassen und programmgesteuert als PDF-Dateien speichern können.
Bestehende PDF-Dokumente lassen sich mühelos zusammenführen, aufteilen und manipulieren. IronPDF bietet Funktionen wie das Anhängen von Seiten, das Aufteilen von Dokumenten und vieles mehr.
Sichern Sie Ihre PDF-Dokumente, indem Sie sie mit Passwörtern verschlüsseln oder mit digitalen Signaturen versehen. IronPDF bietet Optionen zum Schutz Ihrer vertraulichen Dokumente vor unbefugtem Zugriff.
Erstellen Sie hochwertige PDF-Dokumente mit präzisem Rendering von Text, Bildern und Formatierungen. IronPDF stellt sicher, dass die von Ihnen generierten PDF-Dateien dem ursprünglichen Inhalt treu bleiben.
IronPDF ist mit verschiedenen Plattformen kompatibel, darunter Windows, Linux und macOS, und eignet sich daher für eine breite Palette von Entwicklungsumgebungen.
Integrieren Sie IronPDF einfach in Ihre Node.js-Anwendungen mit Hilfe des npm-Pakets. Die API ist gut dokumentiert, so dass es einfach ist, PDF-Generierungsfunktionen in Ihre Projekte einzubinden.
Zur Installation derIronPDFVerwenden Sie den folgenden Befehl, um das Paket:
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
Abhängigkeiten installieren: Erstellen Sie zunächst ein neues Next.js-Projekt(falls Sie es noch nicht getan haben) mit dem folgenden Befehl:
npx create-next-app@latest nextauth-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
Navigieren Sie dann zu Ihrem Projektverzeichnis:
cd nextauth
Installieren Sie die erforderlichen Pakete:
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add next-auth
PDF-Erzeugungs-API: Der erste Schritt besteht darin, eine Backend-API zu erstellen, um das PDF-Dokument zu generieren. Da IronPDF nur serverseitig läuft, müssen wir eine API erstellen, die aufgerufen wird, wenn ein Benutzer ein PDF generieren möchte. Erstellen Sie eine Datei im Pfad pages/api/pdf.js und fügen Sie den folgenden Inhalt hinzu:
// pages/api/pdf.js
import { IronPdf } from "@ironsoftware/ironpdf";
import { format } from 'date-fns'; // Import the format function for date formatting
// Apply your IronPDF license key
IronPdf.GlobalSettings.LicenseKey = "Your license key goes here";
export default async function handler(req, res) {
try {
const currentDate = new Date();
const formattedDate = format(currentDate, 'MMMM do, yyyy');
let content = "<h1>Demo React Hook Form and Generate PDF Using IronPDF</h1>";
content += `<p>Date: ${currentDate}</p>`;
content += `<p>Formatted Date: ${formattedDate}</p>`;
const pdf = await IronPdf.HtmlToPdfDocument({ htmlContent: content });
const data = await pdf.toBuffer();
res.setHeader("Content-Type", "application/pdf");
res.setHeader(
"Content-Disposition",
"attachment; filename=awesomeIron.pdf"
);
res.send(data);
} catch (error) {
console.error("Error generating PDF:", error);
res.status(500).end();
}
}
Dies erstellt eine Next.js API-Route, die eine PDF-Datei mit der IronPDF-Bibliothek generiert. Es erstellt einen HTML-String, der eine Kopfzeile und das aktuelle Datum enthält, formatiert das Datum mit date-fns und wandelt das HTML in ein PDF um. Die erzeugte PDF-Datei wird dann als herunterladbare Datei in der Antwort zurückgegeben. Dieser Ansatz ermöglicht die dynamische PDF-Erstellung in einer serverseitigen Umgebung und ist nützlich, um Berichte, Rechnungen oder andere Dokumente spontan zu erstellen.
Lassen Sie uns nun ein GIT-Login zu unserer Frontend-Website mit Next-Auth hinzufügen. Dazu müssen wir die GitID und das Geheimnis des Benutzers erhalten. Melden Sie sich bei Ihrem Git-Konto an und navigieren Sie zu den Entwicklereinstellungen wie unten:
Klicken Sie auf Neue GitHub-App und fügen Sie die Details Ihrer Website hinzu:
Speichern Sie die App-ID und die Client-ID an einem sicheren Ort. Erstellen Sie dann eine .env.local-Datei im Stammverzeichnis Ihres Projekts, um Ihre Umgebungsvariablen zu speichern:
// Here you can use the App and Client ID you just got from GitHub
GITHUB_ID=your_github_client_id
GITHUB_SECRET=your_github_client_secret
NEXTAUTH_SECRET=secret
Erstellen Sie eine neue Datei für Ihre API-Route zur Handhabung der Authentifizierung. Im Verzeichnis pages/api/auth, erstellen Sie eine [...nextauth].js-Datei wie folgt:
// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import GitHubProvider from 'next-auth/providers/github';
export default NextAuth({
providers: [
GitHubProvider({
clientId: process.env.GITHUB_ID,
clientSecret: process.env.GITHUB_SECRET,
}),
],
secret: process.env.NEXTAUTH_SECRET,
});
Und fügen Sie eine Komponente namens LoginButton.js hinzu. Welche Folgendes enthält:
import { useSession, signIn, signOut } from "next-auth/react"
export default function Component() {
const { data: session } = useSession()
if (session) {
return (
<>
Signed in as {session.user.email} <br />
<button onClick={() => signOut()}>Sign out</button>
</>
)
}
return (
<>
Not signed in <br />
<button onClick={() => signIn()}>Sign in</button>
</>
)
}
Ändern Sie Ihre index.js wie unten.
import Head from "next/head";
import styles from "../styles/Home.module.css";
import React, { useState, useEffect } from "react";
import { format } from "date-fns";
import LoginButton from "../components/LoginButton";
import { useSession, signIn, signOut } from "next-auth/react";
export default function Home() {
const [text, setText] = useState("");
const { data: session } = useSession();
const accessToken = session?.accessToken;
useEffect(() => {
const currentDate = new Date();
const formattedDate = format(currentDate, "MMMM do, yyyy");
setText(formattedDate);
}, []);
const generatePdf = async () => {
try {
const response = await fetch("/api/pdf-datefns?f=" + text);
const blob = await response.blob();
const url = window.URL.createObjectURL(new Blob([blob]));
const link = document.createElement("a");
link.href = url;
link.setAttribute("download", "awesomeIron.pdf");
document.body.appendChild(link);
link.click();
link.parentNode.removeChild(link);
} catch (error) {
console.error("Error generating PDF:", error);
}
};
const handleChange = (event) => {
setText(hashids.encode(event.target.value));
setText(event.target.value);
};
return (
<div className={styles.container}>
<Head>
<title>Generate PDF Using IronPDF</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<h1>Demo Next Auth and Generate PDF Using IronPDF</h1>
{!session && <LoginButton />}
{session && (
<>
<p className="w-full text-center">
<span className="px-4 text-xl border-gray-500">
You are logged in enter URL to convert to PDF:
</span>
<input
className="border border-gray-700 w-1/4"
onChange={handleChange}
placeholder="Enter URL here..."
/>
</p>
<button
className="rounded-sm bg-blue-800 p-2 m-12 text-xl text-white"
onClick={generatePdf}
>
Generate PDF
</button>
</>
)}
</main>
<style jsx>{`
main {
padding: 5rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
footer {
width: 100%;
height: 100px;
border-top: 1px solid #eaeaea;
display: flex;
justify-content: center;
align-items: center;
}
footer img {
margin-left: 0.5rem;
}
footer a {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: inherit;
}
code {
background: #fafafa;
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family:
Menlo,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
}
`}</style>
<style jsx global>{`
html,
body {
padding: 0;
margin: 0;
font-family:
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Fira Sans,
Droid Sans,
Helvetica Neue,
sans-serif;
}
* {
box-sizing: border-box;
}
`}</style>
</div>
);
}
Stellen Sie sicher, dass Sie den Lizenzschlüssel, den Sie erhalten, am Anfang Ihres Codes wie folgt platzieren:
import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";
Letztendlich vereinfacht NextAuth.js den Prozess der Hinzufügung von Authentifizierung zu Ihren Next.js-Anwendungen. Mit Unterstützung für mehrere Anbieter und robusten Sicherheitsfunktionen ist es eine ausgezeichnete Wahl für die Handhabung der Benutzerautorisierung. Sie können jederzeit die NextAuth.js-Dokumentation für fortgeschrittene Konfigurationen und Funktionen erkunden. Darüber hinaus bietet IronPDF for Node.js Ihrer Anwendung leistungsstarke PDF-Generierungs- und Manipulationsmöglichkeiten und integriert sich gut in die moderne Anwendungsentwicklung.
9 .NET API-Produkte für Ihre Bürodokumente