create-react-app 사용
npx create-react-app social_login --template typescript
https://console.cloud.google.com/projectcreate
클라이언트 ID
획득github
에 구글 로그인 소스 사용.접속 후, 위 필요한 정보를 입력.
사용자 인증 정보 접속, +시용자 인증 정보 만들기
클릭, OAuth 클라이언트 ID
클릭.
애플리케이션 유형 설정, 이름 입력
승인된 자바스크립트 원본
에 localhost 추가. 만들기 완료
생성된 사용자 인증 정보/OAuth 2.0 클라이언트 ID에 생성된 사용자 클릭하여 아래 정보를 얻음.
https://github.com/MomenSherif/react-oauth
react-google-login 서비스 지원 중단으로, 새로운 구글 웹용 API 사용.
GoogleOAuthOrivuder
로 나의 앱을 감싼다.import { GoogleOAuthProvider } from '@react-oauth/google';
import { GoogleLogin } from '@react-oauth/google';
<GoogleOAuthProvider
clientId="<your_client_id>"
>
<GoogleLogin
onSuccess={credentialResponse => {
console.log(credentialResponse); // 로그인 성공이면 credentialResponse를 획득.
}}
onError={() => {
console.log('Login Failed');
}}
/>;
</GoogleOAuthProvider>
여기서 credentialResponse
에서 credential
정보를 얻을 수 있는데, 이것을 jwt 디코드하면 유저의 정보를 얻을 수 있다.
이것은 매우 기본적인 로그인 방식으로, One tap
, auth login
외 커스텀이 가능하기 때문에 해당 정보는 다음에 포스팅 하겠다.