Auth0, web uygulamanızda kullanıcı kimliği oluşturma sürecini basitleştirir. API'si aracılığıyla güvenli ve özelleştirilebilir kimlik doğrulama ve yetkilendirme özellikleri sağlar. Kullanın ve kendi kimlik doğrulama sisteminizi sıfırdan oluşturma konusunda endişelenmenize gerek kalmayacak.
Auth0 ile entegrasyon, React uygulamanıza güvenilir kimlik doğrulamayı dahil etmeyi kolaylaştırır ve uygulamanıza güvenli erişimi garanti eder.
Aşağıdaki adımlar, Auth0'ı bir React uygulamasına entegre etmek için neyin gerekli olduğunu açıklamaktadır.
Auth0 Nedir?
Auth0, işlemek için güvenli bir API sağlayan bir web hizmetidir. kullanıcı doğrulama ve yetkilendirme uygulamalarınızda.
React uygulamanıza kolayca entegre edebileceğiniz özelleştirilebilir bir kimlik doğrulama sistemi sağlar. Auth0'ı uygulamanıza bağladığınızda, kimlik doğrulama iş yükünün geri kalanını işler.
Auth0 Nasıl Çalışır?
Auth0, kimlik doğrulama akışını uygulayan bir Evrensel Oturum Açma özelliği sağlar. Bir kullanıcı her giriş yapmak istediğinde, API onu bir Auth0 giriş sayfasına yönlendirir, kimlikleri doğrulanır ve ardından başarılı kimlik doğrulama yükü verileri uygulamanıza gönderilir.
Farklı oturum açma yöntemleri tanımlayarak uygulamanız için kimlik doğrulama iş akışını özelleştirebilirsiniz. Evrensel Oturum Açma, birincil kimlik doğrulama olarak bir kullanıcı adı ve parola sağlar, ancak ayrıca Google gibi bir sağlayıcı aracılığıyla sosyal oturum açma ve çok faktörlü kimlik doğrulama.
Bu tür bir kimlik doğrulama kullanmanın avantajı, kimliğe aşina olmanıza gerek olmamasıdır. güvenli kimlik doğrulama oluşturmak için yaygın olarak kullanılan OAuth 2.0 veya OpenID Connect gibi protokoller sistemler.
Auth0 Geliştirici Konsolunda Yeni Bir Proje Oluşturun
Başlamak için, önce bir Yetki0 hesap. Kaydolduktan sonra kontrol panelinize gidin ve tıklayın Uygulama Oluştur kimlik doğrulama projesi ayarlarını yapılandırmak için.
Auth0, oluşturduğunuz uygulamanın türüne bağlı olarak farklı kimlik doğrulama yapılandırmaları sağlar. Bu eğitim için, uygulamanızın adını girin, seçin Tek Sayfa Web Uygulamaları, ardından üzerine tıklayın Kaydetmek.
Sonra, seçin Tepki Auth0 tarafından desteklenen teknolojiler listesinden.
Uygulamanın URI'lerini yapılandırın
Uygulamanızı oluşturduktan ve gerekli ayarları yapılandırdıktan sonra, uygulamanızın kontrol panelinde Ayarlar Gerekli URI özelliklerini ayarlamak için sekme.
Aşağıdaki özellikleri ayarlayın:
- İzin verilen geri arama URL'leri. Bir kullanıcı kimlik doğrulamasından sonra Auth0 sunucusunun arayacağı URL.
- İzin verilen çıkış URL'leri. Auth0'ın kullanıcı oturumu kapattığında yönlendireceği URL.
- İzin verilen web kaynakları. Yetkilendirme isteğinin gelebileceği izin verilen URL.
Yerel geliştirme için kullanabilirsiniz http://localhost: 3000 URL'si. Ancak, kodunuzu üretime aktardıktan sonra alan adı URL'lerinizi sağlamanız gerekir.
URL'leri doldurmayı bitirdikten sonra devam edin ve tıklayın Değişiklikleri Kaydet Ayarlar sayfasının en altında.
Tercih Edilen Sosyal Giriş Sağlayıcılarınızı Ayarlayın
Auth0'ın uygulama panosunun sol menü bölmesinde, üzerine tıklayın kimlik doğrulama, ardından seçin sosyal. Ardından, Bağlantı Oluştur sosyal bağlantı ayarları sayfasındaki düğme.
Son olarak, tercih ettiğiniz sosyal giriş sağlayıcınızı seçin ve ekleyin.
Auth0'ı React Uygulamanızda Yapılandırın
Oturum açma ve başarı bileşenlerini oluşturarak Auth0 kimlik doğrulama hizmetini React uygulamanıza entegre edin.
1. Bir React Uygulaması Oluşturun ve Bir ENV Dosyası Kurun
Bir React uygulaması oluşturun, ardından kod düzenleyicinizde proje klasörünü açın. Ardından, proje klasörünüzün kök dizininde ortam değişkenlerinizi tutmak için bir ENV dosyası oluşturun: alan adınız ve müşteri kimliğiniz. Auth0 hesabınızda oturum açın, uygulamanın kontrol panelinde alan adını ve müşteri kimliğini kopyalayın ve bunları ENV dosyanıza aşağıdaki gibi kaydedin:
REACT_APP_AUTH0_DOMAIN= alan adınız
REACT_APP_AUTH0_CLIENT_ID= müşteri kimliğiniz2. Gerekli Paketleri Kurun
Gerekli bağımlılıkları kurmak için terminalinizde bu komutu çalıştırın:
npm kurulum @auth0/auth0-react3. Uygulama Bileşeninizi Auth0 Sağlayıcı ile Sarmalayın
Auth0 sağlayıcı, React Context'i kullanır. Bu, tüm özelliklerine Uygulama bileşeni içinden erişmenizi sağlar. Auth0 Sağlayıcısı üç parametre alır: istemci etki alanı, istemci kimliği ve yeniden yönlendirme URI'si.
index.js dosyasını açın, şablon React kodunu silin ve aşağıdaki kodu ekleyin:
içe aktarmak Tepki itibaren'tepki';
içe aktarmak ReactDOM itibaren"react-dom/client";
içe aktarmak Uygulama itibaren'./Uygulama';
içe aktarmak{Auth0Provider} itibaren'@auth0/auth0-tepki';sabit kök = ReactDOM.createRoot(belge.getElementById('kök'));
root.render(
etki alanı = {işlem.env. REACT_APP_AUTH0_DOMAIN}
clientId = {işlem.env. REACT_APP_AUTH0_CLIENT_ID}
yönlendirmeUri = {pencere.konum.menşei}
>
</Auth0Provider>, document.getElementById('root')
);
4. Oturum Açma Sayfası Bileşeni Oluşturma
React uygulamanızın /src dizininde yeni bir klasör oluşturun ve onu sayfalar olarak adlandırın. Bu klasörün içinde iki dosya oluşturun: Login.js ve Success.js.
login.js dosyasını açın ve aşağıdaki kodu ekleyin. Oturum açma sayfası bileşeni, bir oturum açma düğmesi oluşturacaktır.
içe aktarmak Tepki itibaren'tepki'
içe aktarmak { kullanımAuth0 } itibaren'@auth0/auth0-tepki';sabit Giriş = () => {
sabit { loginWithRedirect, isAuthenticated } = useAuth0();geri dönmek (Kimliği Doğrulanmış || (
ihracatvarsayılan Giriş yapmak
Auth0 varsayılan olarak kimlik doğrulama yöntemi olarak bir e-posta ve parola sağlar. Ek olarak, seçtiğiniz sosyal oturum açma sağlayıcılarına bağlı olarak Auth0, sağlayıcının oturum açma seçeneğini de görüntüler.
5. Bir Başarı Sayfası Bileşeni Oluşturun
Bu bileşen, iki ana özelliği işleyecektir: kimliği doğrulanmış bir kullanıcı profili ve bir çıkış düğmesi.
Success.js dosyasına aşağıdaki kodu ekleyin:
içe aktarmak Tepki itibaren'tepki'
içe aktarmak { kullanımAuth0 } itibaren'@auth0/auth0-tepki'sabit başarı = () => {
sabit { kullanıcı, çıkış, isAuthenticated } = useAuth0();geri dönmek (Kimliği Doğrulanmış && (
Kullanıcı Profili</h1>
{kullanıcı.adı}/h2>
{user.email}</p>
ihracatvarsayılan Başarı
Oturum açtıktan ve Auth0 tarafından doğrulandıktan sonra, Auth0 sizi uygulamanıza geri yönlendirir ve kullanıcı ayrıntılarını içeren yük verilerini uygulamanıza gönderir. Özel kullanıcı profilleri oluşturmak ve kullanıcı oturumlarını yönetmek için bu verileri uygulamanızın içinde kullanabilirsiniz. UseAuth kancasındaki User özelliği, belirli kullanıcı verilerine erişmenizi sağlar.
UseAuth0 kancası, bileşenleri koşullu olarak oluşturmanıza izin veren isAuthenticated adlı bir özellik de sağlar. Bir kullanıcının kimliği doğrulanırsa kod, kullanıcının profil ayrıntılarını işler ve bir oturum kapatma düğmesi bileşeni görüntüler.
Tersine, değillerse, oturum açma düğmesi bileşenini oluşturursunuz. Bu özellik, bu işlemi otomatik olarak yönettiğinden, bir kullanıcının kimlik doğrulama durumuna göre yolları belirtmeniz gerekmediği anlamına gelir. Auth0, hem oturum açma hem de oturum kapatma mantığını tanımlayarak, kimlik doğrulama işlevini uygulamanızı kolaylaştırır.
Auth0 Kimlik Doğrulama Hizmeti Denemeye Değer mi?
Auth0, uygulamanızın kimlik doğrulama gereksinimlerini karşılayan kullanıma hazır çözümler sunar. Ek olarak, Auth0 hizmeti web, mobil ve yerel geliştirme platformları için destek sunarak, kimlik doğrulama sistemini tercih ettiğiniz bir teknoloji yığınıyla kolayca entegre etmenize olanak tanır.
