팀플 소셜(구글)로그인 구현 시작. (Firebase 프로젝트 생성)

자 이제 구글 로그인 구현을 시작해보자.

지금 전반적으로 대강 계획이 잡혀서 시작은 하는데, 팀원들 상태가 메롱이다. 두명은 해외에 있고, 한명은 연락이 안된다..

나 혼자 일단 해야한다.

서론은 뒤로하고, 나의 개인 프로젝트의 순서 처럼 소셜 로그인 구현부터 시작하려고 한다! 여기서 일단 계획은 port 부터 8080이 아닌 다른 곳으로 돌려야할 것 같다.

server.port=7777

접속이 잘 되는 것 까지 확인 완료.

이제 구현전 준비준비가 필요함.

firebase에서 프로젝트 생성.

Authentication 설정까지 완료.

npm install firebase

firebase 설치하자.

이후에 /scr/firebase.js생성.

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

// Firebase 프로젝트 설정 정보
const firebaseConfig = {
    apiKey: "1",
    authDomain: "1.firebaseapp.com",
    projectId: "1",
    storageBucket: "1.appspot.com",
    messagingSenderId: "0",
    appId: "111",
    measurementId: "111"
};

// Firebase 초기화
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
export { auth };

이제는 팀플이니까 제대로 암호화해서 변수 처리해 넣을 생각이다.

.evn 루트 디렉토리에 생성해주고, gitignore에 추가.

const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: `${process.env.REACT_APP_FIREBASE_AUTH_DOMAIN}.firebaseapp.com`,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: `${process.env.REACT_APP_FIREBASE_STORAGE_BUCKET}.appspot.com`,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID,
    measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
};

최종적으로는 이렇게 되었다.

이후 제대로 되었는지 확인을 해야되서 FirebaseConfig 클래스 도입.

dependencies {
    implementation("com.google.firebase:firebase-admin:8.1.0")
}

의존성 추가.

Firebase Admin SDK 서비스 계정 파일 받아와서

@Configuration
public class FirebaseConfig {

    @Bean
    public FirebaseApp initializeFirebase() throws IOException {
        if (FirebaseApp.getApps().isEmpty()) {
            FileInputStream serviceAccount =
                    new FileInputStream("src/main/resources/teamastroneerstarinfo-firebase-adminsdk-l8qw1-62cdf88ebf.json");

            FirebaseOptions options = new FirebaseOptions.Builder()
                    .setCredentials(GoogleCredentials.fromStream(serviceAccount))
                    .setDatabaseUrl("https://teamastroneerstarinfo.firebaseio.com")  // Realtime Database URL
                    .build();

            return FirebaseApp.initializeApp(options);
        } else {
            return FirebaseApp.getInstance();
        }
    }
}

git도 이그노어 처리 했다.

나중에 팀원이랑 공유는 어떻게 해야되는건지 고민을 해봐야될듯.

는 바로 .evn으로 환경변수 등록하고,

git readme로 처리.

근데 서버 시작이 안된다. 환경변수에서 불러오는걸 못하는 오류 발생.

알아보니까 scr/.evn이 아니고 루트 디렉토리에 존재해야되는 파일이라고 한다.

그래서 최상위로 옮기고.

저번 개인프로젝트때 처럼 읽기권한 문제인 것 같아서, 읽기권한부터 확인.

확인했는제 문제가 없어서 자세히 보니까...

아 .evn이 아니고 .env이다..

오케이 서버 켜진다. 환경변수 제대로 불러온다 java에서는 이제 js에서도 제대로 불러오는지 검증이 필요함.

그래서 home.html에 js를 전달해주고 main으로 접속해봤는데, 403에러가 뜸.

아 이거 컨트롤러에서 return "main";해놓고 html파일을 home.html로 만들어서 매핑이 안됐던 것.

시큐리티 설정하고 있을 뻔 했네.

우선 결론은 못가져온다.

저번 프로젝트 처럼 webpack을 도입해서 나중에 편하게 관리해볼까?

---

webpack 도입 후에 webpack 서버 작동하니까

html-webpack-plugin모듈 이슈 발생.

npm install html-webpack-plugin --save-dev

나머지 필요 도구도 추가 설치하니까 웹팩 작동하는데 다른 에러가 났다.

babel-loader를 못찾는댄다. 또 설치

npm install babel-loader --save-dev

npm install @babel/core @babel/preset-env --save-dev

babel-loader는 Babel과 함께 JavaScript 파일을 트랜스파일할 때 필요하댄다. Babel을 사용하려면 Babel의 프리셋도 설치해야 하니까, 위의 명령어도 실행.

오케이 웹팩 잘 돌아간다.

    <!-- 번들된 JS 파일을 불러오기 -->
    <script src="http://localhost:9999/bundle.js"></script>

불러와보자고?

브라우저 환경에서는 환경변수를 다르게 사용해야된다고 한다.

그래서 java에서는 되던 방법이 여기서는 안먹히는것.

dotenv-webpack 툴 사용하자.

npm install dotenv-webpack --save-dev

이후에 webpack.config.js에서

const Dotenv = require('dotenv-webpack'); // dotenv-webpack 추가

new Dotenv(), // dotenv-webpack 추가

dotenv-webpack 추가해주자.

오케이 잘 불러 온다.

이제 팀원들을 위해서 git 에서 readme를 작성해서 올렸고,

push 해보자.

후...

내일은 google 소셜 로그인 구현으로 넘어가면 될 것 같다.