우선 firebase 콘솔 페이지에서
Authentication 에서
사용할 구글과 깃허브를 켜줘야한다.
깃허브는 인에이블 페이지에서 주어지는 주소를
Settings-OAuth Apps-New OAuth App을해서
이름을 써주고, 홈페이지 URL(없으면 아무거나 써줘도됨) 작성해주고,
맨 아래 Authorization callback URL에는
firebase에서 제공한 주소를 넣어준다.
그렇게 만들어주면 Client ID와
비밀번호가 주어진다.
그대로 복사해와서 firebase 깃허브 인에이블 창에
붙여넣기 해준다.
그럼 firebase에서 로그인 제공업체 켜기 끝!
이제,
만드려는 프로젝트 폴더에
auth_service.js 파일을 만들어준다.
class AuthService{
login(){}
}그 파일안에는 class를 만들어줄건데
이 class는 로그인, 로그아웃 관련된
일을 하는 class이다.
파이어베이스로 할것이기때문에
파이어베이스를 임포트해준다.
class AuthService{
login(providerName) {
const authProvider = new firebase.auth[`${providerName}AuthProvider`]();
}
}login할때는 구글인지, 깃허브인지등을 받아오는
providerName을 설정해주고
필요한 authProvider를 만들어 준다.
new를 해주고, firebase안에 있는 auth안에 있는 함수들을 가지고 올 것이다.
${providerName}으로 우리가 받아온 구글, 깃허브등의
AuthProvider함수를 이용하는 것이다.
class AuthService{
login(providerName) {
const authProvider = new firebase.auth[`${providerName}AuthProvider`]();
return firebase.auth().signInWithPopup(authProvider);
}
}그리고 리턴을 할 건데
팝업으로 로그인을 할것이기때문에
문서에 나와있는 팝업함수를 사용한다.
그리고 문서에 나와있듯이 authProvider를 전달해준다.
그리고,
header와 footer, login 폴더와 jsx 파일을 각각 만들어 준다.
import React from 'react';
import Footer from '../footer/footer';
import Header from '../header/header';
const Login = (props) => {
return (
<section>
<Header />
<section>
<h1>로그인</h1>
<ul>
<li>
<button>Google</button>
</li>
<li>
<button>Github</button>
</li>
</ul>
</section>
<Footer />
</section>
)
}
export default Login;login파일에는 헤더와 푸터를 임포트해주고
섹션안에 헤더와 푸터를 넣고 그 사이에
또 섹션을 줘서 로그인을 할 수 있는 목록을 만들어준다.
그럼 이런식으로 ui가 만들어진다.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.module.css';
import App from './app';
import reportWebVitals from './reportWebVitals';
const authService = new authService();
ReactDOM.render(
<React.StrictMode>
<App authService={authService}/>
</React.StrictMode>,
document.getElementById('root')
);그리고 authService를 앱에다가 전달하기위해
index.js파일에서 const로 authService를 만들어서
App 컴포넌트에 authService로 전달을 해준다.
import './app.css';
import Login from './components/login/login';
function App({authService}) {
return <Login authService={authService}/>;
}
export default App;그리고 app에서도 마찬가지로
authService를 props안에 받아와서
Login에 다시 전달을 해준다.
import React from 'react';
import Footer from '../footer/footer';
import Header from '../header/header';
const Login = ({ authService }) => {
const onLogin = (event) => {
authService.login(event.currentTarget.textContent)
};
return (
<section>
<Header />
<section>
<h1>로그인</h1>
<ul>
<li>
<button onClick={onLogin}>Google</button>
</li>
<li>
<button onClick={onLogin}>Github</button>
</li>
</ul>
</section>
<Footer />
</section>
)
}
export default Login;login에서는 authService를 props으로 전달해주고
본격적으로 로그인하는 함수를 만들어준다.
onLogin이라는 변수에 콜백함수를 해줄건데
이건 각각의 버튼(google, github)이 클릭되었을 때 실행되야 하기때문에
버튼으로 가서 onClick을 설정해준다.
그리고 그 onLogin함수는 auth서비스를 이용해서
로그인을 해볼 것이다.
authService안에login이라는 함수를
이용할 건데
이 login함수는 프로바이더를 전달해줘야한다.
(auth_service.js파일에서 설정해줬음)
그 프로바이더 이름은 버튼에 들어있는
텍스트를 이용하면되는데,
event.currenTarget.textContent 이렇게 써서
프로바이더 이름을 설정해준다.
const firebaseApp = firebase.initializeApp(firebaseConfig);
export default firebaseApp;그리고 전에 만들어 뒀던
firebase.js파일에서
firebaseApp으로 이니셜라이즈를 만들어주고
export 해준다.
import firebase from "firebase";
import firebaseApp from "./firebase";
class AuthService{
login(providerName) {
const authProvider = new firebase.auth[`${providerName}AuthProvider`]();
return firebaseApp.auth().signInWithPopup(authProvider);
}
}
export default AuthService;그리고 auth_service.js 파일로와서
firebaseApp을 임포트해주고
firebase대신 이니셜라이즈된 firebaseApp을 사용해준다.
그리고서 버튼을 클릭하면
설정한 구글과 깃허브의 계정으로
로그인할 수 있는 팝업창이 뜬다.