20210310 22일차 카카오 소셜 로그인 구현(중)

 

구현 사항

카카오 소셜 로그인(OAuth) 구현 중(Kakao SDK for JavaScript(이하 JavaScript SDK)를 사용한 카카오 로그인 구현 방법)

메인 페이지의 소셜 로그인 버튼을 누르고 모달의 카카오 아이콘을 클릭하면 아래와 같이 개인정보 제공 동의 여부를 묻는 카카오 오어쓰 서비스가 실행된다.

 

동의를 하고 확인 버튼을 누르면 카카오로부터 받은 토큰을 이용하여 개인 정보(이 경우, 닉네임과 이메일)을 받아온다.

그림일기장 서비스를 이용하기 위해서는 이메일을 제출이 필수적이기 때문에 다음 모달창을 띄워 추가정보 기입을 요청한다.

카카오톡으로부터 받은 이메일과 닉네임을 렌더링 해준다.

로직은 아래와 같다.

	const kakaoLogin = () => {
		window.Kakao.Auth.login({
			scope: "profile, account_email",
			success: (token: any) => {
				const accessToken = token.access_token;
				console.log(accessToken);
				window.Kakao.API.request({
					url: "/v2/user/me",
					success: (res: any) => {
						const kakaoAccount = res.kakao_account;
						setSocialModal();
						conveySocialData(kakaoAccount, "kakao");
					},
				});
			},
			fail: (err: any) => {
				console.log(err);
			},
		});
	};

 

내일일정?

카카오 소셜 로그인으로 이미 로그인하여 추가 정보를 입력한 유저에 대해서 바로 로그인을 실행해주는 로직을 작성해야 한다.

그리고 로그아웃 시에 카카오 서비스와 연결을 끊고, 동시에 해당 서비스 로그아웃도 실행되는 로직 또한 필요하다.

경우의 수만 잘 생각해보면 그리 어렵지 않을 것 같다.

가능하면 내일 완료하고 구글 소셜 로그인도 구현해야겠다.

 

도움받은 사이트

유튜브1: www.youtube.com/watch?v=Re2R2rid1K4

유튜브2: www.youtube.com/watch?v=srfSedXc2UQ

카카오 개발자 공식 사이트: developers.kakao.com/docs/latest/ko/getting-started/sdk-js