Category Archives: MEAN

[MEAN] Node.js Passport로 구글, 페이스북, 트위터 로그인 구현하기 (1)

 

Node.js 환경에서 Passport를 사용하면 로그인을 정말 쉽게 구현할 수 있다.

일반적으로 사이트에 회원가입하여 Local-DB에 정보를 저장하는 로그인 뿐만아니라

Facebook, Twitter, Google 계정을 이용한 로그인도 아주 쉽게 구현할 수 있다.

이처럼 SNS계정을 이용한 로그인을 구현해보도록 하자.

 

작업환경은 기본적인 MEAN Stack이고, Cloud9에서 작업을 했다.

 

일단 기본적으로 로그인 앱을 만들 권한을 각각 SNS별로 따야 할 것이다

  1.  페이스북
    developers.facebook.com/ 로 접속하여 로그인하자.
    오른쪽 상단에서 Add a new app을 눌러 새로운 앱을 만들도록 하자.
    fb1
    당연한 얘기지만, 웹사이트를 누른다.fb2적당히 App 이름을 입력하고 생성한다.fb3

    적당히 카테고리를 선택하고 앱ID를 만들어보자.

    fb4

    내 웹사이트 주소를 적는다.
    이제 끝났다. 다시 developers 메인화면으로 진입해서, 오른쪽 상단에 my apps를 클릭하면 내가 생성한 App이 보일 것이다.
    그 App으로 들어가보자.

    fb5

    다음과 같이 내 앱에 정보가 있을 것이다.

    시간이 되면 찬찬히 다른 Setting 정보도 살펴보도록 하자. 일단 기본 설정만으로도 Passport Oauth로그인 구현이 충분하다.

    우리가 주목해야 할 것은 저 App ID와 App Secert이다. 나중에 쓸 정보니까 복사해 놓자.

  2.  Twitter요즘 트위터를 그렇게 하는 사람이 있나 모르겠다.apps.twitter.com/ 에 접속하여 역시 새로운 앱을 만들어 보도록 하자.fb6적당히 입력하면 된다. Callback 주소형식은 따로 정해진 건 없지만 address/oauth/SNS_NAME/callback 으로 통일 할 것이다.

    이제 앱이 완성됐다.

    fb7

    우리가 주목해서 봐야할 건 바로 저 Consumer Key 와 Consumer Secret 이다. 적당히 복사해 놓도록 하자.

  3. Google개인적으로 Google 로그인 좋아한다. 이유는 특별히 없다.console.developers.google.com 로 접속하자. 상단 오른쪽에 새 프로젝트를 생성하는 게 있을 것이다. 적당히 이름을 입력하자.

    gg1

    gg2

    짠. 이런 메인화면이 보인다. 왠지 써보고 싶은 것들이 많다. Google API사용으로 들어가자.

    Google 로그인을 구현하기 위해서는 Google+API 가 활성화 되어 있어야한다.

    gg3

    저걸 누르자.

    gg4

    사용자 인증 정보가 더 필요하다고 한다.

    gg5

    이런거 할 겁니다.

    gg6
    자바스크립트가 있는 주소, 즉 홈페이지 주소랑.. 이름을 적당히 입력한다.

    gg7

    제품이름도 입력하면 완성이다. 왼쪽 사용자 인증정보에서 방금 만들었던 인증정보 관리화면으로 들어가보자.

    gg8

    마찬가지로 ClientID 와 보안비밀을 잘 적당히 복사해두자.

 

이로써 기본적으로 각각의 SNS에서 oauth인증을 위한 app을 만들어 보았다.

이제 소스코드레벨로 들어가서 로그인을 구현해보도록 하자.

 

[Mean Web Development in C9] 기본 환경설정

MEAN Stack을 요즘 공부하고 있는데, C9 환경에서 한 번 실습을 해보고자 한다.

MEAN WEB DEVELOPMENT 를 교재로 활용하고 있으며,  C9은 이것이다.

간지가이라면 클라우드 환경에서 웹개발을 해야 할 것이다.

 

C9-1-1

 

내가 선택한 옵션은 이렇다. 간지가이라면 역시 빈 깡통에서 하나씩 설치해서 개발해야 할 것이다.

웤스페이스를 만들어서 열어보면

C9-1-2

 

이런 IDE가 뜰 것이다.

처음봤을 때 소오름을 아직도 잊지 못한다. 역시 짱이다. 이런걸 해야 성공할텐데 흑흑

설치에 앞서, 기본적으로 (앞서봤겠지만) Ubuntu 환경을 제공하고 있다.

좌측에는 디렉토리가 나와있으며, 하단에는 Shell, 상단에는 편집기가 나와있지만, 어디까지나 기본세팅일 뿐, 사용자가 편집할 수 있다.

 

<MongoDB>

 

암튼 MongoDB를 깔아보자. Ubuntu환경에서 몽고디비를 설치하는 방법은 여기 를 적극적으로 참고하였다.

 

1. Mongo DB의 Public Key를 Import 하자

C9-1-3

 

2. Ubuntu 설치에 필요한 파일을 만들어야하는데, 그 전에 Ubuntu 버전을 알아야 한다.
more /etc/lsb-release
명령어를 때리면 Ubuntu 버전을 쉘에서 확인할 수 있다.
현재 기준 14.4 안정화 버전이다.
그리고 시키는대로 파일을 만들자
C9-1-4

3.sudo apt-get update 명령어로 패키지를 업데이트 해준 다음에, 본격적으로
sudo apt-get install -y mongodb-org
명령어로 Mongodb를 깔아 보도록 하자.
C9-1-5

4. Mongodb를 실행해보도록 하자. path를 지정하기 귀찮아서.. 그냥 직접 폴더로 들어가서 실행했다.

C9-1-6

5. 몽고디비가 설치되었다.

C9-1-7

<Node.js>

1. Node.js 5.x 버전을
curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -
명령어로 가져오자.

C9-1-8

 

2.  sudo apt-get install -y nodejs 명령어로 설치하면 끝.

C9-1-9

 

이렇게 해서 Node와 MongoDB를 설치했다.

이제 이 환경을 바탕으로 Npm, ExpressJS, Angular등을 세팅할 수 있을 것이다.