LIME

공부하고 기록하는 블로그

2 분 소요

✔️ 파이어베이스 구글 로그인

요즘 웹서비스에서 대부분 소셜 로그인을 지원하고 있고, 개발을 하다보면 소셜로그인이 필요한 경우가 생깁니다. 파이어베이스를 접하기 전에는 OAuth로 소셜 로그인을 구현할 수 있었지만, 파이어베이스를 사용하면 훨씬 간단하게 구현할 수 있습니다 :)

https://ilimes.github.io/web/post35/

[파이어베이스가 무엇인지 궁금하시다면 위 링크를 클릭해보세요.]

✔️ 사용 방법

https://firebase.google.com/

가장 먼저 파이어베이스를 사용하기 위해서는 위 링크로 이동해서 프로젝트를 만들어야합니다.

image

로그인 후 프로젝트 추가 버튼을 눌러줍니다.

image

그 다음 프로젝트 이름을 지정해준 뒤 계속을 눌러줍니다.

image

다음으로 구글 애널리틱스 설정을 해줍니다. 저는 간단히 테스트 사용만 할거라 애널리틱스 사용 설정은 하지 않았습니다.

image

잠시 기다리면 프로젝트가 생성되고, 위와 같이 ‘앱에 Firebase를 추가하여 시작하기’ 라는 문구가 적혀있는 메인화면이 나타나게 되는데요. 세번째에 위치하고 있는 웹 버튼을 눌러줍니다.

image

그럼 위와 같이 웹 앱에 Firebase추가 화면이 나타나게 됩니다. 앱 닉네임을 정하고 앱 등록 버튼을 눌러줍니다.

image

잠시 기다리면 파이어베이스 설정 관련 코드가 나타나게 됩니다. 이 중에서 빨간박스 쪽 firebaseConfig는 따로 복사해놓아야 합니다.

image

메인으로 이동해서 사용자 인증 및 관리에 들어갑니다.

image

시작하기를 눌러줍니다.

image

그럼 이렇게 제공업체를 선택하는 화면이 나타나게 됩니다. 저는 구글 로그인을 구현할 것이기 때문에 추가 제공업체 중에서 Google을 선택해줍니다.

image

위와 같은 화면이 나오면 우측 상단에 있는 토글을 ON 해주시고, 프로젝트 지원 이메일은 기본설정으로 선택해주신 뒤 저장을 눌러줍니다.

image

Authentication 설정에는 이렇게 승인된 도메인을 설정하는 곳이 있는데 저는 로컬 환경에서만 테스트 할 것이기 때문에 별도로 건들지는 않았습니다. 필요한 경우에는 도메인 추가 버튼을 눌러서 설정해주세요.

✔️ 소스

1

npm install firebase

리액트 프로젝트를 생성한 뒤에 위 명령어를 입력하여 firebase를 install 해줍니다.

  • firebase-config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "1",
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
export { app, auth };

다음으로 src폴더에 들어가서 firebase-config.js 파일을 만들어 준 뒤에 위와 같은 코드를 입력해서 넣어줍니다. 여기서 주의할 점은 firebaseConfig 부분을 아까 파이어베이스 설정 때 복사했던 코드로 넣어줘야 합니다.

  • app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

import { auth } from "./firebase-config";
import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";
import { useState } from "react";

function App() {
  const [userData, setUserData] = useState(null);

  function handleGoogleLogin() {
    const provider = new GoogleAuthProvider(); // provider 구글 설정
    signInWithPopup(auth, provider) // 팝업창 띄워서 로그인
      .then((data) => {
        setUserData(data.user); // user data 설정
        console.log(data); // console에 UserCredentialImpl 출력
      })
      .catch((err) => {
        console.log(err);
      });
  }

  return (
    <div>
      <h3>구글 로그인 테스트</h3>
      <button onClick={handleGoogleLogin}>로그인</button>
      <h4>로그인하면 아래쪽에 이름이 나타납니다.</h4>
      <div>
        {userData
          ? "당신의 이름은 : " + userData.displayName
          : "로그인 버튼을 눌러주세요 :)"}
      </div>
    </div>
  );
}

export default App;

app.js를 위와 같이 작성하고 프로젝트를 실행시키면 로그인 버튼이 나오게 되는데요.

로그인 버튼을 클릭하면 팝업창이 떠서 구글 로그인을 할 수 있고, 로그인이 완료되면 아래와 같이 본인의 구글 계정 이름이 나타나는 것을 확인할 수 있습니다.

image

이렇게 간단하게 파이어베이스를 사용하여 구글 로그인을 구현해보았습니다 😊

✔️ 파이어베이스 링크

https://firebase.google.com/

🔔포스팅 공지
개인 공부 기록용 블로그 입니다.
잘못된 부분이 있을 시 메일이나 댓글로 지적해주시면 감사드리겠습니다 :)

댓글남기기

참고