Wonny
Wonny
🏅 AI 마스터
🎻 루키 파트너
🏅 베스트오브베스트

["나의 ESG궁합" 개발 일기] (251113) 구글 로그인 설정

■ 소개

https://esgsaju.web.app/

목표: 419 (사업으로 1달러 벌기 시작해서 9달러까지 벌어보기)

.

연말이라 회식이 있어서 오늘 사례글을 좀 일찍 시작합니다

주요내용 : 구글로그인 & 로컬로스트

■ 진행 및 결과

1) 구글 로그인

우선 피그마가 네이버 로그인, 카카오 로그인, 이메일 로그인 등을 다 붙여줬습니다.

지금은 mvp도 안되는 단계이기 때문에

구글 로그인만 남기고 다 지웠습니다.

나중에 앱인토스까지 간다면 토스로 로그인은 붙여야할 수 있을 것 같습니다

.

구글 로그인을 붙이기 위해서 과거의 저를 소환 했습니다.

.

https://www.gpters.org/member/EfNKn5EzyF

.

과거의 제가 이런식으로 구글 로그인을 붙였다는 것을 알게 되었습니다.

/


여기서 추가된게 바로 구글 로그인입니다.

성준님의 조언 덕분에 필요하다고 판단할 수 있었습니다-!

.

구글 로그인을 다는 것은 생각보다 쉬웠습니다.

1) 커서에 아래 내용을 붙여 넣었습니다

사본

구글 로그인 기능을 붙이고 싶어.

그런데 구글 로그인은 옵션이고,
로그인하면 나중에 만들 리더보드에 기록을 남길 수 있게 미리 세팅해줘.

리더보드는 사용자 중 각 분야 TOP 30을 확인할 수 있는 창이야
 ex) 가장 많은 회사 잔고, 가장 많은 내 잔고, 가장 많은 턴 진행 등등

2) 작동을 안해서 아래 프롬프트를 붙여 넣었습니다.

사본

작동은 안해

3) 아래와 같은 답을 주었습니다.

사본

구글 로그인이 작동하지 않는군요. Firebase 설정을 확인해보겠습니다.
Firebase 콘솔에서 구글 로그인을 활성화해야 합니다. 다음 단계를 따라해보세요:
Firebase 콘솔 설정 (필수)
Firebase 콘솔 접속: https://console.firebase.google.com
프로젝트 선택: "exiters-frompter" 프로젝트
Authentication 활성화:
왼쪽 메뉴에서 "Authentication" 클릭
"Get started" 버튼 클릭
Google 로그인 활성화:
"Sign-in method" 탭 클릭
"Google" 클릭
"Enable" 토글을 켜기
"Save" 클릭
Authorized domains 추가:
"Authentication" → "Settings" 탭
"Authorized domains"에 다음 추가:
localhost
127.0.0.1
배포 도메인 (있다면)
브라우저에서 확인
개발자 도구 열기: F12
Console 탭에서 에러 메시지 확인
Network 탭에서 Firebase 요청 실패 여부 확인
Firebase 콘솔 설정을 완료한 후 다시 테스트해보세요. 여전히 안 되면 브라우저 콘솔의 에러 메시지를 알려주세요!

4) 하라는데로 FIREBASE 홈페이지로 가서 따라했습니다.


.

이번에도 똑같이 따라했고, 구글 로그인 기능을 붙였습니다.

.

그 위에 프로필사진이나 로그아웃 기능 등을 가볍게 수정해서 추가해두었습니다.

.

.

2) 로컬호스트

하다보니 firebase 설정에 localhost를 넣어야하더라구요?

그래서 혹시 배포가 된 이후에 localhost를 사용할 수 있는 건가? 라는 생각이 들었습니다.

그래서 다시 커서에게 부탁해서 로컬호스트를 열어보았습니다.

.

왜인지 모르지만 됩니다.

.

왜인지 아시는 분 있으면 설명좀해주세요 ㅎㅎ

.

■ 느낀점 및 향후 계획

구글 로그인을 한번 한 유저는 설문조사 다시 안할수 있게 설정 중이었는데,

애가 깼습니다 ㅎㅎㅎ

나중에 또 이어서 하겠습니다.

1
1개의 답글
지피터스 뉴스레터

이번 주 AI, 딱 쓸 것만

매주 월요일 오후,
읽고 바로 써먹을 AI 소식만