합니다, 개발공부📝 합니다, 개발공부📝

node js를 통해서 oauth2를 구현하는 방법도 있지만, 라이브러리를 통해서 react(프론트엔드)단에서 바로 구글 로그일을 구현하는 방법도 있다. React Google Login 라이브러리 설치 npm install react-google-login 먼저 해당 라이브러리를 설치해준다. 사용하기 import React from 'react'; import ReactDOM from 'react-dom'; import GoogleLogin from 'react-google-login'; // or import { GoogleLogin } from 'react-google-login'; //로그인 성공했을 떄 처리 함수 const successGoogle = (response) => { console...

구글 로그인 연동을 시도하던 중 idpiframe initialization failed가 발생하였다. 구글로그인을 시도하는 데 third party cookies enabled 설정이 이미 완료된 상태일 때 발생한다. 구글 크롬 설정 -> 고급 -> 개인정보 및 보안 -> 인터넷 사용 기록 삭제 -> 모든 쿠키와 캐시된 이미지 또는 파일 삭제를 통해서 해겨랗ㄹ 수 있다. (참고한 사이트) https://stackoverflow.com/questions/43964539/google-api-not-a-valid-origin-for-the-client-url-has-not-been-whitelisted-for Google API: Not a valid origin for the client: url has ..

로그인 창에서 많이 볼 수 있는 소셜로그인 기능을 만들어보자. (spring-react에 이어 두번째 소셜 로그인!) 여기서는 카카오에서 code부분을 access_token으로 생각해서 굉장히 헤메였다...세상에나 마상에나 이런짓을...😵‍💫 (결국 code로 다시 access_token 받아와서 잘 해결했음!) REST API Node js에서 소셜로그인을 구현해내는 방법에는 sdk를 이용한 방법도 존재하지만 Rest api를 통해서 구현하기로 했다. (백엔드에서 받아서 받은 토큰으로 사용자 정보를 처리할 수 있게) 리액트에서 모든과정은 authorization_code를 받고 나서 access_token을 받아오도록 하고 싶었으나 frontend에서 토큰을 가져오려 시도하면 네이버는 cors오류가 ..

로그인 창에서 많이 볼 수 있는 소셜로그인 기능을 만들어보자. 여기서 인증이 완료된 후 생성한 토큰을 어떻게 프론트엔드로 다시 보낼까에 대한 부분이 어려웠다 😵‍💫 (결론은 쿠키를 통해서 확인된 uri에 생성된 토큰 붙인 새로운 uri 생성하고 다시 보내기...!) 구글 프로젝트 계정 만들기 https://console.cloud.google.com/apis Google Cloud Platform 하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요. accounts.google.com 먼저 홈페이지에 들어가서 로그인을 해준 후 , API 및 서비스 항목으로 들어간다. 적용할 프로젝트를 생성해준다. OAuth 동의화면으로 가서 앱 정보를 입력해준다. ..