작성자는 생활 코딩 강의를 들으며 공부하였습니다!
이 글은 서버쪽 기술에 의존하지 않고 웹브라우저 위에서 자바스크립트를 이용해 구글에 로그인 하는 방법에 대한 글입니다.
개요
먼저 이론적인 얘기를 살펴본다면 일반적인 인증의 과정은 다음과 같습니다.
우선 예를 들어, 우리의 서비스가 있고, 우리 서비스의 사용자가 있습니다.
그러면 저 사용자를 식별하기 위해서 우리는 두 가지 정보를 받는데, 하나는 ID이고, 또 하나는 패스워드 입니다.
즉, ID를 통해서 구분하고 패스워드를 통해서 정말 그 사람이 맞는지를 식별하는(인증하는) 것입니다.
Federated Identity에서 어떻게 동작하는 지 보자면, 우리는 OAuth라고 하는 방식을 이욯해서 Federated Identity를 구분할 건데, 이 OAuth에서는 우리가 기존에 유저라고 했던 사람을 리소스 오너라고 부릅니다.
우리가 지금 원하는 것은 클라이언트라고 부를건데, 리소스의 예를 들면, 구글의 칼린더, 구글 플러스의 어떤 사용자에 대한 정보같은 것들을 리소스라고 하고, 그 림소스를 제공하는 구글과 같은 회사의 서비스를 리소스 서버라고 합니다.
이 리소스를 이용하면 우리가 아이디와 패스워드 대신에 어떤 정보를 획득할 수 있냐면, 리소스 오너에게 권한을 요청하면 리소스 오너가 리소스 서버에게 요청해서 엑세스 토큰이라고 하는 값을 발급합니다.
저 엑세스 토큰은 리소스 오너가 리소스 서버에 있는 기능중에 일부 기능만을 우리의 서비스인 클라이언트에게 허락하는 그러한 아주 특수한 비밀번호라고 할 수 있습니다.
그러면 엑세크 토큰을 우리 서비스가 받아서 API같은 것들로 호출할 때 바로 저 엑세스 토큰을 비밀번호 대신 사용해서 여러가지 정보를 요청하고, 수정할 수 있는 것입니다.
이제 인증과 관련된 Federated Identtity이야기를 해보겠습니다.
우리 서비스가 엑세스토큰을 이용해서 리소스 서버에 API에게 이 사용자의 아이디가 무엇이냐 라는 것을 물어봅니다.
사용자가 구글에서 여러가지 회원가입 같은 걸 했을 때 구글 내에서 이 사용자를 식별할 때 사용하는 사용자의 고유한 아이디값이 있을것입니다.
아이디란 바로 그 아이디 값을 물어보고 있는 것입니다.
엑세스 토큰을 통해서 물어봤기 때문에 리소스 서버는 우리의 서비스인 클라이언트에게 아이디 값이 무엇이다 라는 것을 알려주게 되는 것입니다.
이 아이디를 통해 할 수 있는 것은 구글에서 우리의 사용자가 사용하는 아이디를 사용자가 우리 서비스에 직접 회원가입을 해서 발급하는 아이디 대신에 사용할 수 있다는 것입니다.
두번째는 리소스 오너가 우리의 서비스의 패스워드를 통해서 자기가 맞는지를 식별하지않는 패스워드 대신에 리소스 서버가 아이디 값을 줬다면 이 사람은 이 아이디에 주인이 확실하다라는 것을 우리가 안심할 수 있는 것이죠.
이것을 통해서 인증의 목적 까지도 달성할 수 있다는 겁니다.
이것이 바로 Federated Identuty를 내부적으로 OAuthf를 이용해서 사용하는 원리라고 할 수 있습니다.
구체적인 방법
(1) 클라이언트 등록
우리의 서비스가 이 리소스 서버에 있는 리소스에 언어의 정보를 이용하려면 우선 리소스 서버에 등록해서 허가를 받아야합니다.
허가를 하는 과정에서 리소스 서버는 우리의 서비스를 식별할 수 있는 식별자인 클라이언트 아이디와 클라이언트 시크릿이라는 값을 발급해 줍니다.
우리도 그 발급된 클라이언트 아이디와 시크릿을 어딘가에 잘 보관해놔야 합니다.
클라이언트 아이디는 남들이 봐도 되지만 클라이언트 시크릿은 남들이 보면 절대로 안되는 종목입니다.
두 개의 값을 발급 받는 방법을 살펴봅시다.
우리가 제일 먼저 해야 할 것은 구글 API 콘솔이라고 검색을 하면 구글 API 콘솔이라고 하는 페이지에 들어가 로그인을 하면 다음과 같은 화면이 뜨게 될 것입니다.
프로젝트란 나의 서비스를 리소스 서버에 등록할 때 나의 서비스가 바로 프로젝트가 되는 것입니다(페이스북에서는 앱이라고 했지만 구글에서는 프로젝트라고 합니다).
그러면 새 프로젝트를 클릭해서 진행하며 클라이언트 아이디와 클라이언트 시크릿 모두 발급 받도록 합니다.
이때 클라이언트 시크릿을 누구에게도 노출되면 안됩니다!
(2) 로그인 구현
구글이 제공하는 SDK를 이용하여 실습하였습니다.
.png)
<body>태그 안에 구글 로그인 버튼을 추가하는 코드인<div class="g-sign2" data-onsuccess="onSignIn"></div>을 붙여넣기 합니다.
여기서 data-onsuccess="onSignIn"의 뜻은 로그인이 끝났을 때, onSignIn이라는 함수를 만들어놓으면 그것을 구글 js SDK가 호출할 것이다락 ㅗ 사용설명서에 적혀있고, 그 사용설명서에 나와있는대로 아래 ㅋㅎ두룰 복사 붙여넣기 합니다.
.png)
그렇게 하면 웹페이지에서 버튼을 클릭했을 때 아래화면과 같이 화면이 뜨게 됩니다.
.png)
그럼 여기에 구글 아이디와 비밀번호를 입력해서 로그인 하면 됩니다.
그러면 버튼의 글자가 sign in 에서 signed in 으로 바뀌게 됩니다.
이전의 코드를 다시 보면 onSignIn이란 함수를 호출되도록 약속 되어있기 때문에 콘솔로 확인을 해보면 아래와 같은 결과를 확인 할 수 있습니다.
.png)
(3) 인증 API-auth2 로드
