Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

Özel bir kimlik doğrulama sistemi oluşturmak göz korkutucu bir görev olabilir. Kimlik doğrulama protokolleri ve kullanıcı kimlik doğrulama ve yetkilendirme süreçleri hakkında derin bir anlayış gerektirir. Ancak Supabase gibi bir aracı entegre ederek uygulamanızın temel mantığını oluşturmaya daha fazla odaklanabilirsiniz.

Supabase, bulut tabanlı bir geliştirme platformu sağlayan açık kaynaklı bir Firebase alternatifidir. Tam teşekküllü bir Postgres veritabanı, bir kimlik doğrulama hizmeti ve sunucusuz işlevler gibi bir dizi arka uç hizmeti sunar.

Daha erişilebilir olacak şekilde tasarlanmıştır ve projeleri hızla kurmanıza olanak tanır. Kimlik doğrulama hizmetini React.js uygulamalarınıza nasıl entegre edeceğinizi öğrenmek için takip edin.

Supabase Developer Console'da Yeni Bir Proje Oluşturun

Supabase Developer Console'da yeni bir proje oluşturmak için şu adımları izleyin:

instagram viewer
  1. için kaydolun supabase geliştirici hesabı. Panoya gidin ve yeni bir proje oluşturun.
  2. Projenin Adını ve bir şifre girin (bu, bu eğitim için isteğe bağlıdır ancak bir veritabanı kurarken önerilir), bölgeyi seçin ve son olarak tıklayın. Yeni proje oluştur.
  3. API Ayarları altında projeyi kopyalayın URL ve herkese açık anon anahtar.

Kimlik Doğrulama Sağlayıcısı Kurun

Bir kimlik doğrulama Sağlayıcı, kullanıcıların çeşitli sosyal oturum açma bilgilerini kullanarak kimliklerini doğrulamaları için güvenli bir yol sağlar. Supabase varsayılan olarak bir e-posta sağlayıcı sağlar. Ek olarak, tercihlerinize bağlı olarak Google, GitHub veya Discord gibi başka sağlayıcılar da ekleyebilirsiniz.

Bu eğitim, bir Google Sağlayıcısının nasıl kurulacağını gösterecektir. Bunu yapmak için şu adımları izleyin:

  1. Sol bölmede, kimlik doğrulama sekme.
  2. Kimlik Doğrulama ayarları sayfasında, Sağlayıcılar seçeneğini belirleyin ve son olarak Google Sağlayıcı sağlayıcılar listesinden. E-posta sağlayıcısının zaten varsayılan olarak yapılandırılmış olduğuna dikkat edin. Herhangi bir konfigürasyon yapmanıza gerek yoktur.
  3. Etkinleştir Sağlayıcı geçiş düğmesi.
  4. Google Sağlayıcı iki giriş gerektirir: bir ClientID ve bir ClientSecret. Google Developer Console'da bir uygulama oluşturduktan sonra bu iki değeri alacaksınız. Şimdilik, kopyala Yönlendirme bağlantısı. Bunu, ClientID ve ClientSecret'i almak üzere Google Developer Console'da bir uygulama kurmak için kullanacaksınız.

Google Developer Console'da (GDC) Projenizi Kurun

Google ile kimlik doğrulaması yapmak için uygulamanızı Google Developer Console'a (GDC) kaydetmeniz ve bir ClientID ile ClientSecret almanız gerekir.. GDC'de bir proje oluşturmak için şu adımları izleyin:

  1. git Google Geliştirici Konsolu ve konsola erişmek için Google hesabınızla oturum açın.
  2. Oturum açtıktan sonra şuraya gidin: API'ler ve Hizmetler sekmesini seçin Kimlik Bilgileri Oluştur seçeneğini belirleyin ve ardından OAuth istemci kimliği.
  3. Sağlanan seçeneklerden uygulama türünü belirtin ve ardından uygulamanızın adını girin.
  4. Ardından, uygulamanızın ana yol URL'sini (http//:yerel ana bilgisayar: 3000) ve son olarak, geri arama yönlendirme URL'sini belirtin. Supabase Google Sağlayıcı ayarları sayfasından kopyaladığınız yönlendirme URL'sini yapıştırın. Tıklamak Kaydetmek süreci tamamlamak için.
  5. Kopyala Müşteri Kimliği Ve Müşteri Gizliliği ve Supabase Projesi kontrol panelinize geri dönün ve bunları Google Sağlayıcı ayarları sayfasındaki ClientID ve ClientSecret giriş alanlarına yapıştırın. Tıklamak Kaydetmek Sağlayıcıyı etkinleştirmek için.

Bir React.js Uygulamasında Supabase Kimlik Doğrulama Hizmetini Yapılandırma

Bir React.js uygulaması oluşturunve ardından favori 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: proje URL'niz ve genel anon anahtarınız. Supabase ayarları sayfanıza gidin, API bölümünü açın ve proje URL'sini ve genel anon anahtarını kopyalayın.

REACT_APP_SUPABASE_URL= proje URL'si
REACT_APP_SUPABASE_API_KEY = halk anon tuşu

1. Gerekli Paketleri Kurun

Gerekli bağımlılıkları kurmak için terminalinizde bu komutu çalıştırın:

npm kurulum @supabase/auth-ui-react @supabase/ supabase-js tepki tepki yönlendirici dom

2. Oturum Açma Sayfası ve Başarı Sayfası Bileşenlerini Oluşturma

React.js 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.

3. Giriş Sayfası Bileşeni

Bu bileşen, Supabase tarafından sağlanan React.js Kimlik Doğrulama Kullanıcı Arayüzünü kullanarak bir kayıt ve oturum açma özelliği oluşturacaktır. Kimlik doğrulama işlevinin uygulanmasını kolaylaştıran, kimlik doğrulama kullanıcı arayüzünü bir bağımlılık (@supabase/auth-UI-react) olarak içe aktardınız.

login.js dosyasına aşağıdaki kodu ekleyin:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak {createClient} itibaren"@supabase/supabase-js";
içe aktarmak {Yetkilendirme, ThemeSupa} itibaren'@supabase/auth-ui-react';
içe aktarmak {Navigate'i kullanın} itibaren'tepki-yönlendirici-dom';
sabit supabase = createClient(
işlem.env.REACT_APP_SUPABASE_URL,
işlem.env.REACT_APP_SUPABASE_API_KEY
); 
işlevGiriş yapmak() {
sabit navigasyon = useNavigate(); 
 supabase.auth.onAuthStateChange(zaman uyumsuz (olay) =>{
eğer (olay !== "OTURUM KAPATILDI") {
 gezinmek('/başarı');
 }başka{
 gezinmek('/');
 }
 })
geri dönmek (
<divsınıf adı="Uygulama">
<başlıksınıf adı="Uygulama başlığı">
 supabaseClient={supabase}
 görünüm={{tema: ThemeSupa}}
 tema="karanlık"
 sağlayıcılar={['google']}
 /> 
başlık>
div>
 );
}
ihracatvarsayılan Giriş yapmak;

Hadi parçalayalım:

  • ENV dosyasındaki proje URL'niz ve genel anon anahtarınız gibi ortam değişkenleriyle bir Supabase istemcisi başlatın.
  • supabase.auth.onAuthStateChange() yöntemini kullanarak kimlik doğrulama durumundaki değişiklikleri izlemek için bir olay dinleyicisi kurun, ör. kimlik doğrulama durumu "SIGNED_OUT" değilse kullanıcı '/success' sayfasına yönlendirilir, aksi halde kullanıcı '/' sayfasına yönlendirilir (ana sayfa/giriş) sayfası.
  • Bu işlemi yönetmek için useNavigate kancasındaki gezinme yöntemini kullanacaksınız.
  • Son olarak, özellikler olarak themeSupa (Supabase tarafından sağlanır), karanlık tema ve Google sağlayıcısı görünümüyle Supabase kitaplığından React Auth UI bileşenini içeren bir div döndürün.

4. Başarı Sayfası Bileşeni

Bu bileşen, bir kullanıcının kimliği başarıyla doğrulandıktan ve bir çıkış düğmesinden sonra kullanıcı ayrıntılarını içeren bir başarı sayfası oluşturur.

Success.js dosyasına aşağıdaki kodu ekleyin:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak {createClient} itibaren"@supabase/supabase-js";
içe aktarmak {Navigate'i kullanın} itibaren'tepki-yönlendirici-dom';
içe aktarmak {useEffect, useState} itibaren'tepki';
sabit supabase = createClient(
işlem.env.REACT_APP_SUPABASE_URL,
işlem.env.REACT_APP_SUPABASE_API_KEY
); 
işlevBaşarı() {
sabit [kullanıcı, setUser] = useState([]); 
sabit navigasyon = useNavigate(); 
 kullanım Etkisi (() => {
zaman uyumsuzişlevgetUserData(){
beklemek supabase.auth.getUser().then((değer) => {
eğer(değer.veri?.kullanıcı) {
setUser(değer.veri.kullanıcı)} 
 }) }
 getUserData();
 },[]);
sabit avatar = kullanıcı?.user_metadata?.avatar_url; 
sabit userName = user?.user_metadata?.full_Name; 
zaman uyumsuzişlevSignOutUser(){
beklemeksupabase.auth.oturumu Kapat();
 gezinmek('/');
 };
geri dönmek (
<divsınıf adı="Uygulama">
<başlıksınıf adı="Uygulama başlığı">
<h1>Giriş başarılıh1>
<h2>{Kullanıcı adı}h2>
<imgkaynak={avatar} />
<düğmetıklamada={()=> signOutUser()}>Çıkış Yapdüğme>
başlık>
div>
 );
}
ihracatvarsayılan Başarı;

Hadi parçalayalım:

  • ENV dosyasındaki proje URL'niz ve genel anon anahtarınız gibi ortam değişkenleriyle bir Supabase istemcisi başlatın.
  • Kullanmak React.js kancaları, useState ve useEffect, API yanıtından veri almak için.
  • useEffect kancası, supabase.auth.getUser yöntemini çağıran eşzamansız bir işlev uygular. Bu yöntem, geçerli kullanıcının oturumuyla ilişkili kullanıcı bilgilerini alır.
  • Eşzamansız işlev daha sonra kullanıcı verilerinin var olup olmadığını kontrol eder ve varsa bunu durum değişkenine ayarlar.
  • SignOutUser işlevi, kullanıcının oturumunu kapatmak ve oturumu kapat düğmesine tıkladıklarında kullanıcıyı tekrar oturum açma sayfasına yönlendirmek için supabase.auth.signOut yöntemini kullanır.
  • Son olarak, kullanıcı bilgilerinin bir kısmını içeren bir div döndürün.

5. Sayfa Yönlendirmelerini Yapılandırma

Son olarak, hem oturum açma hem de başarı sayfaları için yolları yapılandırın.

app.js dosyasına aşağıdaki kodu ekleyin:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak { TarayıcıYönlendirici gibi Yönlendirici, Rotalar, Rota } itibaren'tepki-yönlendirici-dom';
içe aktarmak Giriş yapmak itibaren'./sayfalar/Giriş';
içe aktarmak Başarı itibaren'./pages/Başarı';
işlevUygulama() {
geri dönmek (
<Yönlendirici>
//Rotaları tanımlayın
"/" eleman={} />
"/başarı" eleman={} />
Rotalar>
Yönlendirici>
 );
}
ihracatvarsayılan Uygulama;

Hadi parçalayalım:

  • İki yolu tanımlayın: tepki-yönlendirici kitaplığından Yönlendirici bileşenlerini kullanarak oturum açma sayfası için bir yol ve başarı sayfası için bir yol.
  • Rota yollarını sırasıyla '/' ve '/success' olarak ayarlayın ve Login ve Success bileşenlerini ilgili rotalarına atayın.
  • Son olarak, geliştirme sunucusunu döndürmek için terminalinizde şu komutu çalıştırın: 
 npm başlangıç
  • Şu yöne rotayı ayarla http//:yerel ana bilgisayar: 3000 Sonucu görüntülemek için tarayıcınızda Giriş bileşeni, Supabase'in React-auth-UI'sini hem e-posta hem de Google sağlayıcıları ile işler.

Google kullanarak kimlik doğrulaması yapabilir veya e-postanız ve şifrenizle kaydolabilir ve oturum açmak için bu kimlik bilgilerini kullanabilirsiniz. Supabase'in sosyal oturum açma sağlayıcılarını veya e-posta sağlayıcısını kullanmanın avantajı, kayıt mantığı hakkında endişelenmenize gerek olmamasıdır.

Bir kullanıcı bir sosyal sağlayıcıya veya bir e-posta ve bir parola ile kaydolduğunda, veriler projeniz için Supabase'in Auth kullanıcı veritabanında saklanacaktır. Kimlik bilgilerini kullanarak oturum açtıklarında, Supabase, kaydolmak için kullanılan kimlik bilgilerine göre ayrıntıları doğrulayacaktır.

Supabase, React'te Kimlik Doğrulamayı Kolaylaştırıyor

Supabase, veritabanı barındırma, API erişimi ve gerçek zamanlı veri akışı gibi kimlik doğrulamanın ötesinde kapsamlı bir özellikler paketi sunar. Ayrıca, geliştiricilerin uygulamalarını daha verimli bir şekilde oluşturmasına ve yönetmesine yardımcı olmak için sorgu oluşturucu ve veri görselleştirme gibi özellikler sunar.

Sezgisel kontrol paneli ve güçlü API'si ile Supabase, ölçeklenebilir ve güvenli uygulamalar oluşturmak için güçlü bir araçtır.