Netlify Üzerinde Logto ile Tam Yığın Kimlik Doğrulama Çözümü: Web Uygulamalarını ve Sunucusuz Fonksiyonları Korumak

Netlify modern web projelerini dağıtmak ve barındırmak için güçlü bir platformdur; sorunsuz Git entegrasyonu, otomatik yapılar ve hızlı ve ölçeklenebilir bir geliştirme iş akışı için sunucusuz fonksiyonlar sunar.\n\nBu kapsamlı kılavuzda şunları nasıl yapacağınızı öğreneceksiniz:\n\n- Vite + React örneği ile gösterilen Netlify üzerinde Logto kullanarak Tek Sayfa Uygulamasında (SPA) kimlik doğrulamayı uygulamak\n- Logto kimlik doğrulaması ile Netlify sunucusuz fonksiyonlarınızı güvence altına almak\n- Referans implementasyonumuzu kullanarak üretime hazır bir uygulama dağıtmak: example-vite-react-logto\n\nÇevrimiçi demo önizlemesine göz atın.\n\n## Gereksinimler\n\nBu eğitime başlamadan önce ayarlamanız gereken şeyler şunlardır:\n\n- Bir Netlify hesabı\n- Logto Cloud hesabı veya kendinize ait bir Logto örneği\n\n## Vite ile Bir React Uygulaması Oluşturun\n\nReact uygulaması oluşturmak için Vite'in Başlangıç Kılavuzunu izleyin.\n\nbash\nnpm create vite@latest\n\n\nOluşturma kılavuzu doğrultusunda ve istediğiniz teknoloji yığınını seçin. Bu makalede, React + TypeScript seçeceğiz.\n\nSonra projenin kök dizinine girin, kılavuza göre bağımlılıkları yükleyin ve uygulamayı çalıştırın.\n\nbash\nnpm install\nnpm run dev\n\n\n## Netlify Kullanarak Uygulamayı Dağıtın\n\nUygulamanızı dağıtmak için Netlify ile Başlayın kılavuzlarını takip edin.\n\nUygulamanızı dağıttıktan sonra canlı siteyi https://<your-site-name>.netlify.app adresinde görebilirsiniz.\n\nBu URL'yi not alın çünkü Logto'yu yapılandırırken buna ihtiyaç duyacağız.\n\n## Uygulamanıza Logto Entegre Edin\n\nLogto kimlik doğrulamasıyla başlamak için:\n\n1. Logto Konsol'daki "Uygulamalar" sayfasına gidin\n2. Yeni bir uygulama oluşturun\n - Ön uç çerçevenizi seçin (bizim örneğimizde React)\n - Not: İhtiyaçlarınıza göre herhangi bir Tek Sayfa Uygulaması (SPA) veya yerel uygulama oluşturabilirsiniz\n3. Entegrasyon kılavuzunu izleyin:\n - Logto Konsol'un yerleşik kılavuzuyla ya da\n - Resmi React kimlik doğrulama entegrasyon kılavuzu ile\n4. Uygulama durum sayfasından şunları not alın:\n - Uygulama ID'niz\n - Logto uç noktası (genellikle https://<your-instance>.logto.app/ formatında "Uç Noktalar & Kimlik Bilgileri" bölümünde bulunur)\n Bu bilgileri takip eden adımlarda kullanacağız.\n\nNot edin ki, demomuzda Logto'nun Oturum Açma yönlendirmesini işlemek için /callback yolunu kullanıyoruz. Logto'daki Yönlendirme URI'leri https://<your-site-name>.netlify.app/callback olarak yapılandırılmalıdır. Kullanıcılar oturum kapattıktan sonra ana sayfaya döneriz, bu yüzden Oturum sonrası yönlendirme URI'lerini https://<your-site-name>.netlify.app olarak ayarlıyoruz.\n\nArdından oluşturduğumuz Logto Uygulaması bilgilerini Netlify'ın Çevre Değişkenleri (Web siteniz -> site yapılandırması -> Çevre değişkenleri) içine ayarlayın:\n\n\nVITE_LOGTO_ENDPOINT=<your-logto-endpoint>\nVITE_LOGTO_APP_ID=<your-logto-app-id>\n\n\nDaha sonra bu yapılandırmaları ön uç projemizde kullanırız:\n\nts\n// App.tsx\nconst logtoConfig: LogtoConfig = {\n endpoint: import.meta.env.VITE_LOGTO_ENDPOINT,\n appId: import.meta.env.VITE_LOGTO_APP_ID,\n}\n\n\nSon entegre edilmiş kodu burada görüntüleyebilirsiniz: example-vite-react-logto.\n\nNetlify'a dağıttığımızda ve Logto aracılığıyla oturum açtığımızda, URL'miz otomatik olarak Geri Arama sayfamıza yönlendirmiyor. Bunun nedeni, Netlify'ın varsayılan olarak tek sayfa uygulamaları (SPA) için istemci tarafı yönlendirme desteğinin olmamasıdır.\n\n/callback gibi yollara gittiğinizde, Netlify benzer dosyaları sunucuda bulmaya çalışacak, isteği React uygulamanıza yönlendirmek yerine.\n\nBu noktada, Netlify projenizin public dizininde bir _redirects dosyası oluşturarak, tüm istekleri index.html sayfanıza yönlendirmesini Netlify'a söylemeliyiz:\n\n\n/* /index.html 200\n\n\nAlternatif olarak, projenizin kök dizininde bir netlify.toml dosyası oluşturabilirsiniz:\n\n\n[[redirects]]\n from = \"/*\"\n to = \"/index.html\"\n status = 200\n\n\nArtık yönlendirme düzgün çalışmalı.\n\n## Netlify Fonksiyonları ile Arka Plan API'leri Yaratın\n\nNetlify Fonksiyonları, arka plan API'leri oluşturmak için basit ama güçlü bir yol sağlar. Netlify Fonksiyonları ile geleneksel sunucu yapılandırması ve bakımı ile uğraşmadan sunucu tarafı mantığı yazabiliriz.\n\nBu fonksiyonlar, web sitenizle yan yana sürüm kontrol edilir, derlenir ve dağıtılır, böylece gelişim ve dağıtım süreci ön uç ve arka plan arasında sorunsuz hale gelir.\n\nNetlify Fonksiyonlarını kullanarak arka plan API'lerimizi oluşturmaya başlayalım.\n\nİlk olarak, projenin netlify dizini altında bir fonksiyonlar dizini oluşturmalı ve bir hello.ts dosyası oluşturmalıyız:\n\nts\n// netlify/functions/hello.ts\nexport default async () => {\n return Response.json({\n message: `Merhaba dünya!`,\n });\n};\n\n\nhttps://<your-site-name>.netlify.app/.netlify/functions/hello adresini ziyaret ettiğimizde, bu fonksiyon çağrılacak ve "Merhaba dünya!" döndürecektir.\n\n/.netlify/functions/hello yolunun biraz garip göründüğünü düşünüyorsanız, bir yönlendirme kuralı ekleyerek fonksiyonu çağırmak için public/_redirects dosyasında bir yönlendirme ayarlayabilirsiniz:\n\n\n/api/* /.netlify/functions/:splat\n\n\nBu şekilde, https://<your-site-name>.netlify.app/api/hello adresini ziyaret ettiğimizde, fonksiyonumuzu çağıracak ve "Merhaba dünya!" döndürecektir. Bu aslında Netlify fonksiyonları kullanarak API'ler oluşturmanın yaygın bir yoludur.\n\nVe bu API'ye ön uç projemizden fetch kullanarak erişebiliriz:\n\nts\nconst response = await fetch(`${window.location.origin}/api/hello`);\nconst data = await response.json();\n\n\n## Netlify Fonksiyonlarınızı Logto ile Koruyun\n\nArtık bir arka plan API'imiz olduğuna göre, sadece kimliği doğrulanmış kullanıcıların buna erişebilmesini sağlamalıyız. Netlify fonksiyonlarımızı Logto'nun kimlik doğrulama mekanizması ile koruyacağız.\n\nAPI uç noktalarımızı korumak için:\n\n1. Arka plan API'imizi temsil eden Logto Konsol'da bir API Kaynağı oluşturun:\n - Logto Konsol'daki "API Kaynakları"na gidin ve yeni bir API oluşturun\n - Bir ad ve API belirleyici ayarlayın (örneğin, https://api.backend.com)\n - API kaynağı detay sayfasından API belirleyicisini not edin çünkü bunu daha sonra kullanacağız\n\n2. Uygulamanızı bu API kaynağını kullanacak şekilde yapılandırarak, Netlify çevre değişkenlerinize belirleyiciyi ekleyin:\n\nenv\nVITE_LOGTO_API_RESOURCE=<your-logto-api-resource-identifier>\n\n\n3. Logto yapılandırmanızı bu API kaynağını içerecek şekilde güncelleyin:\n\nts\nconst logtoConfig: LogtoConfig = {\n endpoint: import.meta.env.VITE_LOGTO_ENDPOINT,\n appId: import.meta.env.VITE_LOGTO_APP_ID,\n resource: [import.meta.env.VITE_LOGTO_API_RESOURCE],\n}\n\n\n4. Korunan uç noktalara istekler yaparken, ön ucunuz geçerli bir erişim jetonu içermelidir. İşte bunu nasıl isteyeceğiniz ve kullanacağınız:\n\nts\n// ProtectedResource.tsx\n\n// Korunan kaynak için erişim jetonunu alın\nconst accessToken = await getAccessToken(import.meta.env.VITE_LOGTO_API_RESOURCE);\n\n// API isteklerinize jetonu dahil edin\nconst response = await fetch(`${window.location.origin}/api/hello`, {\n headers: {\n Authorization: `*** },\n});\n\n\nArtık, yalnızca geçerli erişim jetonlarına sahip isteklerin işlenmesini sağlamak için arka planda jeton doğrulamayı uygulayalım.\n\nÖnce, JWT jetonunu doğrulamamıza yardımcı olması için jose bağımlılığını yüklememiz gerekiyor:\n\nbash\nnpm install jose\n\n\nDaha sonra, arka planımızda jeton doğrulamayı uygulayabiliriz:\n\nts\n// netlify/lib/auth.ts\nimport { createRemoteJWKSet, jwtVerify } from \"jose\";\n\nconst getTokenFromHeader = (headers: Headers) => {\n const authorization = headers.get(\"authorization\");\n const bearerTokenIdentifier = \"Bearer\";\n\n if (!authorization) {\n throw new Error(\"Yetkilendirme başlığı eksik\");\n }\n\n if (!authorization.startsWith(bearerTokenIdentifier)) {\n throw new Error(\"Yetkilendirme jeton türü desteklenmiyor\");\n }\n\n return authorization.slice(bearerTokenIdentifier.length + 1);\n};\n\nconst verifyJwt = async (token: string) => {\n const JWKS = createRemoteJWKSet(new URL('oidc/jwks', process.env.VITE_LOGTO_ENDPOINT));\n\n const { payload } = await jwtVerify(token, JWKS, {\n issuer: new URL('oidc', process.env.VITE_LOGTO_ENDPOINT).toString(),\n audience: process.env.VITE_LOGTO_API_RESOURCE,\n });\n\n return payload;\n};\n\nexport const verifyLogtoToken = async (request: Request) => {\n try {\n const token = getTokenFromHeader(request.headers);\n const payload = await verifyJwt(token);\n return payload;\n } catch (error) {\n throw new Error(`Yetkisiz ${error}`);\n }\n}\n\n\nŞimdi, Netlify fonksiyonumuzu verifyLogtoToken fonksiyonunu kullanacak şekilde güncelleyelim:\n\nts\n// netlify/functions/hello.ts\n\nimport { verifyLogtoToken } from \"../lib/auth.js\";\n\nexport default async (request: Request) => {\n const payload = await verifyLogtoToken(request);\n\n const userId = payload.sub || \"bilinmeyen\";\n\n return Response.json({\n message: `Merhaba, ${userId}!`,\n });\n};\n\n\nİşte bu kadar! Artık Netlify fonksiyonumuz Logto ile korundu ve yalnızca geçerli erişim jetonlarıyla gelen istekler işlenecektir.\n\n## Demomuzu Test Etme\n\nŞimdi, uygulamanızı Netlify'a dağıtın ve test edin! Çevrimiçi demo önizlemesine buradan bakabilirsiniz.\n\n1. Canlı siteyi https://<your-site-name>.netlify.app adresinde ziyaret edin\n2. Navigasyon çubuğundaki "Oturum aç" butonuna tıklayın\n3. Bir Logto kullanıcı hesabı ile oturum açın, ve oturum açtığınızı göreceksiniz.\n4. Navigasyon çubuğundaki "Korumalı Kaynak" sekmesine tıklayın ve korunan sayfaya yönlendirileceksiniz.\n5. "Korumalı Kaynağı Görüntüle" butonuna tıklayın ve api/hello uç noktasından gelen yanıt verilerini göreceksiniz.\n6. Navigasyon çubuğundaki "Oturumu kapat" butonuna tıklayın ve ana sayfaya yönlendirileceksiniz.\n\n## Sonuç\n\nBu kılavuz, bir Netlify üzerine dağıtılan bir web uygulamasına Logto kimlik doğrulamasının nasıl entegre edileceğini göstermektedir.\n\nLogto uygulamaları ve API kaynaklarını yapılandırarak, ön uç kimlik doğrulamasını ve Netlify Fonksiyonları uç noktalarını koruduk.\n\nDaha granüler erişim kontrolü için, Logto'nun RBAC (Role-Based Access Control) yeteneklerinden faydalanarak Logto Konsol'da rolleri ve izinleri tanımlayabilir ve Netlify Fonksiyonları içinde kullanıcı rolleri doğrulaması yapabilirsiniz.\n\n