[React]구글 Oauth2 로그인 구현 with TypeScript
2021. 6. 9. 00:42ㆍWeb_Programming/React
저는 이번 우아한테크러닝 4기 : 나만의 노션 만들기 (feat.시니어봇)에 운이 좋게 참여하게 되었어요
이 노션 프로젝트는 리액트 typescript를 이용하여 진행되는데 typescript는 처음이라 많이 어색하더라구요
해당 프로젝트에서는 로그인 기능을 구글 인증 API인 Oauth2를 이용하기로 결정되어서 구현한 내용을 토대로 포스팅을 해보려합니다 :-D
먼저 구글 Oauth2 의 document는 아래 링크에서 자세히 볼 수 있어요.
https://developers.google.com/identity/protocols/oauth2
OAuth 2.0을 사용하여 Google API에 액세스 | Google ID 플랫폼 | Google Developers
참고 : Google의 OAuth 2.0 구현 사용에는 OAuth 2.0 정책 이 적용됩니다. Google API는 인증 및 승인을 위해 OAuth 2.0 프로토콜 을 사용합니다. Google은 웹 서버, 클라이언트 측, 설치 및 제한된 입력 장치 애
developers.google.com
가장 먼저 진행해야할 것은,
- Google API console에서 프로젝트 등록
- Google API console에서 'Oauth 동의화면'을 간단히 진행해줍니다.
- Google API console에서 '사용자 인증정보'를 통해 Client ID를 발급받습니다.
이제 코드를 작성해 볼건데요, 그전에 index.html <head>태그 안에
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="%REACT_APP_CLIENT_ID%">
<script src="https://apis.google.com/js/platform.js" async defer></script>위 내용들을 기입해줍니다. 여기서 REACT_APP_CLIENT_ID는 바로 위에서 발급한 Client ID를 기입해주면 됩니다.
그다음, react에서 제공해주는 react-google-login 패키지를 설치해줍니다.
npm install react-google-login
그다음, Login 페이지에 다음과 같이 작성합니다.
import * as React from 'react';
import GoogleLogin from 'react-google-login';
const Login = (props: any) => {
//클라이언트 ID (환경변수)
let googleClientId:string=process.env.REACT_APP_CLIENT_ID||"";
//사용자 정보를 담아둘 userObj
const [userObj, setUserObj]=React.useState({
email:"",
name:""
})
//로그인 성공시 res처리
const onLoginSuccess=(res:any)=>{
setUserObj({...userObj,
email:res.profileObj.email,
name:res.profileObj.name
})
}
return (
<div>
<GoogleLogin
clientId = {googleClientId}
buttonText="Google"
onSuccess={result=>onLoginSuccess(result)}
onFailure={result => console.log(result)}
/>
</div>
);
};
export default Login;
설치한 react-google-login 패키지의 GoogleLogin컴포넌트를 이용하여 로그인이 가능합니다.
onSucsess 콜백 함수를 통해 사용자 정보를 받아 처리할 수 있습니다.
(res에는 token정보, profile정보등 여러가지가 담겨있습니다.)
저는 res정보중 profileObj의 name과 email을 user정보로 받아 저장하도록 처리하였습니다.
이제 실행시켜보면, 구글 로그인 버튼이 보여지고, 클릭시 팝업창으로 로그인 화면으로 넘어가지는 걸 볼 수 있답니다
👇
포스팅 마치겠습니다:-D
'Web_Programming > React' 카테고리의 다른 글
| [React.js]리액트의 가상돔, 리액트 훅 기초 (0) | 2021.07.11 |
|---|---|
| [React.js]리액트의 상탯값, 속성값, 반환값 (0) | 2021.07.08 |
| [React] 카카오 Map _지도 생성, 현 위치 재검색 구현 (+카카오 로컬 API) (4) | 2021.05.30 |
| [React]리액트 다음 우편번호 검색 (4) | 2021.05.29 |
| [React]리액트 메신져 멘션/언급 기능 구현 (0) | 2021.04.21 |