서론
- 소셜로그인 관련해서 클래스형 컴포넌트로 총 3가지(구글,페이스북,카카오)를 구현 한 적이 있다
- 하지만 함수형 컴포넌트(Hook)을 사용하면서 다른 점이 있다는 걸 깨닫고 글을 다시 한 번 작성해도록 하려 한다
구글 소셜 로그인 연동 방법
1. SDK 준비 작업
소셜 로그인을 사용하기 전 먼저 SDK를 사용할 수 있도록 준비작업이 필수
// 함수형 컴포넌트 return 안에 들어갈 html, styled components로 작성했다
<Head>
<script
src="https://apis.google.com/js/platform.js?onload=init"
async
defer
/>
<meta
name="google-signin-client_id"
content="클라이언트_ID.apps.googleusercontent.com"
/>
</Head>2. SDK 초기화(본인 APP적용) 및 버튼 클릭 적용
const googleLoginBtn = useRef(null)
// 버튼에 접근하기 위한 설정
const googleSDK = () => {
// 구글 SDK 초기 설정
window.googleSDKLoaded = () => {
// 본인 APP 초기화
window.gapi.load('auth2', () => {
const auth2 = window.gapi.auth2.getAuthInstance({
client_id: '클라이언트_ID.apps.googleusercontent.com',
scope: 'profile email',
})
// 버튼 클릭
auth2.attachClickHandler(
googleLoginBtn.current, // useRef랑 current!!!!!
{},
// 사용자 정보 불러오기
googleUser => {
const profile = googleUser.getBasicProfile()
console.log(profile)
console.log(`Token || ${googleUser.getAuthResponse().id_token}`)
setToken(googleUser.getAuthResponse().id_token)
console.log(`ID: ${profile.getId()}`)
console.log(`Name: ${profile.getName()}`)
console.log(`Image URL: ${profile.getImageUrl()}`)
console.log(`Email: ${profile.getEmail()}`)
},
error => {
alert(JSON.stringify(error, undefined, 2))
}
)
})
}
// 구글 SDK 로드
;(function(d, s, id) {
let js
const fjs = d.getElementsByTagName(s)[0]
if (d.getElementById(id)) {
return
}
js = d.createElement(s)
js.id = id
js.src = 'https://apis.google.com/js/platform.js?onload=googleSDKLoaded'
fjs.parentNode.insertBefore(js, fjs)
})(document, 'script', 'google-jssdk')
}
useEffect(() => {
googleSDK()
}, [])마무리
- 소셜 로그인은 제공 업체의 디벨로퍼 사이트를 잘 찾아보면서 본인이 원하는 정보를 가져오는 방법, 사용 정보 범위 등 개발 목적에 맞게 사용할 줄 알아야 한다.
Front End. Dev