Bu modülde kullanıcılarınızın hesaplarını yönetmek için bir Amazon Cognito kullanıcı havuzu oluşturacaksınız. Müşterilerin yeni bir kullanıcı girmelerine, e-posta adreslerini doğrulamalarına ve siteye girmelerine olanak tanıyan sayfaları dağıtacaksınız.

Serverless_Web_App_LP_assets-03

Kullanıcılar web sitenize girdiklerinde ilk olarak yeni bir kullanıcı gireceklerdir. Bu atölyenin amaçları doğrultusunda kullanıcılardan sadece bir e-posta adresi ve şifre isteyeceğiz. Bununla beraber, uygulamalarınızda ek özellikler istemek için Amazon Cognito’yu yapılandırabilirsiniz.

Kullanıcılar kayıtlarını oluşturduktan sonra Amazon Cognito kullanıcıların verdikleri adrese bir doğrulama koduyla beraber onay e-postası gönderecektir. Hesaplarını doğrulamak için kullanıcılar siteye geri dönerek e-posta adreslerini ve aldıkları doğrulama kodunu gireceklerdir. Test için sahte e-posta adreslerini kullanmak isterseniz Amazon Cognito konsolunu kullanarak kullanıcı hesaplarını doğrulayabilirsiniz.

Kullanıcılar e-postalarının doğrulanmasının ardından (e-posta doğrulama işlemi ya da konsol aracılığıyla manuel doğrulama yaparak) giriş yapabileceklerdir. Kullanıcılar giriş yaptıklarında kullanıcı adlarını (veya e-postalarını) ve şifrelerini girerler. Ardından bir JavaScript işlevi Amazon Cognito ile iletişim kurarak Güvenli Uzaktan Şifre (SRP) protokolünü kullanarak kimlik doğrulaması yapar ve bir dizi JSON Web Belirteci (JWT) alır. JWT’ler kullanıcının kimliği hakkında talepler içermektedir ve Amazon API Gateway ile oluşturduğunuz RESTful API ögesi açısından yetkilendirme sağlamak üzere bir sonraki modülde kullanılacaktır.

Modülü Tamamlama Süresi: 30 Dakika

Kullanılan hizmetler: Amazon Cognito

CloudFormation Şablonu: Bir sonraki modülü atlamak istiyorsanız 1. Modül’de kullandığınız bölgede bu AWS CloudFormation şablonlarından birini başlatabilirsiniz.

Bölge CloudFormation Şablonu
ABD Doğu (K. Virginia) Yığını başlat >
ABD Doğu (Ohio) Yığını başlat >
ABD Batı (Oregon) Yığını başlat >
AB (Frankfurt) Yığını başlat >
AB (İrlanda) Yığını başlat >
AB (Londra) Yığını başlat >
Asya Pasifik (Tokyo) Yığını başlat >
Asya Pasifik (Seul) Yığını başlat >
Asya Pasifik (Sidney) Yığını başlat >
Asya Pasifik (Mumbai) Yığını başlat >
Serverless_Web_App_LP_assets-17

CloudFormation Başlatma Talimatları

  1. Tercih ettiğiniz bölge için yukarıdaki Yığını Başlat bağlantısını seçin.

  2. Şablon Seç sayfasında Sonraki öğesini seçin.

  3. Web Site Klasör Adı için 1. modül’den web site klasörünüzün adını verin (ör. wildrydes-adınız) ve daha sonra Sonraki öğesini seçin.

    Not: Bir önceki modülde kullandığınız aynı klasör adını kullanmanız gerekmektedir. Var olmayan ya da yazma yetkinizin olmadığı bir ad kullanırsanız CloudFormation yığın işlemi oluşturma sırasında başarısız olacaktır.

  4. Seçenekler sayfasında tüm varsayılanları olduğu gibi bırakıp Sonraki öğesini seçin.

  5. İnceleme sayfasında ilgili kutuyu işaretleyerek IAM kaynaklarını CloudFormation’ın oluşturacağını kabul edin ve Oluştur öğesini seçin.

    Şablon Amazon Cognito kullanıcı havuzu ve istemci oluşturmak için özel kaynaklar kullanmakta, bu havuza bağlanmak için gereken detaylarla bir yapılandırma dosyası oluşturmakta ve bu dosyayı web site klasörünüze yüklemektedir. Şablon bu kaynakların oluşturulması ve yapılandırma dosyasının klasörünüze yüklenmesi için erişim sağlayan bir rol oluşturacaktır.

  6. wildrydes-webapp-2 yığınının CREATE_COMPLETE (OLUŞTURMA_TAMAMLANDI) durumuna ulaşmasını bekleyin.

  7. 4. Adımda özetlenen eylemleri takip edin. Bir sonraki modüle geçmeye hazır olduğunuZU doğrulamak için Uygulamanızı Test Edin.


Kullanıcı havuzlarını oluşturmak için aşağıda adım adım gösterilen talimatları takip edin. Bölümü genişletmek için her adımın numarasına tıklayın.

  • 1. Adım. Bir Amazon Cognito Kullanıcı Havuzu Oluşturun

    Amazon Cognito kullanıcıların kimliklerinin doğrulanması için iki farklı mekanizma sunmaktadır. Uygulamanıza kaydol ve giriş yap işlemlerini eklemek için Cognito Kullanıcı Havuzlarını kullanabilir ya da SAML kimlik çözümleriyle veya kendi kimlik sisteminizi kullanarak Facebook, Twitter ya da Amazon gibi sosyal kimlik sağlayıcıları vasıtasıyla kullanıcıların kimliklerini doğrulamak için Cognito Kimlik Havuzlarını kullanabilirsiniz. Sağlanan kayıt ve giriş sayfaları için bu modül kapsamında arka uç olarak bir kullanıcı havuzu kullanacaksınız.


    1. AWS konsolundan Hizmetler’e tıklayın ve sonra Mobil Hizmetler altından Cognito’yu seçin.
    2. Kullanıcı Havuzlarınızı Yönetin ifadesini seçin.
    3. Bir Kullanıcı Havuzu İstemcisi Oluştur ifadesini seçin
    4. WildRydes gibi bir ismi kullanıcı havuzunuza verdikten sonra Varsayılanları İncele ifadesini seçin
    5. İnceleme sayfasında Havuz oluştur seçeneğine tıklayın
    6. Yeni oluşturduğunuz kullanıcı havuzunuzun Havuz detayları sayfasındaki Havuz Kimlik numarasını not edin.
  • 2. Adım. Kullanıcı Havuzunuza bir Uygulama Ekleyin

    Amazon Cognito konsolundan kullanıcı havuzunuzu ve daha sonra Uygulama istemcileri bölümünü seçin. Yeni bir uygulama istemcisi ekleyin ve İstemci Gizli Dizisi Oluştur seçeneğinin seçili olmadığından emin olun. İstemci gizli dizileri Javascript SDK ile şu anda desteklenmemektedir. Bir gizli dizi ile uygulama oluşturursanız söz konusu uygulamayı silin ve doğru yapılandırma ile yeni bir uygulama oluşturun.


    1. Kullanıcı havuzunuza yönelik Havuz Detayları sayfasındaki gezinti çubuğunda solda yer alan Genel Ayarlar bölümünden Uygulama istemcilerini seçin.
    2. Bir uygulama istemcisi ekle öğesini seçin.
    3. Uygulama istemcisine WildRydesWebApp gibi bir ad verin.
    4. İstemci gizli dizisi oluştur seçeneğindeki işareti kaldırın. İstemci gizli dizileri tarayıcı bazlı uygulamalarla şu anda desteklenmemektedir.
    5. İstemci uygulaması oluştur öğesini seçin.
    6. Yeni oluşturulan uygulama için Uygulama istemci kimliği numarasını kaydedin.
  • 3. Adım. Web Site Yapılandırmasını Güncelleyin

    /js/config.js dosyasında kullanıcı havuzu kimliği, uygulama istemcisi kimliği ve Bölgeye yönelik ayarlar vardır. Bu dosyayı önceki adımlarda oluşturduğunuz kullanıcı havuzu ve uygulamadan güncelleyin ve klasörünüze tekrar yükleyin.


    a. Yerel makinenizden `wild-ryde-site/js/config.js` dosyasını kendi seçtiğiniz bir metin düzenleyicisinde açın.

    b. Kullanıcı havuzuna yönelik doğru değerler ve oluşturduğunuz uygulama ile cognito bölümünü güncelleyin.

    Oluşturduğunuz kullanıcı havuzunu seçtikten sonra Amazon Cognito konsolunun Havuz detayları sayfasından userPoolId ögesine yönelik değeri bulabilirsiniz.
    Sol gezinti çubuğundan Uygulama istemcileri ifadesini seçerek userPoolClientId için değeri bulabilirsiniz. Bir önceki bölümde oluşturduğunuz uygulama için Uygulama istemci kimliği alanındaki değeri kullanın.

    Bölge değeri kullanıcı havuzunuzu oluşturduğunuz AWS Bölge kodu olmalıdır. Ör. K. Virginia Bölgesi için us-east-1 veya Oregon Bölgesi için us-west-2. Hangi kodu kullanacağınız konusunda şüpheleriniz varsa Havuz detayları sayfasından Pool ARN değerine göz atabilirsiniz. Bölge kodu arn:aws:cognito-idp: ögesinin ardından gelen ARN kısmıdır.

    Güncellenen config.js dosyası şöyle görünmelidir. Dosyanızdaki esas değerlerin farklı olacağını unutmayın.

    window._config = {
        cognito: {
            userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb
            userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
            region: 'us-west-2' // e.g. us-east-2
        },
        api: {
            invokeUrl: '' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod',
        }
    };

    d. Değiştirilmiş dosyayı kaydedin ve Amplify Konsoluna otomatik olarak dağıtılması için Git deposuna gönderin.

    $ git push
  • 4. Adım. Uygulamanızı Test Edin


    1. Web sitesi etki alanında /register.html adresine gidin ya da sitenizin ana sayfasındaki Giddy Up! tuşuna basın.
    2. Kayıt formunu tamamlayın ve Let's Ryde ifadesini seçin. Kendi e-posta adresinizi ya da sahte bir e-posta adresini girebilirsiniz. En az bir büyük harf, bir sayı ve bir özel karakter içeren bir şifre seçtiğinizden emin olun. Sonrası için girdiğiniz şifreyi unutmayın. Kullanıcınızın oluşturulduğuna dair bir uyarı almanız gerekmektedir.
    3. Aşağıdaki yöntemlerden biriyle yeni kullanıcınızı doğrulayın.
    4. Tarafınızca kontrol edilen bir e-posta adresi kullandıysanız web sitesi etki alanınızdaki /verify.html adresini ziyaret ederek ve tarafınıza e-posta ile gönderilen doğrulama kodunu girerek hesap doğrulama işlemini tamamlayabilirsiniz. Doğrulama kodunun spam klasörüne gelebileceğini unutmayın. Gerçek dağıtım işlemleri için sahip olduğunuz bir etki alanından e-postaları göndermek amacıyla Amazon Simple E-mail Service hizmetini kullanmak üzere kullanıcı havuzunuzu yapılandırmanızı öneririz.
    5. Sahte bir e-posta adresi kullandıysanız kullanıcıyı Cognito konsolu üzerinden manuel olarak doğrulamanız gerekmektedir.
    6. AWS konsolda Hizmetler öğesinin ardından Güvenlik, Kimlik ve Uyumluluk öğesinin altında Cognito öğesini seçin.
    7. Kullanıcı Havuzlarınızı Yönetin ifadesini seçin
    8. WildRydes kullanıcı havuzunu seçerek soldaki gezinti çubuğunda Kullanıcılar ve gruplar ifadesine tıklayın.
    9. Kayıt sayfası üzerinden ilettiğiniz e-posta adresine uyan bir kullanıcı görmeniz gerekmektedir. Kullanıcı detaylarını görüntülemek için o kullanıcı adını seçin.
    10. Hesap oluşturma sürecini tamamlamak için Kullanıcıyı doğrula öğesini seçin.
    11. Yeni kullanıcıyı /verify.html sayfasını ya da Cognito konsolunu kullanarak doğruladıktan sonra /signin.html adresini ziyaret edin ve kayıt adımında girdiğiniz e-posta adresi ve şifreyi kullanarak giriş yapın.
    12. Başarılı olursanız /ride.html adresine yönlendirilmeniz gerekmektedir. API’nin yapılandırılmadığına dair bir bildirim görmeniz gerekmektedir.
    successful-login