giriiş  Bu kılavuz   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   . , React Web Uygulamasıyla Firebase Kimlik Doğrulaması Nasıl Kurulur 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   belirler. Ücretsiz   planını kullanıyorsanız günde 5 oturum açma bağlantısı e-postasıyla   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   planına yükseltmeniz gerekecektir. sınırları Spark sınırlı Blaze  Önkoşullar  Bu kılavuz boyunca, ön koşul kılavuzu olarak     ve   olarak ilgili projeye başvuracağım. React Web Uygulaması ile Firebase Kimlik Doğrulaması Nasıl Kurulur kılavuzuna ön koşul projesi  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.   giriş yapın ve   tıklayın. Firebase hesabınıza Konsola Git'i  Firebase projeleri kontrol panelinde listelenen kimlik doğrulama projenize tıklayın. Bu kılavuz   proje adını kullanır. my-auth-test  Sol panel menüsündeki   tıklayın. kimlik doğrulamaya  Ana penceredeki   sekmesine tıklayın. Oturum açma yöntemi  Önkoşul kılavuzundaki çalışmanıza göre,   tablosunun,   sütunu altında   durumuyla   zaten görüntülemesi gerekir.   sağlayıcısının yapılandırma panelini açmak için kalem simgesine tıklayın. Oturum Açma Sağlayıcıları Sağlayıcılar Etkin E-posta/Parolayı E-posta/Şifre    etkinleştirmek için açma/kapatma düğmesine tıklayın. E-posta bağlantısını (şifresiz oturum açma)    tıklayın. Kaydet'i  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   kullanılmaktadır. passwordless-auth   npx create-react-app passwordless-auth  Adım 2b – Paketlerin Kurulumu  Bu kılavuz 3 Node.js paketinin kurulumunu gerektirir:    : Firebase SDK'sı. Firebase    : Yönlendirme için. React Router DOM    : Stil vermek için. Bootstrap  Yukarıdaki üç paketin her birini   aracılığıyla yükleyin: npm   npm install firebase   npm install react-router-dom   npm install bootstrap  Adım 3 -   Önkoşul Projesinden kopyalayın firebase.js  Önkoşul projesinde, Firebase Kimlik Doğrulama hizmetinin bir örneğini oluşturmak için Firebase proje yapılandırma verilerinizi kullanan bir   dosyası oluşturdunuz.   dosyanız, Firebase proje yapılandırma   birlikte aşağıdaki yapıya sahip olmalıdır: firebase.js firebase.js değerlerinizle   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 }    yeni React proje klasörünüze kopyalayın. firebase.js  Firebase proje yapılandırmanızı gözden geçirmeniz gerekiyorsa sol panel menüsünde   yanındaki dişli simgesine tıklayın.   sekmesi zaten seçilmiş olmalıdır.   panelini içeren   bölümüne ilerleyin.   panelindeki   seçeneği zaten seçilmiş olmalıdır. Proje yapılandırma değerleriniz görüntülenen kod bloğunda listelenecektir. Projeye Genel Bakış'ın Genel Web Uygulamaları Uygulamalarınız Web uygulamaları npm  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:   ,   ,   ,   ve   . App Layout Login Confirm Profile   App    bileşeni, yönlendirme de dahil olmak üzere genel uygulama yapısını tanımlar. App   Layout    bileşeni, tüm rotalarda tutarlı kalan uygulama işaretlemesini belirtir. Layout   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   sayfasına yönlendirilir. Confirm  Sayfa, kullanıcıdan oturum açarken kullanılan e-posta adresini onaylamasını ister.   Profile  Kullanıcı, e-posta adresini onayladıktan sonra   sayfasına yönlendirilir. Profile  Kullanıcı, hesabından çıkış yapmak için   sayfasındaki çıkış düğmesine tıklayabilir. Profile  Son   dizini aşağıdaki dosyaları içerecektir: src   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  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    önkoşul projeden yeni proje klasörünüze kopyalayın. Bu kılavuz aynı dosyayı kullanır.   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. index.js index.js    dosyasını önkoşul projeden yeni proje klasörünüze kopyalayın. Bu kılavuz aynı dosyayı kullanır.   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,     etiketindeki proje metnini   veya tercih ettiğiniz başlığa göre güncelleyebilirsiniz. Layout.jsx Layout.jsx Layout.jsx <p> React With Firebase Passwordless Authentication    ve   dosyalarınız aşağıdaki gibi olmalıdır: index.js Layout.jsx   // 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 -   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   önkoşul projesinden yeni proje klasörünüze kopyalayın. App.js App.js  Aşağıdaki   satırını dosyadan silin ve aşağıda gösterildiği gibi değiştirin: import   // Delete this line: import Signup from "./Signup";   // Replace it with: import Confirm from "./Confirm";  Aşağıdaki   öğesini dosyadan silin ve aşağıda gösterildiği gibi değiştirin: <Route>   // Delete this line: <Route path = "/signup" element = { <Signup></Signup> } ></Route>   // Replace it with: <Route path = "/confirm" element = { <Confirm></Confirm> } ></Route>    kaydedin. App.js  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    bileşeninin, önkoşul projesinde olduğu gibi bir kez daha uygulamanın ana rotası olduğunu unutmayın. Login  Adım 4d -   Oluşturulması Login.jsx  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.    dizininde yeni bir   dosyası oluşturun. src Login.jsx  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 = "name@example.com" 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> ) }    kaydedin. Login.jsx  Kullanıcının e-posta adresinin alınmasının ardından   formu, Firebase'in   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.   nesnesinin   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,   belirtilen   rotasıyla eşleşir. Login.jsx sendSignInLinkToEmail actionCodeSettings sendSignInLinkToEmail App.js /confirm  Adım 4e -   Oluşturulması Confirm.jsx  Firebase'in   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   parametresi alıyor ve   değeri, kullanıcının oturum açma formu aracılığıyla oturum açarken kullandığı e-posta adresiyle eşleşmelidir.   kullanıcıya e-posta adresini onaylaması için bir form sunar ve ardından kullanıcıda oturum açmaya çalışır. signInWithEmailLink email email Confirm.jsx    dizininde yeni bir   dosyası oluşturun. src Confirm.jsx  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 = "name@example.com" 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    dosyasını kaydedin. Confirm.jsx    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   yöntemi çağrılır. Tekrarlamak gerekirse,   yöntemine iletilen   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. isSignInWithEmailLink signInWithEmailLink signInWithEmailLink email  Adım 4f -   Oluşturma Profile.jsx  Oluşturacağınız son bileşen   . Kullanıcılar   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ı   bileşenine geri yönlendirilir. Profile.jsx Confirm.jsx Login    dizininde yeni bir   dosyası oluşturun. src Profile.jsx  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    kaydedin. Profile.jsx  Adım 5 – Uygulamanın Test Edilmesi  React uygulamasını başlatın:   npm start  Tarayıcınız otomatik olarak başlamazsa tarayıcınızda   adresine gidin.   formunu görmelisiniz.  locahost:3000 Login  Oturum açmak için kullanmak istediğiniz e-postayı girin ve   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.  Gönder'i  E-posta hesabınıza giriş yapın ve Firebase oturum açma bağlantısı e-postasını arayın.   benzer bir konu satırı olmalıdır; burada 13 basamaklı sayı dizisi, Firebase projenizin   temsil eder (bu kılavuzun 3. Adımına bakın). Aşağıdaki   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.   formuna yönlendirileceksiniz.  Sign in to project-1078604952662 messagingSenderId İsteğe Bağlı Confirm    formuna oturum açarken kullandığınız e-posta adresini girin.   tıklayın. Onay başarılı olursa   sayfasına yönlendirileceksiniz.  Confirm Onayla'yı Profile  Oturumu kapatmak için   sayfasındaki   düğmesini tıklayın. Çıkış başarılı olursa,   formuna geri yönlendirileceksiniz. Profile Oturumu Kapat Login  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   yerine "kullanıcı dostu" bir ad göstermesi için proje adınızı değiştirebilirsiniz.   giriş yapın ve   tıklayın. project-1078604952662 Firebase hesabınıza Konsola Git'i  Firebase projeleri kontrol panelinde listelenen kimlik doğrulama projenize tıklayın.  Sol panel menüsünde   yanındaki dişli simgesine tıklayın.   sekmesi zaten seçilmiş olmalıdır. Projeye Genel Bakış'ın Genel    bölümündeki   seçeneğine ilerleyin. Projeniz Herkese açık ad  Kalem simgesine tıklayın ve proje adınızı istediğiniz gibi değiştirin.    tıklayın. Oturum açma bağlantısı e-postalarınız artık güncellenen proje adını görüntüleyecektir. Kaydet'i  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   sayfasında girilen e-posta adresinin yerel olarak saklanması ve   sayfasında e-posta adresinin varlığının kontrol edilmesi. Bu yaklaşımla, kullanıcı   sayfasına eriştiği cihazda oturum açma bağlantısına tıklarsa, e-posta adresini   sayfasında tekrar girmesine gerek kalmayacak ve e-posta adresi kurtarılacaktır. yerel depodan. Bu, daha sorunsuz bir kullanıcı deneyimi sağlar. Login Confirm Login Confirm  Firebase Parolasız Kimlik Doğrulama hakkında daha fazla bilgiyi   edinebilirsiniz. resmi belgelerden

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Read My Stories

Bu ses hikayenin orijinal dilinde üretilmiştir!

Çok uzun; Okumak

Make resilience your competitive advantage

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

About Author

YORUMLAR

ETİKETLERİ ASIN

BU YAZI

Related Stories

AI/ML Datalake için Referans Mimarisi Oluşturmaya Yönelik Mimar Kılavuzu

Telegram: Kripto Adası'nın anakaraya olan köprüsü

Yapay Zekanın Gücünü Ortaya Çıkarıyoruz. En Son Tekniklerin Sistematik Bir İncelemesi: Özet ve Giriş

HackerNoon Yazma Yarışmasını mı Kazanmak İstiyorsunuz? İşte #crypto-api Yarışması Kazananlarının Önerileri

AI/ML Datalake için Referans Mimarisi Oluşturmaya Yönelik Mimar Kılavuzu

Telegram: Kripto Adası'nın anakaraya olan köprüsü

Yapay Zekanın Gücünü Ortaya Çıkarıyoruz. En Son Tekniklerin Sistematik Bir İncelemesi: Özet ve Giriş

HackerNoon Yazma Yarışmasını mı Kazanmak İstiyorsunuz? İşte #crypto-api Yarışması Kazananlarının Önerileri

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps