Apache Cordova uygulamanıza kimlik doğrulaması ekleme

  • Makale

Özet

Bu öğreticide, desteklenen bir kimlik sağlayıcısı kullanarak Apache Cordova ToDoList hızlı başlangıç projesine kimlik doğrulaması eklersiniz. bu öğretici, ilk olarak doldurmanız gereken Mobile Apps öğreticisiyle Kullanmaya başlayın temel alır.

Uygulamanızı kimlik doğrulaması için kaydedin ve App Service yapılandırın

İlk olarak, uygulamanızı bir kimlik sağlayıcısının sitesinde kaydetmeniz gerekir ve ardından Mobile Apps arka ucunda sağlayıcı tarafından oluşturulan kimlik bilgilerini ayarlarsınız.

  1. Sağlayıcıya özgü talimatları izleyerek tercih ettiğiniz kimlik sağlayıcınızı yapılandırın:

  2. Uygulamanızda desteklemek istediğiniz her sağlayıcı için önceki adımları tekrarlayın.

Benzer adımları gösteren bir video izleyin

Kimliği doğrulanmış kullanıcılar için izinleri kısıtla

Varsayılan olarak, bir Mobile Apps arka uçtaki API 'Ler anonim olarak çağrılabilir. Daha sonra, erişimi yalnızca kimliği doğrulanmış istemcilerle kısıtlamanız gerekir.

  • Arka ucuNode.js (Azure Portal aracılığıyla) :

    Mobile Apps ayarlarınızda, kolay tablolar ' a tıklayın ve tablonuzu seçin. Izinleri Değiştir' e tıklayın, yalnızca tüm Izinler için doğrulanmış erişim ' i seçin ve Kaydet' e tıklayın.

  • .Net arka ucu (C#):

    Sunucu projesinde, denetleyiciler>TodoItemController. cs' ye gidin. [Authorize]Özniteliğini aşağıdaki gibi TodoItemController sınıfına ekleyin. Erişimi yalnızca belirli yöntemlerle kısıtlamak için, bu özniteliği sınıfı yerine yalnızca bu yöntemlere de uygulayabilirsiniz. Sunucu projesini yeniden yayımlayın.

      [Authorize]
  public class TodoItemController : TableController<TodoItem>

  • Arka ucaNode.js (Node.js kodu aracılığıyla) :

    Tablo erişimi için kimlik doğrulaması gerektirmek için aşağıdaki satırı Node.js sunucusu betiğine ekleyin:

      table.access = 'authenticated';

    Daha fazla ayrıntı için bkz. nasıl yapılır: tablolara erişim için kimlik doğrulaması gerektirme. Hızlı başlangıç kodu projesini sitenizden nasıl indirileceği hakkında bilgi edinmek için bkz. nasıl yapılır: Node.js arka uç hızlı başlangıç kodu projesini git kullanarak indirme.

Şimdi, arka ucunuza anonim erişimin devre dışı bırakıldığını doğrulayabilirsiniz. Visual Studio:

  • Mobile Apps Kullanmaya başlayınöğreticiyi tamamladığınızda oluşturduğunuz projeyi açın.
  • Uygulamanızı Google Android Emulatoriçinde çalıştırın.
  • Uygulama başladıktan sonra beklenmeyen bir bağlantı hatasının gösterildiğini doğrulayın.

Ardından, mobil uygulama arka ucundan kaynakları isteyerek önce kullanıcıların kimliğini doğrulamak üzere uygulamayı güncelleştirin.

Uygulamaya kimlik doğrulaması ekleme

  1. projenizi Visual Studioaçın, sonra dosyayı düzenlenmek üzere açın www/index.html .

  2. Content-Security-PolicyBaş bölümünde meta etiketini bulun. OAuth ana bilgisayarını izin verilen kaynaklar listesine ekleyin.

    Sağlayıcı SDK sağlayıcı adı OAuth ana bilgisayar
    Azure Active Directory aad https://login.microsoftonline.com
    Facebook 'a https://www.facebook.com
    Google Google https://accounts.google.com
    Microsoft MicrosoftAccount https://login.live.com
    Twitter Twitter https://api.twitter.com

    örnek içerik-güvenlik-ilkesi (Azure Active Directory için uygulanır) aşağıdaki gibidir:

     <meta http-equiv="Content-Security-Policy" content="default-src 'self'
     data: gap: https://login.microsoftonline.com https://yourapp.azurewebsites.net; style-src 'self'">

    Yukarıdaki tablodaki OAuth ana bilgisayarıyla değiştirin https://login.microsoftonline.com . Content-Security-Policy meta etiketi hakkında daha fazla bilgi için bkz. Content-Security-Policy belgeleri.

    Bazı kimlik doğrulama sağlayıcıları, uygun mobil cihazlarda kullanıldığında Içerik Güvenlik Ilkesi değişiklikleri gerektirmez. Örneğin, bir Android cihazında Google kimlik doğrulaması kullanılırken Içerik Güvenlik Ilkesi değişikliği yapmanız gerekir.

  3. www/js/index.jsDosyayı düzenlenmek üzere açın, yöntemini bulun onDeviceReady() ve istemci oluşturma kodu altına aşağıdaki kodu ekleyin:

     // Login to the service
 client.login('SDK_Provider_Name')
     .then(function () {

         // BEGINNING OF ORIGINAL CODE

         // Create a table reference
         todoItemTable = client.getTable('todoitem');

         // Refresh the todoItems
         refreshDisplay();

         // Wire up the UI Event Handler for the Add Item
         $('#add-item').submit(addItemHandler);
         $('#refresh').on('click', refreshDisplay);

         // END OF ORIGINAL CODE

     }, handleError);

    Bu kod, tablo başvurusunu oluşturan mevcut kodu değiştirir ve Kullanıcı arabirimini yeniler.

    Login () yöntemi sağlayıcıyla kimlik doğrulaması başlatır. Login () yöntemi bir JavaScript Promise döndüren zaman uyumsuz bir işlevdir. Başlatmanın geri kalanı Promise yanıtının içine yerleştirilir, böylece Login () yöntemi tamamlanana kadar yürütülecektir.

  4. Yeni eklediğiniz kodda, öğesini oturum açma sağlayıcınızın adıyla değiştirin SDK_Provider_Name . örneğin, Azure Active Directory için kullanın client.login('aad') .

  5. Projenizi çalıştırın. Projenin başlatılması tamamlandığında, uygulamanız seçilen kimlik doğrulama sağlayıcısı için OAuth oturum açma sayfasını gösterir.

Sonraki Adımlar

SDK'ları kullanmayı öğrenin.