본문 바로가기
개발/자바스크립트

<자바스크립트 활용> Federated Indentity, 웹사이트에 페이스 북 아이디로 로그인 구현하기(1편)

by 동국대 ICT 2021. 1. 21.

누군가 나의 웹 사이트에 방문하는 상황이라고 가정합니다.

 

나의 웹 사이트에서 누가 접속을 시도하는지 파악할 필요가 있는데...!

 

(쿠키와 같은 것이 그 예시 입니다.)

 

사용자가 누군지 어떻게 구별할 수 있을까요...?? 어떠한 정보를 가지고 구별할 수 있을까요...??

 

답은  :  id, password 입니다.

(검은색 부분을 드래그하시면 답을 확인 가능합니다.)

 

네트워크

 

하지만 id나 password에는 개인정보가 들어가 있습니다.

 

저희가 어떠한 서비스를 이용하기 위해서는 회원 가입 과정을 거치는데 그 과정에서 주민등록번호, 주소, 핸드폰 번호

 

와 같이 많은 개인정보가 들어갑니다. 

 

따라서 보안적으로 문제가 있으면 안 되는 중요한 정보가 id, password라는 것입니다.

 

해킹

이럴 때 보안에 대한 지식이 많지 않으신 분들은 (저도 역시.. 보안까지는 무리가 많습니다..)

 

보안적인 고민이 엄청 많을 것입니다. 사용자 입장에서도 본인의 정보가 노출된다고 하면 웹사이트를 불신합니다.

 

간간히 웹사이트의 정보가 유출되어 실시간 검색어나 뉴스에 나오는 사건들도 보셨을 것입니다.

 

( 이러한 경우 SQL infection, Cross site scripting 공격이 들어오는 것으로 알고 있는데 이 부분은 흥미롭게 여겨져서추후에 따로 다루도록 하겠습니다. 직접 모의 해킹도 해볼 수 있도록 해볼게요!! )

 

이런 여러가지 사건에 비해 비교적 보안상 안정된 사이트들도 있습니다.

 

개발자들은 이 사이트는 왜 안정하지...? 우리 사이트랑 차이가 뭐지...? 하고 고민을 하게 되는데

 

오늘 제가 소개드릴 내용을 안정한 사이트의 보안 기술을 빌려와 우리 웹 사이트에 사용할 수 있도록 도와주는 기술에 

 

대하여 포스팅하려고 합니다.

 

그 방법은 밑에 사진을 보시면 대강 느낌이 오실 겁니다.

 

네이버, 페이스북, 카카오톡, 구글

간간히 여러가지 사이트들을 보면 네이버, 페이스북, 카카오톡, 구글 처럼 다른 사이트의 아이디와 패스워드를 통해 로그

 

인 할 수 있는 기능들이 있습니다.

 

이러한 기능들은 각 기업의 보안 영역안에 있는 정보를 이용하기 때문에 그들의 보호내에 사이트를 이용할 수 있습니다.

 

또한 개발의 노력도 줄어들게 되는 장점이 있습니다.

 

이러한 기능을 federated indentity라고 부르며, 이를 어떻게 사용할 수 있는지에 대해 포스팅 하겠습니다!!

 

● Federated Indentity

 

우선 어떻게 이 서비스가 사용 가능한지 설명 드리겠습니다.

 

웹 사이트

 

<일반적인 로그인 상황>

우리가 만든 웹 사이트를 방문할 사용자들이 있습니다.

 

그 때 사용자들은 보다 보다 최적화된 사이트를 제공받기 위해 로그인을 합니다.

 

id : 홍길동
password : gildong0823

 

이라고 입력을 합니다.

 

<federated indentity을 사용한 상황>

페이스 북 정보를 사용한다는 가정하에 몇 가지 용어들을 말씀드리겠습니다

 

사용자 개인 정보 : resource라고 합니다.
사용자 : resource owner라고 합니다. 사용자 개인 정보를 가진 주인이기 때문입니다.
페이스북 : resource sever라고 합니다. 사용자 개인 정보를 보유하는 서버입니다.
사이트 개발자 : client라고 합니다. resource server 입장에서는 고객이기 때문입니다.

 

 

사용자가 사이트에서 페이스 북 계정으로 로그인합니다.

 

id : 홍길동

password : gildong0823

 

이 로그인 정보가 페이스 북으로 전해집니다.

 

그러면 페이스 북은 우리 웹 사이트에서 페이스 북 계정으로 로그인 한 것을 알아차리고 우리의 사이트에서만 사용할

 

수 있는 고유의 access token을 client에 부여해줍니다.

 

우리는 이것을 api를 이용하여 제어, 조작이 가능한 것입니다.

 

 

페이스 북

 

 

 

다음에는 실질적으로 적용하는 방법, SDK 등에 대해 말씀드리도록 하겠습니다

댓글