소개  이 가이드는   에 대한 보충 자료입니다. 해당 가이드의 소개에서 Firebase는 기본 이메일/비밀번호 인증 이외의 다른 인증 체계를 제공한다는 점을 언급했습니다. 이러한 대안 중 하나는   입니다. React 웹 애플리케이션으로 Firebase 인증을 설정하는 방법 비밀번호 없는 인증  비밀번호 없는 인증은 애플리케이션을 구축할 때 매력적인 옵션입니다. 사용자가 비밀번호를 기억할 필요가 없고 비밀번호 분실에 대해 걱정할 필요도 없으므로 사용자 경험이 단순화됩니다. 또한 비밀번호 캡처나 관리 로직을 설계할 필요가 없기 때문에 개발 환경이 용이합니다.  이 가이드에서는 Firebase의 비밀번호 없는 인증을 구현하는 간단한 로그인/확인/프로필/로그아웃 워크플로를 구축합니다.  시작하기 전에  Google은 다양한 Firebase 인증   설정합니다. 무료   플랜을 사용하는 경우 로그인 링크 이메일은 하루에 5개로   됩니다. 테스트 목적으로는 Spark 요금제로 충분할 수 있지만 이 한도를 초과하려면 종량제   요금제로 업그레이드해야 합니다. 제한을 Spark 제한 Blaze  전제 조건  이 가이드 전반에 걸쳐   가이드를   로, 관련 프로젝트를   로 참조하겠습니다. React 웹 애플리케이션으로 Firebase 인증을 설정하는 방법 전제 조건 가이드 전제 프로젝트  이 가이드를 완료하려면 다음이 필요합니다.  모든 필수 구성 요소를 포함하여 필수 구성 요소 가이드를 완료했습니다.  1단계 - Firebase 프로젝트에서 비밀번호 없는 인증 활성화  필수 구성 요소 가이드에서는 기본 이메일/비밀번호 인증을 위한 새 Firebase 프로젝트를 만들었습니다. 이제 비밀번호 없는 인증을 위해 동일한 프로젝트를 활성화하겠습니다.   에 로그인하고   클릭하세요. Firebase 계정 Go to Console 을  Firebase 프로젝트 대시보드에 나열된 인증 프로젝트를 클릭합니다. 이 가이드에서는 프로젝트 이름   사용합니다. my-auth-test  왼쪽 패널 메뉴에서   클릭하세요. 인증을  메인 창에서   탭을 클릭하세요. 로그인 방법  필수 구성 요소 가이드의 작업에 따르면   테이블의   열 아래에   상태의   이미 표시되어 있습니다. 연필 아이콘을 클릭하면   제공업체의 구성 패널이 열립니다. 로그인 공급자 공급자 활성화 이메일/비밀번호가 이메일/비밀번호    활성화하려면 토글을 클릭하세요. 이메일 링크(비밀번호 없이 로그인)를    클릭합니다. 저장 을  이제 Firebase 프로젝트가 비밀번호 없는 인증을 지원하도록 구성되었습니다.  2단계 - 새 React 프로젝트 생성 및 패키지 설치  2a단계 - 새로운 React 프로젝트 생성  원하는 애플리케이션 이름을 사용하여 새 React 프로젝트를 만듭니다. 이 가이드에서는   사용합니다. passwordless-auth   npx create-react-app passwordless-auth  2b단계 - 패키지 설치  이 가이드에는 3개의 Node.js 패키지를 설치해야 합니다.    : Firebase SDK입니다. Firebase    : 라우팅용입니다. React Router DOM    : 스타일링용. 부트스트랩    통해 위의 세 가지 패키지를 각각 설치합니다. npm   npm install firebase   npm install react-router-dom   npm install bootstrap  3단계 - 필수 프로젝트에서   복사 firebase.js  필수 프로젝트에서 Firebase 프로젝트 구성 데이터를 사용하여 Firebase 인증 서비스 인스턴스를 만드는   파일을 만들었습니다.   파일은 Firebase   구성 값과 함께 다음과 같은 구조를 가져야 합니다. firebase.js firebase.js 프로젝트   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 }    새 React 프로젝트 폴더에 복사합니다. firebase.js  Firebase 프로젝트 구성을 검토해야 하는 경우 왼쪽 패널 메뉴에서   옆에 있는 톱니바퀴 아이콘을 클릭하세요.   탭이 이미 선택되어 있어야 합니다.   패널이 포함된   섹션까지 아래로 스크롤합니다.   패널 내의   옵션이 이미 선택되어 있습니다. 프로젝트 구성 값은 표시된 코드 블록에 나열됩니다. 프로젝트 개요 일반 웹 앱 앱 웹 앱 npm  4단계 - React 애플리케이션 구축  4a단계 - React 애플리케이션 구성 요소 개요  React 애플리케이션은   ,   ,   ,   ,   의 5가지 구성요소로 구성됩니다. App Layout Login Confirm Profile   App    구성 요소는 라우팅을 포함한 전체 애플리케이션 구조를 정의합니다. App   Layout    구성 요소는 모든 경로에서 일관성을 유지하는 애플리케이션 마크업을 지정합니다. Layout   Login  애플리케이션에 대한 사용자의 진입점은 로그인 양식입니다.  사용자가 이메일 주소를 통해 로그인을 시도하면 로그인 링크가 포함된 이메일이 해당 이메일 주소로 전송됩니다.   Confirm  사용자가 로그인 링크를 클릭하면   페이지로 이동됩니다. Confirm  페이지에서는 사용자에게 로그인할 때 사용한 이메일 주소를 확인하도록 요청합니다.   Profile  사용자는 이메일 주소를 확인한 후   페이지로 라우팅됩니다. Profile  사용자는   페이지에서 로그아웃 버튼을 클릭하여 자신의 계정에서 로그아웃할 수 있습니다. Profile  최종   디렉터리에는 다음 파일이 포함됩니다. src   src |__ index.js |__ firebase.js // Copied from prerequisite project in Step 3. |__ App.js |__ Layout.jsx |__ Login.jsx |__ Confirm.jsx |__ Profile.jsx  4b단계 - React 프로젝트 템플릿 정리 및 필수 프로젝트에서 파일 복사  필수 구성 요소 가이드의 5b.1단계에 설명된 대로 React 프로젝트 템플릿에서 동일한 파일을 삭제할 수 있습니다. React 프로젝트에서 다음 파일을 삭제합니다.   reportWebVitals.js   setupTests.js   logo.svg   index.css   App.css   App.test.js  필수 프로젝트의   새 프로젝트 폴더로 복사합니다. 이 가이드에서는 동일한 파일을 사용합니다.   다시 빌드해야 하는 경우 필수 구성 요소 가이드의 5b.2단계를 참조하거나 아래 코드 블록을 복사하세요. index.js index.js  필수 프로젝트의   새 프로젝트 폴더에 복사합니다. 이 가이드에서는 동일한 파일을 사용합니다.   다시 빌드해야 하는 경우 필수 구성 요소 가이드의 5d단계를 참조하거나 아래 코드 블록을 복사하세요. 선택적으로   의   태그에 있는 프로젝트 텍스트를   또는 원하는 제목으로 업데이트할 수 있습니다. Layout.jsx Layout.jsx Layout.jsx <p> React With Firebase Passwordless Authentication    및   파일은 다음과 같아야 합니다. 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  4c단계 -   구축 App.js    파일은 두 줄만 변경된 점을 제외하면 필수 프로젝트의 파일과 거의 동일합니다. 파일 빌드를 용이하게 하려면 필수 프로젝트의   새 프로젝트 폴더에 복사하세요. App.js App.js  파일에서 다음   줄을 삭제하고 아래와 같이 바꿉니다. import   // Delete this line: import Signup from "./Signup";   // Replace it with: import Confirm from "./Confirm";  파일에서 다음   삭제하고 아래와 같이 바꿉니다. <Route>   // Delete this line: <Route path = "/signup" element = { <Signup></Signup> } ></Route>   // Replace it with: <Route path = "/confirm" element = { <Confirm></Confirm> } ></Route>    저장합니다. App.js  이제 전체 파일은 다음과 같습니다.   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  4d단계 -   구축 Login.jsx  비밀번호 없는 인증의 경우 비밀번호 필드를 포함할 필요도 없고 비밀번호 입력 상태를 관리할 필요도 없습니다. 따라서 로그인 양식에서는 사용자의 이메일 주소만 캡처하면 됩니다.    디렉터리에 새   파일을 만듭니다. src Login.jsx  다음 코드를 추가하세요.   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> ) }    저장합니다. Login.jsx  사용자의 이메일 주소를 캡처하면   양식은 Firebase의   메소드를 통해 사용자의 주소로 로그인 링크가 포함된 이메일을 보냅니다. 성공하면 사용자에게 이메일이 전송되었다는 알림이 전송됩니다.   개체는   메서드에 매개 변수로 전달되며 사용자가 이메일로 전송된 로그인 링크를 클릭할 때 이동되는 URL을 포함합니다. 이 경우 URL은   에 지정된   경로에 매핑됩니다. Login.jsx sendSignInLinkToEmail actionCodeSettings sendSignInLinkToEmail App.js /confirm  4e단계   구축 Confirm.jsx  Firebase의   메소드는 로그인 링크를 클릭한 사용자를 로그인하는 데 사용됩니다. 잠시 후에 보게 되겠지만, 이 메소드는   매개변수를 취하고   의 값은 사용자가 로그인 양식을 통해 로그인할 때 사용한 이메일 주소와 일치해야 합니다.   사용자에게 이메일 주소를 확인하는 양식을 제시한 후 사용자 로그인을 시도합니다. signInWithEmailLink email email Confirm.jsx    디렉터리에 새   파일을 만듭니다. src Confirm.jsx  다음 코드를 추가하세요.   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    저장합니다. Confirm.jsx    메서드는 먼저 사용자가 사용 중인 로그인 링크가 유효한지 확인합니다. 그렇다면 사용자 로그인을 위해   메소드가 호출됩니다. 다시 한번 강조하자면,   메소드에 전달된   값은 사용자가 로그인 양식에 사용한 이메일 주소와 일치해야 합니다. 사용자가 신규 사용자인 경우(즉, 처음 로그인하는 경우) Firebase는 Firebase 인증 저장소에 자동으로 사용자를 생성합니다. 이는 비밀번호 없는 인증이 제공하는 단순화된 경험의 또 다른 예입니다. 신규 사용자에 대한 계정 생성은 자동으로 처리됩니다. isSignInWithEmailLink signInWithEmailLink signInWithEmailLink email  4f단계 -   구축 Profile.jsx  빌드할 최종 구성 요소는   입니다. 사용자가   통해 성공적으로 로그인하면 이 구성 요소로 라우팅됩니다. 경로는 이메일 주소로 사용자를 환영하고 로그아웃 버튼을 제공합니다. 로그아웃하면 사용자는   구성 요소로 다시 라우팅됩니다. Profile.jsx Confirm.jsx Login    디렉터리에 새   파일을 만듭니다. src Profile.jsx  다음 코드를 추가하세요.   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    저장합니다. Profile.jsx  5단계 - 애플리케이션 테스트  React 애플리케이션을 시작합니다.   npm start  브라우저가 자동으로 실행되지 않으면 브라우저에서   으로 이동하십시오.   양식이 표시됩니다.  locahost:3000 Login  로그인하는 데 사용할 이메일을 입력하고   클릭하세요. 제출이 성공하면 로그인 링크가 포함된 이메일이 귀하의 이메일 주소로 전송되었다는 알림이 표시됩니다.  제출 을  이메일 계정에 로그인하고 Firebase 로그인 링크 이메일을 찾으세요. 제목 줄은   와 유사해야 합니다. 여기서 13자리 숫자 시퀀스는 Firebase 프로젝트의   나타냅니다(이 가이드의 3단계 참조). 아래   섹션에서는 로그인 링크 이메일에 '사용자 친화적인' 이름을 표시하도록 Firebase 프로젝트 이름을 수정하는 방법을 설명하겠습니다. 지금은 로그인 링크 이메일을 열고 로그인 링크를 클릭하세요.   양식으로 이동됩니다.  Sign in to project-1078604952662 messagingSenderId 선택 사항 Confirm    양식에 로그인할 때 사용한 이메일 주소를 입력하세요.   클릭합니다. 확인이 성공하면   페이지로 이동됩니다.  Confirm 확인 을 Profile  로그아웃하려면   페이지에서   버튼을 클릭하세요. 로그아웃에 성공하면   양식으로 다시 이동됩니다. Profile 로그아웃 Login  위의 단계에서는 애플리케이션의 워크플로를 캡처합니다.  선택 사항: 프로젝트 이름 수정  Firebase에서 보낸 로그인 링크 이메일   대신 '사용자 친화적인' 이름이 표시되도록 프로젝트 이름을 변경할 수 있습니다.   에 로그인하고   클릭하세요. project-1078604952662 Firebase 계정 Go to Console 을  Firebase 프로젝트 대시보드에 나열된 인증 프로젝트를 클릭합니다.  왼쪽 패널 메뉴에서   옆에 있는 기어 아이콘을 클릭합니다.   탭이 이미 선택되어 있어야 합니다. 프로젝트 개요 일반    섹션에서   옵션까지 아래로 스크롤합니다. 내 프로젝트 공개 이름  연필 아이콘을 클릭하고 프로젝트 이름을 원하는 대로 수정하세요.    클릭합니다. 이제 로그인 링크 이메일에 업데이트된 프로젝트 이름이 표시됩니다. 저장 을  결론 및 다음 단계  비밀번호 없는 인증은 애플리케이션 개발자들 사이에서 점점 인기를 얻고 있는 것으로 보이며, 당연히 그렇습니다. 비밀번호를 관리할 필요가 없다는 명백한 이점 외에도 로그인 링크를 보내는 프로세스 자체가 확인이므로 이메일 확인이 필요하지 않습니다.  전제조건 프로젝트와 마찬가지로 여기서의 구현은 기본입니다. 다음과 같은 간단한 개선 사항을 고려할 수 있습니다.  특정 이메일 주소 도메인(예: 일반적인 스팸 이메일 도메인)을 차단/블랙리스트에 추가합니다.    페이지에서 사용자가 입력한 이메일 주소를 로컬에 저장하고   페이지에서 이메일 주소가 있는지 확인합니다. 이 접근 방식을 사용하면 사용자가   페이지에 액세스했던 동일한 장치에서 로그인 링크를 클릭하면 이메일 주소가 복구되므로   페이지에 다시 입력할 필요가 없습니다. 로컬 저장소에서. 이는 더욱 마찰 없는 사용자 경험을 제공합니다. Login Confirm Login Confirm    통해 Firebase 비밀번호 없는 인증에 대해 자세히 알아볼 수 있습니다. 공식 문서를

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

Read My Stories

이 오디오는 이야기의 원래 언어로 제작되었습니다!

React 웹 애플리케이션으로 Firebase 비밀번호 없는 인증을 설정하는 방법

About Author

코멘트

태그 걸기

이 기사는 다음에서 발표되었습니다.

Related Stories

이 18가지 개발자 도구로 생산성을 높이세요 🚀🔥

Crypto Growth: 효과적인 사용자 페르소나 만들기

Claude Sonnet 3.5 시스템 프롬프트 유출: 법의학적 분석

디지털 유목민 들어보기: 태국의 새로운 DTV 비자에 대해 알아야 할 사항

이 18가지 개발자 도구로 생산성을 높이세요 🚀🔥

Crypto Growth: 효과적인 사용자 페르소나 만들기

Claude Sonnet 3.5 시스템 프롬프트 유출: 법의학적 분석

디지털 유목민 들어보기: 태국의 새로운 DTV 비자에 대해 알아야 할 사항

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps