React Web Uygulamasıyla Firebase Parolasız Kimlik Doğrulaması Nasıl Kurulur

giriiş

Bu kılavuz , React Web Uygulamasıyla Firebase Kimlik Doğrulaması Nasıl Kurulur konusuna bir ektir. Bu kılavuzun girişinde Firebase'in temel E-posta/Şifre kimlik doğrulamasının ötesinde başka kimlik doğrulama şemaları sunduğunu belirtmiştim. Bu alternatiflerden biri Parolasız Kimlik Doğrulamadır .

Parolasız kimlik doğrulama, uygulamalar oluştururken çekici bir seçenektir. Kullanıcılarınızın şifrelerini hatırlamalarına gerek kalmadığı ve dolayısıyla şifrelerini kaybetme konusunda da endişelenmeleri gerekmediği için kullanıcı deneyimini basitleştirir. Ayrıca herhangi bir şifre yakalama veya yönetim mantığı tasarlamaya gerek olmadığından geliştirme deneyimini de kolaylaştırır.

Bu kılavuzda, Firebase'in parolasız kimlik doğrulamasını uygulayan basit bir Oturum Açma/Onaylama/Profil/Oturum Kapatma iş akışı oluşturacaksınız.

Sen başlamadan önce

Google, çeşitli Firebase Kimlik Doğrulama sınırları belirler. Ücretsiz Spark planını kullanıyorsanız günde 5 oturum açma bağlantısı e-postasıyla sınırlı olacağınızı unutmayın. Spark planı test amacıyla yeterli olsa da, bu sınırın üzerine çıkabilmek için kullandıkça öde Blaze planına yükseltmeniz gerekecektir.

Önkoşullar

Bu kılavuz boyunca, ön koşul kılavuzu olarak React Web Uygulaması ile Firebase Kimlik Doğrulaması Nasıl Kurulur kılavuzuna ve ön koşul projesi olarak ilgili projeye başvuracağım.

Bu kılavuzu tamamlamak için şunlara sahip olmanız gerekir:

• Tüm önkoşullar dahil olmak üzere önkoşul kılavuzunu tamamladı.

Adım 1 - Firebase Projenizle Parolasız Kimlik Doğrulamayı Etkinleştirme

Önkoşul kılavuzunda, temel e-posta/şifre kimlik doğrulaması için yeni bir Firebase projesi oluşturdunuz. Artık aynı projeyi şifresiz kimlik doğrulama için etkinleştireceksiniz. Firebase hesabınıza giriş yapın ve Konsola Git'i tıklayın.

1. Firebase projeleri kontrol panelinde listelenen kimlik doğrulama projenize tıklayın. Bu kılavuz my-auth-test proje adını kullanır.

2. Sol panel menüsündeki kimlik doğrulamaya tıklayın.

3. Ana penceredeki Oturum açma yöntemi sekmesine tıklayın.

4. Önkoşul kılavuzundaki çalışmanıza göre, Oturum Açma Sağlayıcıları tablosunun, Sağlayıcılar sütunu altında Etkin durumuyla E-posta/Parolayı zaten görüntülemesi gerekir. E-posta/Şifre sağlayıcısının yapılandırma panelini açmak için kalem simgesine tıklayın.

5. E-posta bağlantısını (şifresiz oturum açma) etkinleştirmek için açma/kapatma düğmesine tıklayın.

6. Kaydet'i tıklayın.

   
   

Firebase projeniz artık şifresiz kimlik doğrulamayı destekleyecek şekilde yapılandırılmıştır.

Adım 2 - Yeni Bir React Projesi Oluşturma ve Paketleri Yükleme

Adım 2a - Yeni Bir React Projesi Oluşturma

İstediğiniz uygulama adını kullanarak yeni bir React projesi oluşturun. Bu kılavuzda passwordless-auth kullanılmaktadır.

 npx create-react-app passwordless-auth

Adım 2b – Paketlerin Kurulumu

Bu kılavuz 3 Node.js paketinin kurulumunu gerektirir:

• Firebase : Firebase SDK'sı.
• React Router DOM : Yönlendirme için.
• Bootstrap : Stil vermek için.

Yukarıdaki üç paketin her birini npm aracılığıyla yükleyin:

 npm install firebase

 npm install react-router-dom

 npm install bootstrap

Adım 3 - firebase.js Önkoşul Projesinden kopyalayın

Önkoşul projesinde, Firebase Kimlik Doğrulama hizmetinin bir örneğini oluşturmak için Firebase proje yapılandırma verilerinizi kullanan bir firebase.js dosyası oluşturdunuz. firebase.js dosyanız, Firebase proje yapılandırma değerlerinizle birlikte aşağıdaki yapıya sahip olmalıdır:

 import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; const firebaseConfig = { apiKey: "AIzaSyDiUlY68W9Li_0EIkmdGdzD7nvqCT9kHnY", authDomain: "my-auth-test-fbd48.firebaseapp.com", projectId: "my-auth-test-fbd48", storageBucket: "my-auth-test-fbd48.appspot.com", messagingSenderId: "1078604952662", appId: "1:1078604952662:web:5d0b908439cfb5684ab7f7" } const app = initializeApp(firebaseConfig); const auth = getAuth(app); export { auth }

firebase.js yeni React proje klasörünüze kopyalayın.

Adım 4 - React Uygulamasını Oluşturma

Adım 4a – React Uygulama Bileşenlerine Genel Bakış

React uygulaması 5 bileşenden oluşacaktır: App , Layout , Login , Confirm ve Profile .

App

• App bileşeni, yönlendirme de dahil olmak üzere genel uygulama yapısını tanımlar.

Layout

• Layout bileşeni, tüm rotalarda tutarlı kalan uygulama işaretlemesini belirtir.

Login

• Kullanıcının uygulamaya giriş noktası giriş formudur.
• Bir kullanıcı e-posta adresi üzerinden oturum açmaya çalıştığında, e-posta adresine oturum açma bağlantısını içeren bir e-posta gönderilir.

Confirm

• Kullanıcı, oturum açma bağlantısını tıkladığında Confirm sayfasına yönlendirilir.
• Sayfa, kullanıcıdan oturum açarken kullanılan e-posta adresini onaylamasını ister.

Profile

• Kullanıcı, e-posta adresini onayladıktan sonra Profile sayfasına yönlendirilir.
• Kullanıcı, hesabından çıkış yapmak için Profile sayfasındaki çıkış düğmesine tıklayabilir.

Son src dizini aşağıdaki dosyaları içerecektir:

 src |__ index.js |__ firebase.js // Copied from prerequisite project in Step 3. |__ App.js |__ Layout.jsx |__ Login.jsx |__ Confirm.jsx |__ Profile.jsx

Adım 4b - React Proje Şablonunu Temizleme ve Önkoşul Projesinden Dosyaları Kopyalama

1. Aynı dosyaları, önkoşul kılavuzunun Adım 5b.1'de açıklandığı şekilde React proje şablonundan silebilirsiniz. Aşağıdaki dosyaları React projenizden silin:

• reportWebVitals.js
• setupTests.js
• logo.svg
• index.css
• App.css
• App.test.js

2. index.js önkoşul projeden yeni proje klasörünüze kopyalayın. Bu kılavuz aynı dosyayı kullanır. index.js dosyasını yeniden oluşturmanız gerekiyorsa önkoşul kılavuzunun Adım 5b.2'sine bakın veya aşağıdaki kod bloğunu kopyalayın.

3. Layout.jsx dosyasını önkoşul projeden yeni proje klasörünüze kopyalayın. Bu kılavuz aynı dosyayı kullanır. Layout.jsx dosyasını yeniden oluşturmanız gerekiyorsa önkoşul kılavuzunun 5d Adımına bakın veya aşağıdaki kod bloğunu kopyalayın. İsteğe bağlı olarak, Layout.jsx <p> etiketindeki proje metnini React With Firebase Passwordless Authentication veya tercih ettiğiniz başlığa göre güncelleyebilirsiniz.

   
   

index.js ve Layout.jsx dosyalarınız aşağıdaki gibi olmalıdır:

 // index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import "bootstrap/dist/css/bootstrap.min.css"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> );

 // Layout.jsx import { Outlet } from "react-router-dom"; const Layout = () => { return( <div className = "container-fluid"> <div className = "row justify-content-center mt-3"> <div className = "col-md-4 text-center"> <p className = "lead">React With Firebase Passwordless Authentication</p> </div> <Outlet /> </div> </div> ) } export default Layout

Adım 4c - App.js Oluşturma

App.js dosyası, yalnızca iki satırda yapılan değişikliklerle büyük ölçüde önkoşul projedekiyle aynıdır. Dosyayı oluşturmayı kolaylaştırmak için App.js önkoşul projesinden yeni proje klasörünüze kopyalayın.

1. Aşağıdaki import satırını dosyadan silin ve aşağıda gösterildiği gibi değiştirin:

   
   

 // Delete this line: import Signup from "./Signup";

 // Replace it with: import Confirm from "./Confirm";

2. Aşağıdaki <Route> öğesini dosyadan silin ve aşağıda gösterildiği gibi değiştirin:

   
   

 // Delete this line: <Route path = "/signup" element = { <Signup></Signup> } ></Route>

 // Replace it with: <Route path = "/confirm" element = { <Confirm></Confirm> } ></Route>

3. App.js kaydedin.

   
   

Artık dosyanın tamamı aşağıdaki gibi olmalıdır:

 import Layout from "./Layout"; import Login from "./Login"; import Confirm from "./Confirm"; import Profile from "./Profile"; import { BrowserRouter, Routes, Route } from "react-router-dom"; const App = () => { return ( <BrowserRouter> <Routes> <Route path = "/" element = { <Layout></Layout> }> <Route index element = { <Login></Login> }></Route> <Route path = "/confirm" element = { <Confirm></Confirm> } ></Route> <Route path = "/profile" element = { <Profile></Profile> } ></Route> </Route> </Routes> </BrowserRouter> ) } export default App

Login bileşeninin, önkoşul projesinde olduğu gibi bir kez daha uygulamanın ana rotası olduğunu unutmayın.

Adım 4d - Login.jsx Oluşturulması

Parolasız kimlik doğrulama durumunda, elbette bir parola alanı eklemenize veya parola girişi için durumu yönetmenize gerek yoktur. Bu nedenle, giriş formunun yalnızca kullanıcının e-posta adresini alması gerekir.

1. src dizininde yeni bir Login.jsx dosyası oluşturun.

2. Aşağıdaki kodu ekleyin:

   
   

 import { useState } from "react"; import { auth } from "./firebase"; import { sendSignInLinkToEmail } from "firebase/auth"; const Login = () => { const [email, setEmail] = useState(""); const [notice, setNotice] = useState(""); const actionCodeSettings = { url: "http://localhost:3000/confirm", handleCodeInApp: true } const callSendSignInLinkToEmail = (e) => { e.preventDefault(); sendSignInLinkToEmail(auth, email, actionCodeSettings) .then(() => { setNotice("An email was sent to your email address. Click the link in the email to login."); }) .catch((error) => { setNotice("An error occurred when sending a login link to your email address: ", error.name); }) } return( <div className = "container"> <div className = "row justify-content-center"> <form className = "col-md-4 mt-3 pt-3 pb-3"> { "" !== notice && <div className = "alert alert-warning" role = "alert"> { notice } </div> } <div className = "form-floating mb-3"> <input type = "email" className = "form-control" id = "exampleInputEmail" placeholder = "[email protected]" value = { email } onChange = { (e) => setEmail(e.target.value) }></input> <label htmlFor = "exampleInputEmail" className = "form-label">Email address</label> </div> <div className = "d-grid"> <button type = "submit" className = "btn btn-primary pt-3 pb-3" onClick = {(e) => callSendSignInLinkToEmail(e)}>Submit</button> </div> </form> </div> </div> ) }

3. Login.jsx kaydedin.

Kullanıcının e-posta adresinin alınmasının ardından Login.jsx formu, Firebase'in sendSignInLinkToEmail yöntemi aracılığıyla adresine oturum açma bağlantısını içeren bir e-posta gönderir. Başarılı olursa, kullanıcıya e-postanın gönderildiği bildirilir. actionCodeSettings nesnesinin sendSignInLinkToEmail yöntemine parametre olarak aktarıldığını ve kullanıcının e-postayla gönderilen oturum açma bağlantısını tıkladığında yönlendirileceği URL'yi içerdiğini unutmayın. Bu durumda URL, App.js belirtilen /confirm rotasıyla eşleşir.

Adım 4e - Confirm.jsx Oluşturulması

Firebase'in signInWithEmailLink yöntemi, oturum açma bağlantısını tıklayan bir kullanıcının oturum açması için kullanılır. Birazdan göreceğiniz gibi, yöntem bir email parametresi alıyor ve email değeri, kullanıcının oturum açma formu aracılığıyla oturum açarken kullandığı e-posta adresiyle eşleşmelidir. Confirm.jsx kullanıcıya e-posta adresini onaylaması için bir form sunar ve ardından kullanıcıda oturum açmaya çalışır.

1. src dizininde yeni bir Confirm.jsx dosyası oluşturun.

2. Aşağıdaki kodu ekleyin:

   
   

 import { useState } from "react"; import { auth } from "./firebase"; import { isSignInWithEmailLink, signInWithEmailLink } from "firebase/auth"; import { useNavigate } from "react-router-dom"; const Confirm = () => { const navigate = useNavigate(); const [email, setEmail] = useState(""); const [notice, setNotice] = useState(""); const callSignInWithEmailLink = (e) => { e.preventDefault(); if (isSignInWithEmailLink(auth, window.location.href)) { signInWithEmailLink(auth, email, window.location.href) .then(() => { navigate("/profile"); }) .catch((error) => { setNotice("An occurred during sign in: ", error.name); }) } } return( <div className = "container"> <div className = "row justify-content-center"> <form className = "col-md-4 mt-3 pt-3 pb-3"> { "" !== notice && <div className = "alert alert-warning" role = "alert"> { notice } </div> } <div className = "form-floating mb-3"> <input type = "email" className = "form-control" id = "exampleConfirmEmail" placeholder = "[email protected]" value = { email } onChange = { (e) => setEmail(e.target.value) }></input> <label htmlFor = "exampleConfirmEmail" className = "form-label">Please confirm your email address</label> </div> <div className = "d-grid"> <button type = "submit" className = "btn btn-primary pt-3 pb-3" onClick = {(e) => callSignInWithEmailLink(e)}>Confirm</button> </div> </form> </div> </div> ) } export default Confirm

3. Confirm.jsx dosyasını kaydedin.

isSignInWithEmailLink yöntemi ilk olarak kullanıcının kullandığı oturum açma bağlantısının geçerli olup olmadığını kontrol eder. Bu durumda, kullanıcının oturum açması için signInWithEmailLink yöntemi çağrılır. Tekrarlamak gerekirse, signInWithEmailLink yöntemine iletilen email değeri, kullanıcının oturum açma formunda kullandığı e-posta adresiyle eşleşmelidir. Kullanıcı yeni bir kullanıcıysa (yani ilk kez oturum açıyorsa), Firebase'in kullanıcıyı Firebase Authentication deposunda otomatik olarak oluşturacağını unutmayın. Bu, parolasız kimlik doğrulamanın sunduğu basitleştirilmiş deneyimin bir başka örneğidir: yeni kullanıcılar için hesap oluşturma işlemi otomatik olarak gerçekleştirilir.

Adım 4f - Profile.jsx Oluşturma

Oluşturacağınız son bileşen Profile.jsx . Kullanıcılar Confirm.jsx aracılığıyla başarıyla oturum açtıklarında bu bileşene yönlendirilir. Rota, kullanıcıyı e-posta adresiyle karşılar ve çıkış için bir düğme sağlar. Oturumu kapattıktan sonra kullanıcı Login bileşenine geri yönlendirilir.

1. src dizininde yeni bir Profile.jsx dosyası oluşturun.

2. Aşağıdaki kodu ekleyin:

   
   

 import { auth } from "./firebase"; import { signOut } from "firebase/auth"; import { useNavigate } from "react-router-dom"; const Profile = () => { const navigate = useNavigate(); const logoutUser = async (e) => { e.preventDefault(); await signOut(auth); navigate("/"); } return( <div className = "container"> <div className = "row justify-content-center"> <div className = "col-md-4 text-center"> <p>Welcome <em className = "text-decoration-underline">{ auth.currentUser.email }</em>. You are logged in!</p> <div className = "d-grid gap-2"> <button type = "submit" className = "btn btn-primary pt-3 pb-3" onClick = {(e) => logoutUser(e)}>Logout</button> </div> </div> </div> </div> ) } export default Profile

3. Profile.jsx kaydedin.

Adım 5 – Uygulamanın Test Edilmesi

1. React uygulamasını başlatın:

   
   

 npm start

2. Tarayıcınız otomatik olarak başlamazsa tarayıcınızda locahost:3000 adresine gidin. Login formunu görmelisiniz.

3. Oturum açmak için kullanmak istediğiniz e-postayı girin ve Gönder'i tıklayın. Gönderim başarılı olursa, e-posta adresinize oturum açma bağlantısını içeren bir e-postanın gönderildiğini belirten bir bildirim görüntülenecektir.

   
   

4. E-posta hesabınıza giriş yapın ve Firebase oturum açma bağlantısı e-postasını arayın. Sign in to project-1078604952662 benzer bir konu satırı olmalıdır; burada 13 basamaklı sayı dizisi, Firebase projenizin messagingSenderId temsil eder (bu kılavuzun 3. Adımına bakın). Aşağıdaki İsteğe Bağlı bölümünde, Firebase projenizin adını, oturum açma bağlantısı e-postalarında "kullanıcı dostu" bir ad görüntüleyecek şekilde nasıl değiştirebileceğinizi açıklayacağım. Şimdilik oturum açma bağlantısı e-postasını açın ve oturum açma bağlantısına tıklayın. Confirm formuna yönlendirileceksiniz.

5. Confirm formuna oturum açarken kullandığınız e-posta adresini girin. Onayla'yı tıklayın. Onay başarılı olursa Profile sayfasına yönlendirileceksiniz.

   
   

6. Oturumu kapatmak için Profile sayfasındaki Oturumu Kapat düğmesini tıklayın. Çıkış başarılı olursa, Login formuna geri yönlendirileceksiniz.

   
   

Yukarıdaki adımlar uygulamanın iş akışını yakalar.

İsteğe Bağlı: Proje Adınızı Değiştirme

Firebase tarafından gönderilen oturum açma bağlantısı e-postalarının, örneğin project-1078604952662 yerine "kullanıcı dostu" bir ad göstermesi için proje adınızı değiştirebilirsiniz. Firebase hesabınıza giriş yapın ve Konsola Git'i tıklayın.

1. Firebase projeleri kontrol panelinde listelenen kimlik doğrulama projenize tıklayın.
2. Sol panel menüsünde Projeye Genel Bakış'ın yanındaki dişli simgesine tıklayın. Genel sekmesi zaten seçilmiş olmalıdır.
3. Projeniz bölümündeki Herkese açık ad seçeneğine ilerleyin.
4. Kalem simgesine tıklayın ve proje adınızı istediğiniz gibi değiştirin.
5. Kaydet'i tıklayın. Oturum açma bağlantısı e-postalarınız artık güncellenen proje adını görüntüleyecektir.

Sonuç ve Sonraki Adımlar

Parolasız kimlik doğrulama, uygulama geliştiricileri arasında giderek daha popüler bir seçim gibi görünüyor ve anlaşılır bir şekilde öyle. Parolaları yönetme ihtiyacını ortadan kaldırmanın bariz avantajının ötesinde, oturum açma bağlantısını gönderme işlemi başlı başına bir doğrulama olduğundan e-posta doğrulamasına da gerek yoktur.

Önkoşul projesinde olduğu gibi buradaki uygulama da temeldir. Aşağıdakiler gibi basit geliştirmeleri düşünebilirsiniz:

• Belirli e-posta adresi alan adlarının (örn. yaygın spam e-posta alanları) engellenmesi/kara listeye alınması.

• Kullanıcı tarafından Login sayfasında girilen e-posta adresinin yerel olarak saklanması ve Confirm sayfasında e-posta adresinin varlığının kontrol edilmesi. Bu yaklaşımla, kullanıcı Login sayfasına eriştiği cihazda oturum açma bağlantısına tıklarsa, e-posta adresini Confirm sayfasında tekrar girmesine gerek kalmayacak ve e-posta adresi kurtarılacaktır. yerel depodan. Bu, daha sorunsuz bir kullanıcı deneyimi sağlar.

  
  

Firebase Parolasız Kimlik Doğrulama hakkında daha fazla bilgiyi resmi belgelerden edinebilirsiniz.