Albus log - 2
Google Login 구현
순서
- 구글에 서비스 등록
- react에서 구글 로그인 버튼 및 동의 화면 구현
- express 에서 accessToken을 받아 사용자의 프로필을 조회하는 것 구현 (TypeScript)
구글에 서비스 등록
구글에서 제공하는 api를 사용하기 위해서는 구글에 나의 서비스를 등록하고 비밀키를 얻으면, 그걸로 구글 api를 사용할 수 있다.
https://console.developers.google.com/apis/
- 이 곳에서 로그인을 하고 들어간다.
- 상단의 프로젝트를 들어가 새 프로젝트를 만든다.
- 메뉴에서 사용자 인증정보 만들기 -> ‘OAuth 클라이언트 ID’ 선택
- OAuth 동의 화면을 구성해야한다고 나온다.
- 동의화면 구성에서 해당하는 내용을 작성하고 저장한다. (일단 앱이름만 적어도 된다.)
- 다시 클라이언트 ID 만들기 페이지로 돌아오면 ‘웹 어플리케이션’을 선택한다.
- 아래 ‘이름’란과 ‘승인된 자바스크립트 원본’, ‘승인된 리디렉션 url’을 적어준다.
- 저장 후 생성하면 클라이언트 ID와 비밀키가 나온다.
react에서 구글 로그인 구현
react-google-login 모듈을 통해 간단히 버튼을 구현할 수 있다.
설치
npm intall react-google-login
or
yarn add react-google-login
구현
구글 로그인 버튼과 서버에 accessToken과 함께 로그인 요청을 보내는 부분이다.
import React from 'react';
import ReactDOM from 'react-dom';
import GoogleLogin from 'react-google-login';
// or
import { GoogleLogin } from 'react-google-login';
const googleLogin = (response) => {
// login 로직 구현
const option = {
headers: {
'Content-Type': 'application/json'
},
method: 'post',
data: {
accessToken: response.accessToken
},
url: this.serverHost + '/auth/googleLogin'
};
try {
return await axios(option);
} catch (e) {
throw e
}
}
const onFailure = (response) => {
console.log(response);
}
ReactDOM.render(
<GoogleLogin
clientId="658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com"
buttonText="Login"
onSuccess={googleLogin}
onFailure={responseGoogle}
cookiePolicy={'single_host_origin'}
/>,
document.getElementById('googleButton')
);
Express (TypeScript) 구현
이제 서버에서 react에서 보낸 accessToken으로 구글에 api 요청을해서 사용자의 프로필을 얻어와 응답해 주어야한다.
구글 api 요청을 통한 사용자 프로필 조회
googleapis 모듈로 쉽게 api 요청을 할 수 있다.
import { google } from 'googleapis';
import SocialProfileInterface from "@interface/socialProfile.interface";
import 'dotenv/config';
class SocialProfileService {
public getGoogleProfile = (accessToken: string): Promise<SocialProfileInterface> => {
const plus = google.plus({ // 구글의 소셜 네트워크 서비스인 구글플러스의 api 사용
version: 'v1',
auth: process.env.GOOGLE_SECRET, // 구글에 서비스 등록해서 얻은 비밀키 입력
});
return new Promise<SocialProfileInterface>(((resolve, reject) => {
plus.people.get({ // people의 get api 로 프로필 조회
userId: 'me',
oauth_token: accessToken
},(err, auth) => {
if (err) {
reject(err);
return;
}
const {
id, image, emails, displayName,
} = auth.data;
const profile = {
id,
thumbnail: image.url,
email: emails[0].value,
username: displayName && displayName.split(' (')[0],
};
resolve(profile);
})
}))
}
}
export const socialService = new SocialProfileService();
이제 socialService 를 사용해 로그인을 구현하면 된다.
참조
OAuth 구글 인증 로그인(Google login) #1
https://developers.google.com/+/web/api/rest/latest/people/get
https://www.npmjs.com/package/googleapis
