V této sérii stavím produkt Software-as-a-Service pro synchronizaci proměnných prostředí mezi členy týmu. Vzhledem k tomu, že moje zázemí je převážně frontend, budu se na cestě učit o backendových technologiích. Více o mém konceptu a výběru technologie si můžete přečíst v prvním příspěvku a o nastavení mého projektu si můžete přečíst ve druhém příspěvku.
Přidání ověření
Projekt potřebuje ověření, aby uživatelé mohli bezpečně přistupovat ke svým organizacím, projektům a prostředím. Plánuji přidat další úroveň šifrování pro samotné proměnné prostředí, protože musí být extra bezpečné, aby chránily citlivé + výkonné klíče API a další proměnné prostředí. K tomu se dostaneme v pozdějším příspěvku.
⚠ Autentizace je super ošidná funkce, která se dá správně zvládnout – existují vrstvy za vrstvami složitosti a zabezpečení, které je třeba zvážit, což je příliš mnoho na to, aby se většina projektů dala dobře zvládnout. Obecně je osvědčeným postupem nevytvářet si vlastní ověřovací systém – na internetu je spousta informací o tom, proč tomu tak je, ale několik příkladů najdete v tomto článku.
Další ověření
Začal jsem zkoumat autentizační řešení. Auth0 je jedním z nejpopulárnějších systémů v této oblasti - https://auth0.com/blog/create-a-simple-and-secure-node-express-app/
Když jsem si však pročetl tutoriál, rozhodl jsem se, že potřebuji něco zabalenějšího, abych ve svém kódu zvládl ještě méně autentizace a zabezpečení.
Brzy, výzkum seriózním vědeckým procesem googlil jsem témata jako "Nextjs auth system," našel jsem Next-Auth. Next-Auth je open-source autentizační systém pro aplikace NextJS. Je super flexibilní a kompatibilní s mnoha poskytovateli autentizace (což vysvětlím za minutu) a více databázovými systémy, včetně postgres.
Nastavení dalšího ověření
Potřebujeme připojit "Poskytovatele ověřování" k Next-Auth. Nejlepší způsob, jak vysvětlit „poskytovatele ověření“ je na příkladu:když přejdete na nový web a uvidíte „Přihlásit se přes Google“, Google vystupuje jako poskytovatel ověření pro daný web. Účet pro nový web v podstatě vytvoříte přihlášením přes Google, který poskytuje přihlašovací údaje k novému webu.
Rozhodl jsem se použít GitHub jako svého prvního poskytovatele autentizace, který bude fungovat dobře, protože je to nástroj vytvořený pro vývojáře. Pomocí Next-Auth mohu kdykoli později přidat nového poskytovatele. Postupoval jsem podle příruček Next-Auth pro poskytovatele GitHub a adaptér Prisma.
Nejprve npm i next-auth @next-auth/prisma-adapter@canary .
(Poznámka:Pokud sledujete, nenechte si ujít @canary nebo budete mít zastaralý balíček s jiným využitím než aktuální verze!)
Potom jsem vytvořil tento soubor:src/pages/api/auth/[...nextauth].js s tímto obsahem:
import NextAuth from "next-auth"
import Providers from "next-auth/providers"
import { PrismaAdapter } from "@next-auth/prisma-adapter"
import { PrismaClient } from "@prisma/client"
const prisma = new PrismaClient()
export default NextAuth({
providers: [
Providers.GitHub({
clientId: process.env.GITHUB_CLIENT_ID,
clientSecret: process.env.GITHUB_CLIENT_SECRET
})
],
adapter: PrismaAdapter(prisma),
})
Chcete-li získat GITHUB_CLIENT_ID a GITHUB_CLIENT_SECRET , můžete přejít na GitHub, klikněte na svůj profilový obrázek v pravém horním rohu, klikněte na Settings v rozevírací nabídce klikněte na Developer Settings v nabídce nalevo a poté přejděte na OAuth Apps a vytvořte novou aplikaci OAuth. Zadejte informace o projektu a použijte tuto adresu URL jako Authorization callback URL , změňte port na váš port:http://localhost:8080/api/auth/callback/github
Propojení s databází
Konektor Prisma jsme nastavili tak, aby Next-Auth používal funkce Prisma ke správě uživatelů v databázi, takže nyní musíme do schématu Prisma přidat požadovaná pole, abychom vytvořili tabulky v databázi a požadované funkce Prisma. Přidal jsem modely zde do mého schématu Prisma:https://next-auth.js.org/adapters/prisma#setup. Také jsem přidal pole, která můj projekt potřeboval, do User model, například projects pro připojení uživatele k projektům, ke kterým má přístup.
Potom jsem spustil npx prisma migrate dev --name "Added users to schema" aktualizovat moji databázi a vygenerovat požadované funkce prisma.
Přidání uživatelského rozhraní pro testování funkčnosti
Nakonec můžeme přidat základní uživatelské rozhraní Next Auth, abychom skutečně otestovali tok ověřování. Spustil jsem npm run dev spustit web a smazat veškerý obsah na domovské stránce (src/pages/index.tsx ). Zkopíroval jsem pages/index.ts soubor ze sekce Další auth „Příkladový kód“, abyste získali základní nastavení toku ověřování s tlačítky pro přihlášení a odhlášení a textem, který nám sděluje náš stav ověření.
Spustil jsem web a když kliknu na přihlášení, zobrazí se toto:
...ale tlačítko nefungovalo! 🤯 Dostal jsem modrou chybovou zprávu z Next Auth.
Odstraňování problémů
V mém serverovém terminálu jsem dostal tuto chybu:
https://next-auth.js.org/errors#oauth_callback_handler_error Error:
Invalid `prisma.account.findUnique()` invocation:
{
where: {
providerId_providerAccountId: {
providerId: 'github',
providerAccountId: 18769232
~~~~~~~~
}
},
select: {
user: true
}
Argument providerAccountId: Got invalid value 18769232 on prisma.findUniqueAccount. Provided Int, expected String.
Abych to napravil, ve svém schématu jsem změnil typ Account.providerAccountId od String na Int a migrace tuto chybu opravila.
Po opětovném spuštění, když kliknu na tlačítko.... znovu to nefunguje! Byl jsem přesměrován z localhost:3000/... na localhost:8080/... takže jsem problém vyřešil přidáním NEXTAUTH_URL="http://localhost:8080/" na můj .env .
Nakonec, když kliknu na „Přihlásit se pomocí Github“, dostanu se k tomuto:
A po povolení přístupu jsem byl přesměrován na svou domovskou stránku, nyní jsem přihlášen pomocí e-mailu propojeného s mým účtem GitHub:
Závěr
V této aktualizaci jsem do své aplikace NextJS/Prisma/Postgres přidal ověřování pomocí Next-Auth.
V příští aktualizaci vytvořím několik tras API pro implementaci obchodní logiky projektu a začnu s uživatelským rozhraním.
Následujte mě zde nebo na Twitteru pro další aktualizace a další obsah. V případě dotazů mi neváhejte napsat DM!