React + AWS Cognito: Email Kimlik Doğrulaması Kurulum Kılavuzu (İlk Bölüm)
Bu makalede, React uygulamanıza AWS Cognito kullanarak e-posta tabanlı kimlik doğrulaması nasıl ekleneceğini adım adım açıklayacağız. Cognito, kullanıcı yönetimi, oturum açma ve kimlik doğrulama gibi özelliklerle React uygulamalarınızı güçlendirmenize olanak sağlayan kapsamlı bir hizmettir. E-posta kimlik doğrulaması, kullanıcıların e-posta adresleri ve şifreleri aracılığıyla hesaplarını yönetmelerini sağlar.
1. Proje Kurulumu
İlk olarak, yeni bir React projesi oluşturmamız gerekiyor. Bu adımda npm veya yarn kullanarak bir React projesi başlatabilirsiniz. Bu işlem, React projenizin temel yapı taşlarını oluşturur ve çalıştırmaya hazır bir ortam sağlar.
“`bash
npx create-react-app my-cognito-app
cd my-cognito-app
“`
2. AWS Cognito’nun Kurulumu
Bu bölümde, AWS Cognito’yu kullanarak yeni bir kullanıcı havuzunu yapılandırmanız gerekecek. Cognito kullanıcı havuzunuz, kullanıcılarınızı, oturum açma bilgilerini ve kimlik doğrulama politikalarını yönetir.
- AWS Konsolu’na gidin ve Cognito servisini seçin.
- “Kullanıcı Havuzu Oluştur” düğmesine tıklayın.
- Kullanıcı havuzunuz için bir ad seçin ve e-posta doğrulamasının etkinleştirildiğinden emin olun.
- Kullanıcı havuzunuz oluşturulduktan sonra, “Kullanıcı Havuzunu Düzenle” seçeneğini kullanarak “App Client” oluşturun.
- App Client için bir ad seçin ve “Allow unauthenticated identities” seçeneğini devre dışı bırakın.
- App Client için “Callback URL” ve “Sign-out URL” değerlerini girin. Bu değerler daha sonra React uygulamanızda kullanılacaktır.
3. AWS SDK’sını Yükleme
AWS SDK’sını React projenize yüklemek, AWS hizmetleriyle etkileşime geçmek için gerekli olan araçları sağlayacaktır. İlk adımda AWS SDK’sını React projenize entegre etmeniz gerekir.
“`bash
npm install aws-sdk
“`
4. Cognito Yapılandırmasının Belirlenmesi
React uygulamanızda, Cognito ile iletişim kurmak için bazı yapılandırma bilgilerine ihtiyacınız olacaktır. Bu bilgileri, daha önce Cognito’da oluşturduğunuz kullanıcı havuzunda ve app client’ta bulabilirsiniz.
“`javascript
const cognitoConfig = {
UserPoolId: ‘YOUR_USER_POOL_ID’, // Cognito kullanıcı havuzunuzun ID’si
ClientId: ‘YOUR_APP_CLIENT_ID’, // App Client’ın ID’si
Region: ‘YOUR_REGION’, // Cognito’nun bulunduğu bölge
};
“`
5. Cognito Kullanıcı Havuzunun Oluşturulması
React uygulamanızda, Cognito kullanarak kullanıcı havuzunu temsil eden bir nesne oluşturmanız gerekir. Bu nesne, kullanıcı oturum açma, kayıt ve şifre sıfırlama gibi işlemleri gerçekleştirmek için kullanılacaktır.
“`javascript
import AWS from ‘aws-sdk’;
const poolData = {
UserPoolId: cognitoConfig.UserPoolId,
ClientId: cognitoConfig.ClientId,
};
const userPool = new AWS.CognitoIdentityServiceProvider();
export const auth = new AWS.CognitoIdentityServiceProvider({
apiVersion: ‘2016-04-18’,
region: cognitoConfig.Region,
});
“`
Sonuç
Bu ilk bölümde, React uygulamanıza AWS Cognito kullanarak e-posta tabanlı kimlik doğrulaması eklemek için gerekli temel yapı taşlarını oluşturduk. Sonraki bölümde, React uygulamanızı Cognito ile entegre etmek için gerekli bileşenleri oluşturacağız ve oturum açma ve kayıt işlevlerini uygulayacağız.
AWS Cognito, React uygulamaları için güvenli ve ölçeklenebilir kimlik doğrulaması sağlamak için güçlü bir araçtır. AWS Cognito’yu kullanarak uygulamalarınıza kimlik doğrulama işlevlerini kolayca entegre edebilirsiniz.
Eğer React ve AWS Cognito ile ilgili daha fazla bilgi edinmek isterseniz, web sitemi ziyaret edebilirsiniz. Ayrıca, AWS dokümanlarına buradan ulaşabilirsiniz.
#Etiketler
React, AWS Cognito, E-posta Kimlik Doğrulaması, Kullanıcı Havuzu, App Client, AWS SDK, Kimlik Doğrulama, Oturum Açma, Kayıt, Şifre Sıfırlama