Apache Cordova uygulamanıza kimlik doğrulaması ekleme

Makale
11/08/2023

Bu öğreticide, Microsoft Entra Id kullanarak hızlı başlangıç projesine Microsoft kimlik doğrulaması ekleyebilirsiniz. Bu öğreticiyi tamamlamadan önce projeyi oluşturduğunuzdan ve çevrimdışı eşitlemeyi etkinleştirdiğinizden emin olun.

Arka ucunuzu kimlik doğrulaması için yapılandırma

Arka ucunuzu kimlik doğrulaması için yapılandırmak için:

Uygulama kaydı oluşturun.
Azure Uygulaması Hizmet Kimlik Doğrulaması ve Yetkilendirme'yi yapılandırın.
Uygulamanızı İzin Verilen Dış Yeniden Yönlendirme URL'lerine ekleyin.

Bu öğretici sırasında uygulamanızı Microsoft kimlik doğrulamasını kullanacak şekilde yapılandıracağız. Azure aboneliğinizde bir Microsoft Entra kiracısı otomatik olarak yapılandırıldı. Microsoft kimlik doğrulamasını yapılandırmak için Microsoft Entra Id kullanabilirsiniz.

Hizmeti sağlarken sağlanan Azure Mobile Apps hizmetinin arka uç URL'sine ihtiyacınız vardır.

Uygulama kaydı oluşturma

Azure Portal oturum açın.
Microsoft Entra Id> Uygulama kayıtları> Yeni kayıt'ı seçin.
Uygulamayı kaydet sayfasında Ad alanına girin zumoquickstart.
Desteklenen hesap türleri'nin altında Herhangi bir kuruluş dizinindeki hesaplar (Herhangi bir Microsoft Entra dizini - çok kiracılı) ve kişisel Microsoft hesapları (örneğin Skype, Xbox) seçeneğini belirleyin.
Yeniden yönlendirme URI'sinde Web'i seçin ve yazın<backend-url>/.auth/login/aad/callback. Örneğin, arka uç URL'niz ise https://zumo-abcd1234.azurewebsites.netdeğerini girersiniz https://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callback.
Formun alt kısmındaki Kaydet düğmesine basın.
Uygulama (istemci) kimliği'ni kopyalayın.
Sol bölmeden Sertifikalar ve gizli diziler>Yeni istemci gizli dizisi'ni seçin.
Uygun bir açıklama girin, geçerlilik süresini seçin ve ardından Ekle'yi seçin.
Sertifikalar ve gizli diziler sayfasında gizli diziyi kopyalayın. Değer yeniden görüntülenmez.
Kimlik doğrulaması'nı seçin.
Örtük verme ve karma akışlar altında kimlik belirteçlerini etkinleştirin.
Sayfanın üst kısmındaki Kaydet'e basın.

Önemli

İstemci gizli anahtarı değeri (parola) önemli bir güvenlik kimlik bilgisidir. Parolayı kimseyle paylaşmayın veya istemci uygulaması içinde dağıtmayın.

Azure Uygulaması Hizmet Kimlik Doğrulama ve Yetkilendirmeyi Yapılandırma

Azure portalında Tüm Kaynaklar'ı ve ardından App Service'inizi seçin.
Ayarlar> Authentication'ı seçin.
Kimlik sağlayıcısı ekle'ye basın.
Kimlik sağlayıcısı olarak Microsoft'u seçin.
- Uygulama kayıt türü için Mevcut bir uygulama kaydının ayrıntılarını belirtin'i seçin.
- Daha önce kopyaladığınız değerleri Uygulama (istemci) Kimliği ve İstemci gizli dizisi kutularına yapıştırın.
- Veren URL'si için girinhttps://login.microsoftonline.com/9188040d-6c67-4c5b-b112-36a304b66dad/v2.0. Bu URL, Microsoft oturum açma işlemleri için "sihirli kiracı URL'si"dir.
- Erişimi kısıtla için Kimlik doğrulaması gerektir'i seçin.
- Kimliği Doğrulanmamış istek için HTTP 401 Yetkisiz'yi seçin.
Ekle’ye basın.
Kimlik doğrulama ekranı geri döndüğünde, Kimlik doğrulama ayarları'nın yanındaki Düzenle'ye basın.
İzin verilen dış yeniden yönlendirme URL'leri kutusuna yazınzumoquickstart://easyauth.callback.
Kaydet’e basın.

10. adım, arka ucunuza erişmeden önce tüm kullanıcıların kimliğinin doğrulanmış olmasını gerektirir. Arka ucunuza kod ekleyerek ayrıntılı denetimler sağlayabilirsiniz.

BILIYOR MUYDUN? Ayrıca Microsoft Entra ID, Facebook, Google, Twitter veya herhangi bir OpenID Bağlan uyumlu sağlayıcıda kuruluş hesabı olan kullanıcılara izin vekleyebilirsiniz. Azure Uygulaması Hizmeti belgelerindeki yönergeleri izleyin.

Kimlik doğrulamasının istendiğini test edin

Kullanarak uygulamayı çalıştırma cordova run android
Uygulama başlatıldıktan sonra durum kodu 401 (Yetkisiz) olan işlenmeyen bir özel durumun tetiklendiğini doğrulayın.

Uygulamaya kimlik doğrulaması ekleme

Yerleşik sağlayıcı aracılığıyla kimlik doğrulaması eklemek için:

Kimlik doğrulama sağlayıcısını bilinen iyi kaynaklar listesine ekleyin.
Verilere erişmeden önce kimlik doğrulama sağlayıcısını çağırın.

İçerik Güvenlik İlkesi'ni güncelleştirme

Her Apache Cordova uygulaması bilinen iyi kaynaklarını bir Content-Security-Policy üst bilgi aracılığıyla bildirir. Desteklenen her sağlayıcının eklenmesi gereken bir OAuth konağı vardır:

Provider	SDK Sağlayıcı Adı	OAuth Konağı
Microsoft Entra ID	Microsoft Entra ID	`https://login.microsoftonline.com`
Facebook	Facebook	`https://www.facebook.com`
Google	Google	`https://accounts.google.com`
Twitter	twitter	`https://api.twitter.com`

Düzenle www/index.html; Microsoft Entra Id için OAuth ana bilgisayarını aşağıdaki gibi ekleyin:

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

İçerik, okunabilirlik için birden çok satırdır. Tüm kodu aynı satıra yerleştirin.

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

Zaten uygulamanızın adıyla değiştirdiniz ZUMOAPPNAME .

Kimlik doğrulama sağlayıcısını çağırma

öğesini düzenleyin www/js/index.js. setup() yöntemini aşağıdaki kod ile değiştirin:

function setup() {
    client.login('aad').then(function () {
        // ORIGINAL CONTENTS OF FUNCTION
        todoTable = client.getSyncTable('todoitem');
        refreshDisplay();
        addItemEl.addEventListener('submit', addItemHandler);
        refreshButtonEl.addEventListener('click', refreshDisplay);
        // END OF ORIGINAL CONTENTS OF FUNCTION
    });
}

Uygulamayı test etme

Şu komutu çalıştırın:

cordova run android

İlk başlatma tamamlandıktan sonra Microsoft kimlik bilgilerinizle oturum açmanız istenir. İşlem tamamlandıktan sonra, listeden öğe ekleyebilir ve silebilirsiniz.

Bahşiş

Öykünücü otomatik olarak başlatılmazsa Android Studio'yu açın ve ARDıNDAN AVD Yöneticisini Yapılandır'ı>seçin. Bu, cihazı el ile başlatmanıza olanak sağlar. çalıştırıyorsanız adb devices -l, seçili öykünülmüş cihazınızı görmeniz gerekir.

Kaynakları silme

Hızlı başlangıç öğreticisini tamamladıktan sonra ile az group delete -n zumo-quickstartkaynakları silebilirsiniz. Ayrıca portal aracılığıyla kimlik doğrulaması için kullanılan genel uygulama kaydını silebilirsiniz.

Sonraki adımlar

NASIL YAPıLıR bölümlerine göz atın:

Aynı hizmeti kullanarak başka bir platform için hızlı başlangıç da yapabilirsiniz: