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

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

by 동국대 ICT 2021. 1. 22.

지난 포스팅에서 우리가 만든 웹 사이트의 개인 정보에 대해 말했습니다.

 

이는 개인 정보 특성상 악용이 가능하기에 보안상 중요한 위치에 있다고 생각됩니다.

 

그리고 이를 보안적으로 보완하고 개발의 부담을 덜기 위해 페이스 북 로그인 기능이 필요하다고 생각됩니다.

 

보다 자세한 내용과 작동원리는 이전 포스팅 참고하시면 이해에 도움 될 것 같습니다!

 

이전에 사용했던 용어를 계속 이어서 사용할 것이기 때문에 완전히 이해하고 싶으신 분들은 꼭 보셨으면 좋겠습니다!

 

donggukice.tistory.com/13

 

 

● 페이스 북 앱 등록

우선 오늘 글 읽기전에 알아두어야 하는 단어 정리해봅니다!!

 

 

API : application programming interface

운영체제와 응용프로그램 사이의 통신에 사용되는 언어나 메시지 형식을 말한다.

페이스 북이 우리가 페이스 북의 기능을 사용하고

제어하는 것을 도와주기 위해

개발한 프로그램.

심지어 사용하기도 쉽게 만들어 놓음.

 

SDK : software development kit

소프트웨어 개발 키트.

우리가 페이스 북 기능을 사용하기 위해

가까이 감.

 

쉽게 말하면 페이스 북을 사용하기 위해

페이스 북이 우리에게 다가가는 것 API

우리가 페이스 북에 다가가는 것 SDK

<페이스 북이 왜...?>

 

reosurce server( 페이스 북 ) 입장에서 생각해 봅시다.

 

페이스 북은 이 서비스(API와 SDK (이 용어를 모르시면 하단 부분에 설명해놓겠습니다.))를 제공합ㄴ디ㅏ.

 

무료로 우리에게 보안적인 측면과 개발적인 측면으로 이득을 줍니다.

 

하지만 페이스 북에는 이득적인 측면이 크지 않습니다.

 

그러면 어떻게 우리를 믿고 서비스를 제공하는 것일까요??

 

비유를 하자면,

 

A : resource server(페이스 북)        B : cilent(우리)

A는 B가 축구공이 없는 탓에 축구를 못 해서 힘들어 하는 모습을 무료로 돕기로 합니다.

B는 당연히 축구를 하고 싶어했기에 감사히 쓸 것 입니다.

하지만, A의 입장에서는 이득 보는 것이 없습니다.

그 상황에서 A는 B가 '축구공을 더렵혀오면 어쩌지' 라는 생각을 하게 됩니다.

특히나 무료로 제공해주는 거니까요.

그래서는 A는 B에게 약속을 하게 됩니다.

 

다시 우리의 상황으로 돌아와서 페이스 북도 우리가 걱정이 될 것입니다.

 

따라서 페이스 북도 우리와 약속을 하고 싶어하죠.

 

그 약속이 무엇이냐면 페이스 북 개발자 홈페이지에 가입하고 페이스 북에서 필요로 하는 정보를 주어야 합니다.

 

우선 오늘은 이 과정에 대하여 설명드리도록 하겠습니다.

 

< 페이스 북과 약속하기 >

 

developers.facebook.com/

 

Facebook for Developers

Facebook for Developers와 사용자를 연결할 수 있는 코드 인공 지능, 비즈니스 도구, 게임, 오픈 소스, 게시, 소셜 하드웨어, 소셜 통합, 가상 현실 등 다양한 주제를 둘러보세요. Facebook의 글로벌 개발

developers.facebook.com

 

에 접속해줍니다. 그리고 페이스 북이 있다면 간단하게 인증 메일 받는 것만으로 가입이 가능하니

 

Facebook for developers에 가입해줍니다!

 

그러면 다음과 같은 화면이 나옵니다.

 

페이스북 developers

 

 

가운데 가장 큰 화면에 앱 만들기를 클릭해줍니다.

 

 

페이스 북 developers

 

간단한 정보를 입력해줍니다.

 

표시할 앱 이름은 딱히 별도의 양식 없이 작성이 가능합니다.

 

페이스 북 보안

 

그리고 간단한 인공 지능과의 대결을 해줍니다.

 

그 다음에는 여러 API 들을 고를 수 있는 창이 나옵니다.

 

우리는 페이스 북 로그인을 사용할 것이기 때문에 

 

페이스 북 로그인

페이스 북 로그인을 선택해줍니다.

 

페이스 북 로그인

 

그 후, 어디에 사용할 지 선택하는 구간이 옵니다.

 

저는 웹 사이트 기준으로 설명할 것이고 웹 사이트에 적용할 것 이기에 WWW를 선택해줍니다.

 

여기까지가 우리가 페이스북 로그인을 사용하기 위해 준비해야 하는 것들입니다.

 

다음에는 로그인, 로그아웃을 구현해보도록 하겠습니다.

댓글