Firebase Google에서 React로 로그인
소개
Firebase 인증은 사용자의 기존 소셜 계정을 사용하여 로그인하는 간단한 방법을 제공합니다.이 강좌에서 우리는 사용자의 구글 계정을 어떻게 사용하여 로그인하는지 이해할 것이다.
뭐 공부 해요?
요구 사항
기동기 코드
클론 이니시에이터 코드
git clone -b starter https://github.com/gathoni-k/Firebase-Google-Signin.git먼저 here 프로젝트 만들기 시작시작 을 클릭합니다.
항목 페이지로 이동합니다.추가 항목을 선택하여 원하는 이름을 지어주면 구글 분석을 받거나 받지 않고 Firebase 계정을 선택하면 기본 계정을 선택할 수 있습니다.
나중에 프로젝트 개요 페이지로 이동합니다.
응용 프로그램을 추가하려면 빠른 시작 아래...텍스트, 세 번째 아이콘을 누르면 웹 응용 프로그램을 만들고 웹 응용 프로그램에 별명을 지어줍니다.
next를 누르고 FirebaseConfig 대상을 복사합니다. 나중에 응용 프로그램을 초기화합니다.
인증을 사용하려면 프로젝트 개요 페이지로 돌아가서'인증'탭을 클릭한 다음 로그인 방법을 설정하고 구글을 사용하십시오
.
자, 이제 재미있는 것을 봅시다...💃🏾💃🏾
앞서 캡처한 Firebase 구성 대상을 캡처하는 것부터 시작하겠습니다. 민감한 정보이기 때문에 저장하고 싶습니다.env 파일을 추가하십시오.gitignore 파일을 GitHub 같은 버전 소스 코드 관리 프로그램에 잘못 전송하지 않습니다.
말은 그렇지만 하나를 만들자.env 파일, 다음 내용 추가
.환경
REACT_APP_API_KEY=""
REACT_APP_AUTH_DOMAIN=""
REACT_APP_DATABASE_URL=""
REACT_APP_PROJECT_ID=""
REACT_APP_STORAGE_BUCKET=""
REACT_APP_MESSAGING_SENDER_ID=""
REACT_APP_APP_ID=""
REACT_APP_MEASUREMENT_ID=""
Note that the REACT_APP_ prefix is necessary. You can read more on setting custom environment variables in react here
방문env 변수,dotenv를 설치해야 합니다.이것은 환경 변수를 불러오는 npm 패키지입니다.env 파일이 프로세스에 들어갑니다.환경
yarn add dotenv
yarn add firebase
서비스 폴더를 만들고 Firebase를 만듭니다.js 파일 및 다음 코드 추가
src/services/firebase.회사 명
import dotenv from 'dotenv'
dotenv.config()
import * as firebase from "firebase/app";
import "firebase/auth";
firebase.initializeApp({
apiKey: process.env.REACT_APP_API_KEY,
authDomain: process.env.REACT_APP_AUTH_DOMAIN,
databaseURL: process.env.REACT_APP_DATABASE_URL,
projectId: process.env.REACT_APP_PROJECT_ID,
storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_APP_ID,
measurementId: process.env.REACT_APP_MEASUREMENT_ID
});
다음은 구글에 로그인하는 로그인 기능을 만듭니다.우리는
signInWithPopup() 방법을 사용할 것이다.export const auth = firebase.auth();
const googleProvider = new firebase.auth.GoogleAuthProvider()
export const signInWithGoogle = () => {
auth.signInWithPopup(googleProvider).then((res) => {
console.log(res.user)
}).catch((error) => {
console.log(error.message)
})
}
src/Login.회사 명
import React from "react";
import "./Login.css"
import { signInWithGoogle } from "./services/firebase";
export default function Login() {
return (
<div className="login-buttons">
<button className="login-provider-button" onClick={signInWithGoogle}>
<img src="https://img.icons8.com/ios-filled/50/000000/google-logo.png" alt="google icon"/>
<span> Continue with Google</span>
</button>
</div>
);
}
그러나 권한이 부여되지 않은 사용자가 보호된 경로에 접근하는 것을 어떻게 방지합니까?네, 몇 가지 방법이 있습니다. 하지만 상하문 API를 어떻게 사용하는지 보여 드리겠습니다.상하문 API는 전역 변수를 정의하는 방법으로 구성 요소를 통해 전역 변수에 접근할 수 있으며, 프로필 구성 요소를 구성 요소에 전달하는 것이 아니라 구성 요소에 접근할 수 있다.
Providers 폴더를 만들고 UserProvider를 만듭니다.js 파일
src/providers/UserProvider.회사 명
import React, {useState, useEffect, createContext} from "react";
import { auth } from "../services/firebase"
export const UserContext = createContext({user: null})
export default () => {
const [user, setuser] = useState(null)
useEffect(() => {
auth.onAuthStateChanged(async (user) => {
const { displayName, email } = user;
setuser({
displayName,
email
})
})
},[])
return (
<UserContext.Provider value={user}>{props.children}</UserContext.Provider>
)
}
사용자 값을 상하문으로 저장하기 때문에createContext () 를 사용하여 사용자 값을 만들고 사용자의 초기 값을 전달합니다. 이 예에서null이고 변수 UserContext에 분배합니다.
UserContext는 값을 제공하는 공급자 구성 요소를 제공합니다.우리의 경우, 그것은 우리에게 사용자를 제공할 것이다.
기본 함수에서 사용자의 인증 상태를 추적해야 합니다.이것은 onAuthStateChanged를 사용하여 완성된 것입니다. 이것은 Firebase가 제공하는 함수입니다.Firebase에서 내보낸 auth ()js 응용 프로그램 인증.
사용자가 상태에서 로그인하면 이름과 전자 메일 업데이트를 표시합니다.
마지막으로 이 함수는 사용자 값이 있는 UserContext 제공 프로그램 구성 요소를 되돌려줍니다.
이 값을 사용하려면 사용자 값을 사용할 구성 요소를 UserProvider 구성 요소에 포장해야 합니다.
src/App.회사 명
import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import "./App.css"
import Navbar from "./Navbar"
import Login from "./Login";
import Dashboard from "./Dashboard";
import UserProvider from "./providers/UserProvider";
function App() {
return (
<UserProvider>
<Router>
<Navbar/>
<div className="App">
<Switch>
<Route exact path="/">
<Login />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
</Switch>
</div>
</Router>
</UserProvider>
);
}
export default App;
src/Login.회사 명
import React, { useContext } from 'react';
import './Login.css'
import { signInWithGoogle } from './services/firebase';
import { UserContext } from './providers/UserProvider';
export default function Login() {
const user = useContext(UserContext)
return (
<div className="login-buttons">
<button className="login-provider-button" onClick={signInWithGoogle}>
<img src="https://img.icons8.com/ios-filled/50/000000/google-logo.png" alt="google icon"/>
<span> Continue with Google</span>
</button>
</div>
);
}
이제 사용자 값을 확인하고 인증된 경우 대시보드 페이지로 이동합니다.
src/Login.회사 명
import React, { useEffect, useContext, useState } from 'react';
import './Login.css'
import { signInWithGoogle } from './services/firebase';
import { UserContext } from './providers/UserProvider';
import { Redirect } from 'react-router-dom';
export default function Login() {
const user = useContext(UserContext)
const [redirect, setredirect] = useState(null)
useEffect(() => {
if (user) {
setredirect('/dashboard')
}
}, [user])
if (redirect) {
<Redirect to={redirect}/>
}
return (
<div className="login-buttons">
<button className="login-provider-button" onClick={signInWithGoogle}>
<img src="https://img.icons8.com/ios-filled/50/000000/google-logo.png" alt="google icon"/>
<span> Continue with Google</span>
</button>
</div>
);
}
useEffect 연결은 어셈블리가 렌더링된 후에 실행됩니다.이것은 사용자 값을 검사합니다. 존재하면 사용자가 인증을 통과했고 대시보드로 방향을 바꿀 수 있음을 나타냅니다.
대시보드로 방향을 바꾸는 경로를 설정하면 사용자에게 적절하게 방향을 바꿀 수 있습니다.깔끔했어
그러나 사용자가/dashboard로 이동하면 접근할 수 있다는 문제가 있습니다.우리는 정말 그러고 싶지 않다.
계기판의 경로를 보호하기 위해서, 우리는 사용자의 인증 상태를 검사해야 한다. 만약 인증을 거쳤다면, 그들은 남을 수 있고, 그렇지 않다면, 우리는 로그인 페이지로 방향을 바꾸어 그들을 차버릴 수 있다.
src/대시보드.회사 명
import React from "react";
import "./Dashboard.css";
import React, { useEffect, useContext, useState } from "react";
import { UserContext } from "./providers/UserProvider";
import { Redirect } from "react-router-dom";
export default function Dashboard() {
const user = useContext(UserContext);
const [redirect, setredirect] = useState(null);
useEffect(() => {
if (!user) {
setredirect("/");
}
}, [user]);
if (redirect) {
<Redirect to={redirect} />;
}
return (
<div className="dashboard">
<h1 className="dashboard-text">Welcome Home</h1>
<button className="logout-button">
<img
src="https://img.icons8.com/ios-filled/50/000000/google-logo.png"
alt="google icon"
/>
<span> logout</span>
</button>
</div>
);
}
auth.signOut()로 우리의 Firebase에 전화하기만 하면 된다.js 파일, 함수를 가져오고 로그아웃 단추에 onClick 프로세서를 추가합니다.src/services/firebase.회사 명
...
export const logOut = () => {
auth.signOut().then(()=> {
console.log('logged out')
}).catch((error) => {
console.log(error.message)
})
}
import React from "react";
import "./Dashboard.css";
import React, { useEffect, useContext, useState } from "react";
import { UserContext } from "./providers/UserProvider";
import { Redirect } from "react-router-dom";
import { logOut } from "./services/firebase";
export default function Dashboard() {
const user = useContext(UserContext);
const [redirect, setredirect] = useState(null);
useEffect(() => {
if (!user) {
setredirect("/");
}
}, [user]);
if (redirect) {
<Redirect to={redirect} />;
}
return (
<div className="dashboard">
<h1 className="dashboard-text">Welcome Home</h1>
<button className="logout-button" onClick={logOut}>
<img
src="https://img.icons8.com/ios-filled/50/000000/google-logo.png"
alt="google icon"
/>
<span> logout</span>
</button>
</div>
);
}
읽어주셔서 감사합니다.🥰
Reference
이 문제에 관하여(Firebase Google에서 React로 로그인), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/gathoni/firebase-google-sign-in-with-react-3741텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
