여기에는 많은 질문이 있으며 Node 및 passport.js의 맥락에서 질문이 있지만 실제 질문은 특정 기술로이를 수행하는 방법보다 워크 플로에 관한 것 같습니다.
보안 강화를 위해 약간 수정 된 @Keith 예제 설정을 사용해 보겠습니다.
- 의 웹 서버
https://example.com는 단일 페이지 Javascript 클라이언트 앱을 제공합니다.
- 의 RESTful 웹 서비스는
https://example.com/api리치 클라이언트 앱에 서버 지원을 제공합니다.
- Node 및 passport.js에서 구현 된 서버.
- 서버에는 "users"테이블이있는 데이터베이스 (모든 종류)가 있습니다.
- 사용자 이름 / 암호 및 Facebook Connect가 인증 옵션으로 제공됩니다.
- 리치 클라이언트는 REST 요청을
https://example.com/api
- 에서 웹 서비스를 사용
https://example.com/api하지만 웹 서버에 대해 알지 못하는 다른 클라이언트 (예 : 전화 앱)가있을 수 있습니다 https://example.com.
보안 HTTP를 사용하고 있습니다. 이것은 암호 및 인증 토큰과 같은 민감한 정보가 클라이언트와 서버간에 전달되기 때문에 공개적으로 사용할 수있는 모든 서비스에 필수라고 생각합니다.
사용자 이름 / 비밀번호 인증
먼저 일반 이전 인증이 어떻게 작동하는지 살펴 보겠습니다.
- 사용자가 연결
https://example.com
- 서버는 초기 페이지를 렌더링하는 풍부한 Javascript 애플리케이션을 제공합니다. 페이지에 로그인 양식이 있습니다.
- 이 단일 페이지 앱의 많은 섹션은 사용자가 로그인하지 않았기 때문에 데이터로 채워지지 않았습니다. 이러한 모든 섹션에는 "로그인"이벤트에 대한 이벤트 리스너가 있습니다. 이 모든 것은 클라이언트 측 항목이며 서버는 이러한 이벤트를 알지 못합니다.
- 사용자가 자신의 로그인과 비밀번호를 입력하고 제출 버튼을 누르면 자바 스크립트 핸들러가 클라이언트 측 변수에 사용자 이름과 비밀번호를 기록합니다. 그런 다음이 핸들러는 "로그인"이벤트를 트리거합니다. 다시 말하지만, 이것은 모두 클라이언트 측 작업이며 자격 증명은 아직 서버로 전송되지 않았습니다 .
- "login"이벤트의 리스너가 호출됩니다. 이제 이들 각각은
https://example.com/api페이지에서 렌더링 할 사용자 특정 데이터를 얻기 위해 하나 이상의 요청을 RESTful API로 보내야 합니다. RESTful 서비스는 한 요청에서 다음 요청까지 클라이언트 상태를 유지할 수 없기 때문에 웹 서비스에 보내는 모든 단일 요청에는 HTTP 기본 인증 의 형태로 사용자 이름과 비밀번호가 포함됩니다 . 웹 서비스가 보안 HTTP에 있기 때문에 암호는 전송 중에 안전하게 암호화됩니다.
- 의 웹 서비스는
https://example.com/api각각 인증 정보가 포함 된 개별 요청 을 수신합니다. 각 요청의 사용자 이름과 비밀번호는 사용자 데이터베이스에 대해 확인되며 올바른 경우 요청 된 함수가 실행되고 데이터가 JSON 형식으로 클라이언트에 반환됩니다. 사용자 이름과 암호가 일치하지 않으면 401 HTTP 오류 코드 형식으로 클라이언트에 오류가 전송됩니다.
- 클라이언트가 모든 요청에 사용자 이름과 비밀번호를 보내도록하는 대신 사용자 이름과 비밀번호를 가져와 토큰으로 응답하는 "get_access_token"기능을 RESTful 서비스에 사용할 수 있습니다. 토큰은 고유하고 일부 만료가있는 일종의 암호화 해시입니다. 관련된 날짜. 이러한 토큰은 각 사용자와 함께 데이터베이스에 저장됩니다. 그런 다음 클라이언트는 후속 요청에서 액세스 토큰을 보냅니다. 그러면 사용자 이름과 암호 대신 데이터베이스에 대해 액세스 토큰의 유효성이 검사됩니다.
- 전화 앱과 같은 비 브라우저 클라이언트 응용 프로그램은 위와 동일하게 사용자에게 자격 증명을 입력하도록 요청한 다음 웹 서비스에 대한 모든 요청과 함께 자격 증명 (또는 생성 된 액세스 토큰)을 보냅니다.
이 예제에서 중요한 점은 RESTful 웹 서비스가 모든 요청에 대해 인증을 요구 한다는 것 입니다.
이 시나리오에서 추가 보안 계층은 사용자 인증 외에 클라이언트 애플리케이션 권한을 추가합니다. 예를 들어 웹 서비스를 사용하는 웹 클라이언트, iOS 및 Android 앱이 모두있는 경우 인증 된 사용자가 누구인지에 관계없이 서버가 주어진 요청의 세 클라이언트 중 어느 것이인지 알 수 있도록 할 수 있습니다. 이를 통해 웹 서비스가 특정 기능을 특정 클라이언트로 제한 할 수 있습니다. 이를 위해 API 키와 비밀을 사용할 수 있습니다. 이에 대한 몇 가지 아이디어는 이 답변 을 참조하십시오 .
Facebook 인증
Facebook을 통한 로그인에는 제 3자인 Facebook 자체가 있기 때문에 위의 워크 플로는 Facebook 연결에서 작동하지 않습니다. 로그인 절차를 수행하려면 사용자가 당사의 통제를 벗어난 자격 증명을 입력하는 Facebook 웹 사이트로 리디렉션되어야합니다.
그럼 상황이 어떻게 변하는 지 봅시다 :.
- 사용자가 연결
https://example.com
- 서버는 초기 페이지를 렌더링하는 풍부한 Javascript 애플리케이션을 제공합니다. 페이지에는 "페이스 북으로 로그인"버튼이 포함 된 로그인 양식이 있습니다.
- 사용자가 (예 :)로 리디렉션되는 링크 인 "Facebook으로 로그인"버튼을 클릭합니다
https://example.com/auth/facebook.
https://example.com/auth/facebook경로가 passport.js에 의해 처리합니다 (참조 문서 )- 사용자가 볼 수있는 것은 페이지가 변경되고 이제 웹 애플리케이션에 로그인하고 권한을 부여해야하는 Facebook 호스팅 페이지에 있다는 것입니다. 이것은 완전히 우리가 통제 할 수없는 것입니다.
- 페이스 북은 지금 우리가있는 다음 예제에서는 passport.js 설치, 구성하는 콜백 URL로 다시 리디렉션 있도록 페이스 북의 사용자가 로그인하고, 우리의 응용 프로그램에 권한을 부여 문서 것이 있다
https://example.com/auth/facebook/callback
https://example.com/auth/facebook/callback경로에 대한 passport.js 핸들러 는 사용자의 이메일 주소를 포함하여 Facebook 액세스 토큰과 Facebook에서 일부 사용자 정보를 수신하는 콜백 함수를 호출합니다.- 이메일을 사용하여 데이터베이스에서 사용자를 찾고 Facebook 액세스 토큰을 저장할 수 있습니다.
- Facebook 콜백에서 마지막으로 수행하는 작업은 리치 클라이언트 애플리케이션으로 다시 리디렉션하는 것이지만 이번에는 클라이언트가 사용할 수 있도록 사용자 이름과 액세스 토큰을 클라이언트에 전달해야합니다. 이것은 여러 가지 방법으로 수행 할 수 있습니다. 예를 들어 Javascript 변수는 서버 측 템플릿 엔진을 통해 페이지에 추가 될 수 있으며 그렇지 않으면이 정보와 함께 쿠키가 반환 될 수 있습니다. (처음에 제안했듯이 URL에이 데이터를 전달할 때 보안 문제를 지적한 @RyanKimber에게 감사드립니다).
- 이제 단일 페이지 앱을 한 번 더 시작하지만 클라이언트에는 사용자 이름과 액세스 토큰이 있습니다.
- 클라이언트 응용 프로그램은 "로그인"이벤트를 즉시 트리거하고 응용 프로그램의 다른 부분이 웹 서비스에서 필요한 정보를 요청하도록 할 수 있습니다.
- 로 전송되는 모든 요청
https://example.com/api에는 인증을위한 Facebook 액세스 토큰 또는 REST API의 "get_access_token"함수를 통해 Facebook의 토큰에서 생성 된 애플리케이션 자체 액세스 토큰이 포함됩니다.
- OAuth는 로그인을 위해 웹 브라우저가 필요하기 때문에 브라우저가 아닌 앱은 여기에서 조금 더 어렵습니다. 전화 또는 데스크톱 앱에서 로그인하려면 브라우저를 시작하여 Facebook으로 리디렉션해야합니다. 브라우저가 일부 메커니즘을 통해 Facebook 액세스 토큰을 애플리케이션에 다시 전달하는 방법이 필요합니다.
나는 이것이 대부분의 질문에 답하기를 바랍니다. 물론 Facebook을 Twitter, Google 또는 기타 OAuth 기반 인증 서비스로 대체 할 수 있습니다.
나는 누군가가 이것을 다루는 더 간단한 방법을 가지고 있는지 알고 싶습니다.
passport-facebook. 작동이 끝나면 다음 단계는 Passport의 작동 방식과 자격 증명을 저장하는 방식을 이해하는 것입니다. Restify에 접선 ( 여기에서 보는 마지막 단계 중 하나가 될 것입니다 당신이 언급 한의 업데이트 된 버전) (또는 익스프레스에서 REST 인터페이스를 구현할 수 있습니다).