fire base를 이용한 구글 로그인 (react)

 

 

 

firebase 프로젝트 생성하기

 

기본적으로 firebase 는 구글아이디만 있으면 바로 이용이 가능하다.

 

그리고 firebase에 들어가서 프로젝트를 생성해줘야 하는데

 

이름을 설정해주고 쭉쭉 만들어 주면된다.

 

프로젝트를 만들어 준 후에 보이는 화면이다

 

웹에서 이용할꺼니까 ! </> 모양을 클릭해 주면 된다.

 

웹버튼을 누르면 해당 화면이 나오는데 이것도 그냥 입력하고 진행하면 된다.

 

 

진행하면 해당 프로젝트의 !!! API 키 같은게 나온다!

 

 

해당 코드를 잘 가지고 나중에 구글 로그인 후 이메일 정보를 받아오는 코드를 작성하고 해당 코드를 복사해주면 된다.

 

일단 그전에 !

 

firebase의 Authentication 에 들어가준다.

 

시작하기를 눌러주면 다음의 화면이 나온다.

해당 화면에서 우리가 이용할 Google 을 들어간다.

 

 

다음의 화면이 나오는데 여기서 오른쪽 위에 사용설정을 활성화 시켜주면 된다.

 

활성화 시켜주고 구글로 로그인한 아이디로 활성이메일을 입력해준후 저장하면 끝!

 

 

저장을 하고나면 다음의 화면이 나오는데 이 프로젝트의 

이 코드로 구글로그인이 가능하게 됐다!

 

자 이제 로그인 환경을 만들러 가보자!

 

일단 가장 기본적으로 firebase 의 내용을 저장하고 정보를 가져올 수 있는 js 파일을 만들어 준다.

 

firebase.js

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getStorage } from 'firebase/storage'
import { getAuth, GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: 
  authDomain:
  projectId: 
  storageBucket: 
  messagingSenderId:
  appId: 
  measurementId:
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
export const storage = getStorage(app);

export const auth = getAuth(app);
const provider = new GoogleAuthProvider();

// export const signInWithGoogle = () => signInWithPopup(auth, provider);

export const signInWithGoogle = () => {
  signInWithPopup(auth, provider).then((result) => {
    console.log(result);
    const name = result.user.displayName;
    const email = result.user.email;
    const profilePic = result.user.photoURL;
    
    localStorage.setItem("name", name);
    localStorage.setItem("email", email);
    localStorage.setItem("profilePic", profilePic);
  }).catch((error) => {
    console.log(error);
  })
};

 

App.js

import './App.css';
import {signInWithGoogle} from "./firebase"

function App() {

  return (
    <div className="App">
      <h1>hello world</h1>
      <button onClick={signInWithGoogle}>Sign In with Google</button>
      <h1>{localStorage.getItem("name")}</h1>
      <h1>{localStorage.getItem("email")}</h1>
      <img src={localStorage.getItem("profilePic")} alt="이미지" />
    </div>
  );
}

export default App;

 

 

간단하게 App 에서 해당 환경을 만들었다.

 

위의 firebase Config 에서 프로젝트를 만들고 웹 개발을 클릭해서 받은 코드(구글 Authentic 활성화 한 계정)를 채워주면 정상적으로 작동되며 구글 이메일, 구글 닉네임, 구글 프로필 이미지 까지 받아온다.

 

App이 아닌 다른 곳에도 이용하고싶다면? (예를들어 로그인 페이지에서 이용하고 싶은 경우)

 

 

firebase.js 에서 GoogleAuthProvider 을 담은 provider와

firebase에서 getAuth에 config(증명)값을 넣고 받아온 Auth 를 export 해주고.

로그인 페이지에서 import 해서 해당 기능을 그대로 구현하면 된다. 

 

위 firebase.js에 코드 있습니다.

 

그리고 구글 로그인을 통해서 해당 구글아이디의 이메일을 가져오면

 

우리 팀같은 경우에는 email 값만 받아와서

 

email 값과 db에 있는 기존회원의 email중에 일치하는게 있으면 그 email 의 id 값을 그대로 받아와서

 

로그인하고 해당 정보를 이용해서 서비스를 온전히 이용하도록 만들었고

 

만약 구글 로그인을 통해 받아온 email 값이 회원정보 db에 일치하는 email 이 없는 경우에 

 

회원가입 페이지로 이동하게 했다!

 

 

여기까지 허접한 firebase 를 이용한 구글 로그인 설명이었습니다!