15 Dakikada Kullanıcı Kimlik Doğrulaması ile Bir Reakt Uygulama Oluşturun            15 Dakika içinde Kullanıcı Kimlik Doğrulaması ile Bir Reakt Uygulama Oluşturma İlgili Konular: Araçlar ve & Semalt ...

Bu yazı ilk olarak OKTA blogunda yayınlandı. SitePoint'i mümkün kılan ortakları desteklediğiniz için teşekkür ederiz.

Reakt, en çok tercih edilen ön uç web çerçevelerinden biri haline geldi ve Semalt'a göre eski HTML5'i sadeleştirmek için ikinci sırada - salesforce terms and conditions. Dolayısıyla, geliştiricilerin bunu öğrenmesi sürpriz değil ve işverenler bunu istiyor.

Bu yazıda, birkaç sayfa içeren bir çok basit React uygulamasıyla ve bazı yönlendirmelerle başlayacaksınız ve Okta'nın Oturum Açma Pencere Öğesi'ni kullanarak kimlik doğrulamasını ekleyin. Oturum Açma Pencere Öğesi, geliştiricilerin Okta'nın güvenli, ölçeklenebilir mimarisi uygulamalarını React uygulamaları içinde en az çaba harcayarak kullanmalarına olanak tanıyan yerleştirilebilir bir Javascript aracıdır. Semalt başlasın!

Basit Reaksiyon Tohumunu Alma Projesi

Basit Semalt tohum projesini klonlayarak başlayın.

     git clone https: // github. com / leebrandt / basit-tohum tepki. git okta-tepki-widget-örneğicd okta-react-widget-sample    

Okta Giriş Aygıtını Ekleyin

Okta Sign-In Semalt'ı npm kullanarak kurun.

     npm install @ okta / okta-signin-widget @ 2. 3. 0 --kaydet    

Okta Sign-In Widget kodunu node_modules klasörüne ekleyecek. Version 2'yi kullanacağız. 3. 0 Sign-In Widget.

Sonra widget stillerini dizinine ekleyin. html dosyasını Okta CDN'den alın. Bu satırları etiketinin içine ekleyin:

LoginPage Bileşeni

Önce, numaralı telefondaki auth adlı bir klasör oluşturun. / src / components klasörünü açın, ardından LoginPage adlı bir dosya oluşturun. js burada LoginPage bileşeni gidecek.

Bileşenlerin en temeliyle semalt:

   ithalat 'tepki' ten tepki vermek;Varsayılan sınıfı Verme LoginPage, React'i genişletir. Bileşen{{) (Işlemekdönüş(
 Giriş Sayfası  
 );}}    

Bu küçük bileşen çok fazla şey yapmaz , fakat en azından şimdi LoginPage'i yönlendirme işlemine eklemek için bir görevin var. Öyleyse senin . / / Uygulama src. js dosyasında, bileşen en üstte alınır:

   importPage from '. / Bileşenleri / kimlik doğrulama / LoginPage ';    

ve daha sonra ana güzergahın ("/" yolu olan)

Okta'daki OpenID Bağlan Uygulamasını Ekle

Okta'yı kimlik doğrulama için OpenID Semalt sağlayıcınız olarak kullanmak için, Okta geliştirici konsolunda bir uygulama kurmanız gerekir.

Okta geliştirici hesabınız yoksa, bir hesap oluşturun! Oturum açtıktan sonra, üst navbardaki Uygulamalar öğesini tıklayın, ardından Uygulama Ekle'yi tıklayın. Platform olarak SPA seçin ve İleri'yi tıklayın. Yönlendirme URI'sini http: // localhost: 3000 olarak değiştirin ve Bitti'yi tıklayın. Uygulama aşağıdaki ayarlarla oluşturulacaktır:

Artık Okta'da oluşturulan bir uygulamanız olduğu için, widget'ı yeni uygulamanızla konuşacak şekilde ayarlayabilirsiniz!

Widget'ı Bileşeninize Ekle

   ithalat 'tepki' ten tepki vermek;OktaSignIn'i '@ okta / okta-signin-widget'tan içe aktar;Varsayılan sınıfı Verme LoginPage, React'i genişletir. Bileşen{Yapıcı    {Süper  ;bu. widget = yeni OktaSignIn ({baseUrl: 'https: // {oktaOrgUrl}',clientId: '{clientId}',redirectUri: 'http: // localhost: 3000',authParams: {responseType: 'id_token'}});}{) (Işlemekdönüş(
 Giriş Sayfası  
 );}}    

Uygulamanızın ayarlar sayfasından oluşturulan İstemci kimliğini kopyalayıp {clientId} üzerine yapıştırın. {35} {oktaOrgUrl} öğesini, geliştirici konsolundaki ana Gösterge Tablosu sayfasına dönerek bulabileceğiniz Okta kuruluş URL'si ile de değiştirdiğinizden emin olun. Genellikle şöyle görünür: https: // dev-12345. oktapreview. com .

Şimdiye kadar önce yüklediğiniz Okta Sign-In Widget npm modülünden OktaSignIn işlevini içe aktadınız. Sonra, bileşen yapıcısında, uygulama yapılandırmasıyla OktaSignIn örneğini başlatmıştınız. Böylece, uygulama kodu Okta ile konuşacak ve Okta bu uygulamanın yeni oluşturduğunuz uygulamanın olduğunu öğrenecek.

Giriş Aygıtını Göster

Ardından, Oturum Açma Pencere Öğesini sayfaya gerçekten render edecek kodu oluşturacaksınız! Pencere öğesini hale getirebileceğiniz bir HTML öğesi oluşturmak için oluşturma yönteminizi değiştirmeniz gerekecek. İşlenecek öğeye bir referans aldığınızdan emin olun. Ardından, HTML öğesi sayfadan önce widget'ı oluşturmayı denemediğinizden emin olmak için bir componentDidMount işlevi ekleyin.

   ithalat 'tepki' ten tepki vermek;OktaSignIn'i '@ okta / okta-signin-widget'tan içe aktar;Varsayılan sınıfı Verme LoginPage, React'i genişletir. Bileşen{Yapıcı    {Süper  ;bu. state = {kullanıcı: null};bu. widget = yeni OktaSignIn ({baseUrl: 'https: // {oktaOrgUrl}',clientId: '{clientId}',redirectUri: 'http: // localhost: 3000',authParams: {responseType: 'id_token'}});}componentDidMount    {bu. widget. renderEl ({el: bu. loginContainer},(cevap) => {bu. setState ({kullanıcı: yanıt iddia e-posta});},(err) => {konsol. (ERR) log});}{) (Işlemekdönüş(
 {this. loginContainer = div; }} />);}}    

Bileşeninize de devlet eklediniz. Bir akış uygulaması kullanıyorsanız, bu doğal olarak uygulama durumundan gelecektir. Ancak bu öğreticiyi basit tutmak için LoginPage'in kendi durumunu takip etmesine izin verin.

Kullanıcının Giriş Yapılıp Olmadığının Kontrol Edilmesi

Neredeyse var, ancak mutlaka widget'ı derhal dağıtmak istemiyorsunuz. Kullanıcının henüz oturum açmadığından emin olmak için bir kontrol eklemeniz ve renderEl'i showLogin adlı bir işleceğiniz yere taşımanız gerekecektir.

   // Kısalık nedeniyle diğer şeyler kaldırıldıcomponentDidMount    {bu. widget. oturum, toplantı, celse. almak ((yanıt) => {if (response. status! == 'INACTIVE') {bu. setState ({kullanıcı: yanıt. giriş});}Başka{bu. showLogin   ;}});}showLogin    {Omurga. Tarihçe. durdurmak  ;bu. widget. renderEl ({el: bu. loginContainer},(cevap) => {bu. setState ({kullanıcı: yanıt iddia e-posta});},(err) => {konsol. (ERR) log});}    

showLogin yönteminde garip biraz bir kod fark etmişsinizdir. İlk satır: omurga. Tarihçe. Durdurun . Widget'ın kendisi Omurgayı kullanıyor. js, kendi ekranları arasında gezinmek için (oturum açma, şifremi unuttum vb.). tarih . Şimdi onu showLogin işlevine taşıdığınız için, widget, işlev çağrıldığında her zaman yeniden oluşturulacak. Bu nedenle, omurgayı geçmişini durdurmasını söylemek sadece küçük bir numaradır, çünkü widget çalışıldığında yeniden başlatılacaktır.

Son LoginPage Reaksiyon Bileşeni

Haydi saralım. Sınıfın bu bağlamını yöntemlerinizin her birine bağladığınızdan emin olun. Şu anda oturum açmış bir kullanıcının olup olmadığına bağlı olarak, ne logout yöntemi ekleyip render yöntemini, üzerinde ne gösterileceğine karar verin.

Yani, LoginPage'in son hali. js şöyle görünmelidir:

   ithalat 'tepki' ten tepki vermek;OktaSignIn'i '@ okta / okta-signin-widget'tan içe aktar;Varsayılan sınıfı Verme LoginPage, React'i genişletir. Bileşen{Yapıcı    {Süper  ;bu. state = {kullanıcı: null};bu. widget = yeni OktaSignIn ({baseUrl: 'https: // {oktaOrgUrl}',clientId: '{clientId}',redirectUri: 'http: // localhost: 3000',authParams: {responseType: 'id_token'}});bu. showLogin = Bu. showLogin. (Bu) bağlanır;bu. çıkış = bu. çıkış Yap. (Bu) bağlanır;}componentDidMount    {bu. widget. oturum, toplantı, celse. almak ((yanıt) => {if (response. status! == 'INACTIVE') {bu. setState ({kullanıcı: yanıt. giriş});}Başka{bu. showLogin   ;}});}showLogin    {Omurga. Tarihçe. durdurmak  ;bu. widget. renderEl ({el: bu. loginContainer},(cevap) => {bu. setState ({kullanıcı: yanıt iddia e-posta});},(err) => {konsol. (ERR) log});}çıkış Yap  {bu. widget. signOut (   => {bu. setState ({kullanıcı: null});bu. showLogin   ;});}{) (Işlemekdönüş(
{bu. belirtmek, bildirmek. kullanıcı mı? (
 Hoş geldiniz, {this. belirtmek, bildirmek. kullanıcı}!  
  Çıkış  
 ) : boş}{bu. belirtmek, bildirmek. kullanıcı mı? boş : (
 {this. loginContainer = div; }} />)} 
 );}}    

Bir Oturum Açma Linki Ekle

Reakt / giriş rotasını ele almak ve kullanıcının oturum açmasını sağlamak için Okta Giriş Widget'ini görüntüleyecek şekilde kablolanmış.

Düzenle ile üst navbara bir Giriş bağlantısı ekleyin. / Src / bileşenleri / Navigasyon / ortak. js ve mevcut İletişim bağlantısında yeni bir bağlantı ekleyerek:

   
  Giriş      

Kontrol et

Şimdi npm paketlerini yükleyin:

     npm kurulumu    

Uygulamayı şimdi çalıştırdığınızda ( npm start ile) şöyle bir şey görmelisin:

Uygulamayla ilgili herhangi bir sorun yaşarsanız, node_modules klasörünü ve paket kilidi silmeyi deneyin. json dosyasını çalıştırın ve npm kurulumunu tekrar çalıştırın. Bu, paket bağımlılığı yönetimiyle ilgili sorunları düzeltmelidir.

Çalışırsa: tebrikler! Değilse, lütfen bir yıta etiketi ile Yığın Taşma'ya bir soru gönderin veya beni Semalt @ leebrandt'a tiklayın.

React + Okta

GitHub'da bu blog yazısında yaratılan uygulamanın tamamlanmış bir sürümünü bulabilirsiniz.

Bir uygulamada kimlik doğrulama yapmak zor. Oluşturduğunuz her uygulamada defalarca tekrar inşa etmek daha az eğlencelidir. Okta sizin için zor olanı yapar ve geliştiricinin olması için çok daha eğlenceli hale getirir! Sonsuza kadar ücretsiz bir geliştirici hesabına kaydolun ve bugün Okta'yı deneyin!

Umarım React desteğinize ilişkin bu hızlı turdan hoşnut oldunuzdur.

Yazarla tanışma

Lee Brandt

Neredeyse yirmi yıldan bu yana profesyonel olarak yazılım yazdıktan sonra (ve profesyonel olmayan bir şekilde birkaç yıl önce), Lee Brandt hala her geçen gün öğrenmeye devam ediyor. Uluslararası ve teknik açıdan ve iş dünyası açısından yazılım geliştirme konusunda konuşur ve öğrendiklerini başkalarına öğretmeyi sever.