SPA 소셜 로그인 : Google 및 Facebook을 통해 사용자를 인증합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

SPA 소셜 로그인 : Google 및 Facebook을 통해 사용자를 인증합니다.

Joseph Gordon-Levitt

Feb 16, 2025 am 10:14 AM

Social Login for Your SPA: Authenticate Your Users via Google and Facebook

단일 페이지 애플리케이션 아키텍처가있는 웹 애플리케이션 수는 증가하고 있습니다. 이러한 응용 프로그램은 종종 사용자 프로필 세부 정보 저장과 같은 어느 정도의 사용자 제한 상호 작용이 필요합니다. 기존의 HTML 기반 응용 프로그램 에서이 기능을 구현하는 것은 비교적 간단하지만 각 API 요청에 대한 인증이 필요한 단일 페이지 응용 프로그램에서는 훨씬 까다 롭습니다. Social Login for Your SPA: Authenticate Your Users via Google and Facebook 이 기사에서는 Passport.js 라이브러리를 사용하여 여러 공급자의 소셜 로그인을 구현하여 후속 API 호출의 토큰 기반 인증을 구현하는 기술을 보여줍니다.

이 기사의 모든 소스 코드는 GitHub 저장소에서 다운로드 할 수 있습니다.

키 포인트

Passport.js 라이브러리를 사용하여 Google 및 Facebook 용 소셜 로그인을 구현하고 단일 페이지 응용 프로그램의 사용자 인증을 향상시킵니다.

> 보안 토큰 기반 API 인증을 위해 JSON Web Tokens (JWT)를 선택하여 세션 및 쿠키 기반 제한을 피하십시오.

소셜 로그인 기능 사용 : 단순화 된 UI, 사용자 자격 증명을 저장할 필요가 없으며 크로스 사이트 비밀번호 재설정.

인증 및 토큰 생성을 관리하기 위해 Passport-Google-Oauth, Passport-Facebook 및 Passport-JWT와 같은 특정 모듈로 여권을 구성하십시오. 여권 -jwt 모듈을 사용하여 권한 부여 헤더에서 JWT를 확인하여 API 엔드 포인트를 보호하여 토큰 기반 인증을 구현합니다. 리디렉션 모드 및 클라이언트 스크립트로 사용자 경험을 단순화합니다.

왜 스파에 소셜 로그인을 사용합니까?

웹 애플리케이션에서 로그인 메커니즘을 구현할 때 많은 문제를 고려해야합니다.

UI는 어떻게 인증 자체를 처리해야합니까?

사용자 정보를 어떻게 저장해야합니까?

사용자 자격 증명을 어떻게 가장 잘 보호해야합니까?

로그인 포털을 작성하기 전에 이러한 질문과 더 많은 질문을 고려해야합니다. 그러나 더 좋은 방법이 있습니다.

주로 소셜 네트워크 (주로 소셜 네트워크)를 사용하면 플랫폼을 사용하여 자신의 앱을 확인할 수 있습니다. 이것은 다양한 API를 통해 구현됩니다 -Oauth 1.0, Oauth 2.0, OpenID, OpenID Connect 등.

이러한 소셜 로그인 기술을 사용하여 로그인 프로세스를 구현하는 데는 많은 장점이 있습니다.

귀하는 더 이상 사용자가 인증하는 데 사용하는 UI를 제시 할 책임이 없습니다.

귀하는 더 이상 민감한 사용자 세부 정보를 저장하고 보호 할 책임이 없습니다.

사용자는 단일 로그인을 사용하여 여러 사이트에 액세스 할 수 있습니다.

사용자가 암호가 유출되었다고 생각되면 암호를 한 번 재설정하고 많은 사이트의 혜택을 누릴 수 있습니다.

일반적으로 인증 기능을 제공하는 서비스는 추가 세부 정보를 제공합니다. 예를 들어, 웹 사이트를 사용한 적이없는 사용자를 자동으로 등록하거나 자신을 대신하여 프로필에 대한 업데이트를 게시 할 수 있습니다.

API에 토큰 기반 인증을 사용하는 이유는 무엇입니까?

클라이언트가 API에 액세스해야 할 때마다 자신이 누구인지, 액세스 허용 여부를 결정하는 방법이 필요합니다. 이를 달성하는 방법에는 여러 가지가 있지만 주요 옵션은 다음과 같습니다.

세션 기반 인증

쿠키 기반 인증 토큰 기반 인증

세션 기반 인증은 세션을 클라이언트와 연관 시키려면 API 서비스가 필요합니다. 일반적으로 설정하기가 매우 쉽지만 여러 서버에 API를 배포하면 문제가 발생할 수 있습니다. 귀하는 또한 세션 관리 및 만료를 위해 서버가 사용하는 메커니즘에 의해 제한되며, 이는 귀하의 제어하에 있지 않을 수 있습니다. 쿠키 기반 접근 방식은 쿠키에 일부 식별자를 저장하는 것입니다. 이는 API 요청을 자동으로 식별하는 데 사용됩니다. 즉, 먼저 쿠키를 설정하기 위해 일종의 메커니즘이 필요하며 쿠키가 동일한 호스트에 모든 (적절한) 요청에 자동으로 포함되므로 후속 요청에서 누출 될 수 있습니다. 토큰 기반 접근 방식은 쿠키 기반 인증의 변형이지만 더 많은 제어를 제공합니다. 기본적으로 쿠키 기반 인증 시스템과 같은 방식으로 토큰을 생성하지만 일반적으로 "권한 부여"헤더 또는 URL에 직접 요청에 자신을 포함시킵니다. 즉, 스토리지 토큰을 완전히 제어 할 수 있으며 요청에 포함됩니다.

참고 : HTTP 헤더를 "인증"이라고하더라도 실제로 인증을 위해이를 사용하고 있습니다. 고객이 할 수있는 일이 아니라 클라이언트가 누구인지 판단하기 위해 사용하기 때문입니다.

토큰을 생성하는 데 사용되는 전략도 중요합니다. 이 토큰은 참조 토큰 일 수 있습니다. 즉, 실제 세부 사항을 찾기 위해 서버에서 사용하는 식별자에 지나지 않습니다. 또는 완전한 토큰은 토큰에 이미 필요한 모든 정보가 포함되어 있음을 의미합니다.

참조 Tokens는 사용자 자격 증명이 클라이언트에게 유출되지 않기 때문에 상당한 보안 이점이 있습니다. 그러나 각 요청에서 토큰을 실제 자격 증명으로 구문 분석해야하므로 성과 페널티가 있습니다.

완전한 토큰이 반대입니다. 그들은 토큰을 이해하는 사람에게 사용자 자격 증명을 노출 시키지만, 토큰이 완료되었으므로 그것을 찾을 때 성능 손실이 없습니다.

일반적으로 전체 토큰은 JSON Web Tokens 표준을 사용하여 구현됩니다.이 표준은 토큰의 보안을 향상시킬 수 있으므로. 특히 JWT는 암호화 토큰을 허용하므로 토큰이 변조되지 않았 음을 보장 할 수 있습니다. 또한 암호화 될 수있는 것으로 규정되어 있습니다. 즉, 암호화 키 없이는 토큰을 디코딩 할 수 없습니다.

노드에서 JWT를 사용하여 검토하려면 튜토리얼을 확인하십시오. Node.js와 함께 JSON Web Tokens를 사용하십시오.

전체 토큰을 사용하는 또 다른 단점은 크기입니다. 예를 들어, 기준 토큰은 UUID를 사용하여 구현할 수 있는데, 이는 36 자입니다. 대신 JWT는 쉽게 수백 개의 문자 일 수 있습니다.

이 기사에서는 JWT 토큰을 사용하여 작동 방식을 보여줍니다. 그러나이 기능을 직접 구현할 때는 참조 토큰 또는 전체 토큰을 사용할지 여부와이를 위해 어떤 메커니즘을 사용할 것인지 결정해야합니다.

여권이란 무엇입니까?

여권은 웹 애플리케이션에서 인증을 위해 node.js의 모듈 세트입니다. 많은 노드 기반 웹 서버를 매우 쉽게 연결하고 모듈 식 구조를 사용하여 과도한 팽만감없이 필요한 로그인 메커니즘을 구현할 수 있습니다.

여권은 많은 인증 요구 사항을 다루는 강력한 모듈 제품군입니다. 이러한 모듈을 사용하여 다른 엔드 포인트에 대한 다른 인증 요구 사항을 허용하는 플러그 가능한 설정을 만들 수 있습니다. 사용 된 인증 시스템은 단순히 URL의 특수 값을 확인하는 것만 큼 간단하거나 모든 작업을 수행하기 위해 타사 제공 업체에 의존하는 것만 큼 복잡 할 수 있습니다.

이 기사에서는 Passport-Google-Oauth, Passport-Facebook 및 Passport-JWT 모듈을 사용하여 API 엔드 포인트에 대한 소셜 로그인 및 JWT 토큰 기반 인증을 가능하게합니다.

Passport-JWT 모듈은 일부 엔드 포인트 (실제로 액세스하기 위해 인증이 필요한 API 엔드 포인트)를 요구하는 데 사용됩니다. 유효한 JWT는 요청에 있어야합니다. Passport-Google-Oauth 및 Passport-Facebook 모듈은 각각 Google 및 Facebook에 대해 인증하는 엔드 포인트를 제공 한 다음 앱의 다른 엔드 포인트에 액세스하는 데 사용할 수있는 JWT를 생성하는 데 사용됩니다. 단일 페이지 응용 프로그램에 소셜 로그인을 활성화하십시오

여기에서 우리는 간단한 단일 페이지 앱을 얻고 소셜 로그인을 구현하는 방법을 살펴볼 것입니다. 이 응용 프로그램은 Express로 작성되며 간단한 API는 안전한 엔드 포인트와 안전하지 않은 엔드 포인트를 제공합니다. 계속하려면 https://github.com/sitepoint-editors/social-logins-spa 에서이 앱의 소스 코드를 확인할 수 있습니다. 이 응용 프로그램은 다운로드 된 소스 코드 (모든 종속성 다운로드)에서 NPM 설치를 실행 한 다음 노드 SRC/index.js를 실행하여 실행하여 구축 할 수 있습니다.

앱을 성공적으로 사용하려면 Google 및 Facebook에 소셜 로그인 자격 증명을 등록하고 앱에 자격 증명을 제공해야합니다. 전체 지침은 데모 응용 프로그램의 readme 파일에서 찾을 수 있습니다. 이러한 자격 증명은 환경 변수로 액세스됩니다. 따라서 응용 프로그램은 다음과 같이 실행할 수 있습니다

# Linux / OS X
$ export GOOGLE_CLIENTID=myGoogleClientId
$ export GOOGLE_CLIENTSECRET=myGoogleClientSecret
$ export FACEBOOK_CLIENTID=myFacebookClientId
$ export FACEBOOK_CLIENTSECRET=myFacebookClientSecret
$ node src/index.js

# Windows
> set GOOGLE_CLIENTID=myGoogleClientId
> set GOOGLE_CLIENTSECRET=myGoogleClientSecret
> set FACEBOOK_CLIENTID=myFacebookClientId
> set FACEBOOK_CLIENTSECRET=myFacebookClientSecret
> node src/index.js

이 프로세스의 최종 결과는 보안 엔드 포인트에 토큰 인증 지원 (JSON 웹 토큰 사용)을 추가 한 다음 소셜 로그인 지원 (Google 및 Facebook 사용)을 추가하여 나머지 토큰 프로비저닝 사용을 얻는 것입니다. 즉, 소셜 제공 업체를 사용하여 한 번 인증 한 다음 생성 된 JWT를 사용하여 향후 API를 앱에서 호출해야합니다.

JWT는 여전히 안전하면서 완전히 자급적이기 때문에 시나리오에 특히 좋은 선택입니다. JWT는 JSON 페이로드 및 암호화 된 서명으로 구성됩니다. 페이로드에는 인증 된 사용자의 세부 사항, 인증 시스템 및 토큰의 유효 기간이 포함되어 있습니다. 그런 다음 서명은 악의적 인 제 3자가 그것을 만들 수 없도록 보장합니다. 서명 키가있는 사람 만 토큰을 생성 할 수 있습니다.

이 기사를 읽을 때 종종 응용 프로그램의 일부로 포함 된 config.js 모듈에 대한 참조가 종종 나타납니다. 이 모듈은 응용 프로그램을 구성하는 데 사용되며 Node-Convict 모듈을 사용하여 외부로 구성됩니다. 이 기사에 사용 된 구성은 다음과 같습니다.

http.port - 응용 프로그램이 실행되는 포트. 기본값은 3000이며 "포트"환경 변수로 재정의됩니다.

<..> augentication.google.clientID - Google 인증을위한 Google 클라이언트 ID. "Google_ClientID"환경 변수를 통해 응용 프로그램에 제공됩니다.

<..> augentication.google.clientSecret - Google 인증을위한 Google 클라이언트 키. "Google_ClientSecret"환경 변수를 통해 응용 프로그램에 제공됩니다.

<..> Authentication.facebook.clientID - Facebook 인증을위한 Facebook 클라이언트 ID. "Facebook_ClientID"환경 변수를 통해 응용 프로그램에 제공됩니다.

<..> augentication.token.secret - 인증 토큰에 서명하는 JWT의 열쇠입니다. 기본값은 "MySuperseCretkey"입니다.
<..> augentication.token.audience - JWT에 저장된 잠재 고객. 이는 하나의 인증 서비스가 많은 응용 프로그램을 제공하는 경우 토큰의 대상 서비스를 나타냅니다.
통합 여권 앱에서 여권을 사용하기 전에 소량의 설정이 필요합니다. 이는 모듈을 설치하고 Express Application에서 미들웨어를 초기화하는 것 이상입니다.

여권 웹 사이트의 지침을 따르면 Passport.session ()을 사용하여 전화하여 세션 지원을 설정할 수 있습니다. 우리는 앱에서 세션 지원을 사용하지 않으므로 불필요합니다. 이는 우리가 무국적 API를 구현하기 때문에 세션에 지속되는 대신 각 요청에 대한 인증을 제공 할 것입니다.

보안 엔드 포인트를위한 JWT 토큰 인증을 구현하십시오 여권으로 JWT 토큰 인증을 설정하는 것은 비교적 간단합니다. 우리는 여권 -JWT 모듈을 사용하여 모든 무거운 리프팅을 수행 할 것입니다. 이 모듈은 "JWT"로 시작하는 값을 가진 "인증"헤더를 찾고 나머지 헤더를 인증을위한 JWT 토큰으로 취급합니다. 그런 다음 JWT를 디코딩하고 저장된 값을 자신의 작업 코드 (예 : 사용자 조회를 수행하는 것)에 제공합니다. 유효하지 않은 서명과 같이 JWT가 유효하지 않은 경우 토큰이 만료되었습니다 ... 요청은 자신의 코드를 추가로 참여시키지 않으면 서 승인되지 않습니다.

그런 다음 JWT 토큰 인증을 구성하는 메소드는 다음과 같습니다.

위의 우리는 일부 내부 모듈을 사용했습니다 :

config.js - 전체 응용 프로그램에 대한 구성 속성이 포함되어 있습니다. 이러한 특성이 구성되었으며 언제든지 값을 사용할 수 있다고 가정 할 수 있습니다.

user.js - 이것은 응용 프로그램의 사용자 저장소입니다. 이를 통해 사용자를로드 및 생성 할 수 있습니다. 여기서는 내부 ID로 사용자를로드합니다.

여기에서는 알려진 키, 게시자 및 청중으로 JWT 디코더를 구성하고, 권한 부여 헤더에서 JWT를 가져와야한다고 정책에 알립니다. 게시자 나 청중 중 하나가 JWT에 저장된 내용과 일치하지 않으면 인증이 실패합니다. 이것은 매우 간단한 보호이지만 또 다른 방지 방지 보호 층을 제공합니다.

# Linux / OS X
$ export GOOGLE_CLIENTID=myGoogleClientId
$ export GOOGLE_CLIENTSECRET=myGoogleClientSecret
$ export FACEBOOK_CLIENTID=myFacebookClientId
$ export FACEBOOK_CLIENTSECRET=myFacebookClientSecret
$ node src/index.js

토큰 디코딩은 전적으로 여권 -JWT 모듈에 의해 처리됩니다. JWT는 표준 이므로이 표준을 따르는 모든 모듈은 완벽하게 작동합니다.

토큰을 성공적으로 디코딩 한 후에는 콜백으로 페이로드로 전달됩니다. 여기서 우리는 단지 토큰에서 "주제"로 식별 된 사용자를 찾으려고 노력하고 있습니다. 실제로 토큰이 취소되지 않은지 확인하는 것과 같은 추가 점검을 수행 할 수 있습니다.

사용자가 발견되면 여권에이를 제공하고 여권은 요청 처리의 나머지 부분에 req.user로 제공합니다. 사용자가 찾을 수없는 경우, 우리는 사용자에게 여권을 제공하지 않으며 여권은 인증이 실패한 것으로 간주됩니다.

이것은 이제 요청 핸들러에 연결하여 요청이 성공하기 위해 인증이 필요합니다.

위의 3 행은 여권을 요청을 처리하는 마법입니다. 이로 인해 여권은 우리가 통과 한 요청에 대해 방금 구성한 "JWT"정책을 실행하고 즉시 계속하거나 실패 할 수 있습니다.

우리는 노드 src/index.js를 실행 하고이 리소스에 액세스하려고 시도하여 응용 프로그램을 실행하여 어떻게 작동하는지 확인할 수 있습니다.

우리는 승인 헤더를 제공하지 않았으므로 계속할 수 없습니다. 그러나 유효한 승인 헤더를 제공하면 성공적인 응답을 받게됩니다.

이 테스트를 수행하기 위해 https://www.jsonwebtoken.io를 방문하여 양식을 작성하여 JWT를 수동으로 생성했습니다. "페이로드"는 내가 사용하는 것입니다

"Signature Key"는 구성에서 가져온 "MySuperSecretkey"입니다.

지원 토큰 생성 이제 유효한 토큰으로 만 리소스에 액세스 할 수 있습니다. 실제로 토큰을 생성하는 방법이 필요합니다. 이것은 JSONWEBTOKE 모듈을 사용하여 수행되며,이 모듈은 올바른 세부 사항이있는 JWT를 구축하고 위와 동일한 키로 서명했습니다.

우리는 JWT를 생성 할 때 동일한 청중, 발행자 및 주요 구성 설정을 사용합니다. 또한 JWT의 유효 기간이 1 시간임을 지정합니다. 이것은 앱에 합리적이라고 생각하는 기간이 될 수 있으며 구성에서 추출하여 쉽게 변경할 수 있습니다.

이 경우 JWT ID는 지정되지 않지만 토큰에 대한 완전히 고유 한 ID (예 : UUID 사용)를 생성하는 데 사용할 수 있습니다. 그런 다음 토큰을 취소하고 데이터 저장소에 취소 된 ID 모음을 저장하고 여권 정책에서 JWT를 처리 할 때 JWT ID가 목록에 없는지 확인하는 방법을 제공합니다.

소셜 로그인 제공 업체

# Linux / OS X
$ export GOOGLE_CLIENTID=myGoogleClientId
$ export GOOGLE_CLIENTSECRET=myGoogleClientSecret
$ export FACEBOOK_CLIENTID=myFacebookClientId
$ export FACEBOOK_CLIENTSECRET=myFacebookClientSecret
$ node src/index.js

이제 토큰을 생성 할 수있는 기능이 있으므로 사용자가 실제로 로그인 할 수있는 방법이 필요합니다. 소셜 로그인 제공 업체가 작동하는 곳입니다. 우리는 사용자가 소셜 로그인 제공 업체로 리디렉션하고 성공시 JWT 토큰을 생성하고 향후 요청을 위해 브라우저의 JavaScript 엔진에 제공 할 수있는 기능을 추가합니다. 우리는 이미이 구성 요소를 이미 가지고 있으며, 그것들을 합치면됩니다.

여권의 소셜 로그인 제공 업체는 두 부분으로 나뉩니다. 먼저 적절한 플러그인을 사용하여 실제로 소셜 로그인 제공 업체의 여권을 구성해야합니다. 둘째, 사용자가 지시하는 Express 경로는 인증을 시작해야하며 인증이 성공한 후 사용자가 리디렉션되는 경로.

우리는 새로운 서브 브라우저 창 에서이 URL을 열어 줄 때 닫을 수 있으며 열린 창 내부의 JavaScript 메소드를 호출 할 수 있습니다. 이는 프로세스가 사용자에게 상대적으로 투명하다는 것을 의미합니다. 최대 새로운 창이 열려있는 것을보고 자격 증명을 제공하도록 요청하지만 현재 로그인된다는 사실 만 볼 수는 없습니다.

이 브라우저의 측면은 두 부분으로 구성되어야합니다. 기본 창 에서이 뷰를 처리하는 팝업 창과 JavaScript보기. 이것은 모든 프레임 워크와 쉽게 통합 될 수 있지만이 예에서는 단순성을 위해 바닐라 JavaScript를 사용합니다.

메인 페이지 JavaScript에는 다음과 같은 것이 필요합니다.

이것은 액세스 토큰을 저장 한 다음 인증을 시작하기 위해 경로를 엽니다면/API/AUTHENTICION/{PROPIDER}/start에 액세스하는 경로를 엽니 다.

그런 다음이 기능은 인증을 시작하려는 방식으로 트리거 될 수 있습니다. 이것은 일반적으로 제목 영역의 로그인 링크이지만 세부 사항은 전적으로 앱에 따라 다릅니다.

두 번째 부분은 성공적인 인증 후에 제시되는 견해입니다. 이 경우 단순성을 위해 콧수염을 사용하지만 가장 적합한 시청 기술을 사용합니다.

# Linux / OS X
$ export GOOGLE_CLIENTID=myGoogleClientId
$ export GOOGLE_CLIENTSECRET=myGoogleClientSecret
$ export FACEBOOK_CLIENTID=myFacebookClientId
$ export FACEBOOK_CLIENTSECRET=myFacebookClientSecret
$ node src/index.js

여기에는 Open 프로그램 (즉, 기본 응용 프로그램 창)에서 위의 AuthenticAteCallback 메소드를 호출하는 간단한 JavaScript 코드 만 있습니다.

이 시점에서 JWT 토큰은 원하는 목적으로 메인 응용 프로그램 창에서 사용할 수 있습니다.

Google 인증 구현 여권 -Google-Oauth 모듈을 사용하면 Google에 대해 인증됩니다. 여기에는 세 가지 정보가 필요합니다 :

클라이언트 ID

클라이언트 키 url을 리디렉션

클라이언트 ID 및 키는 Google 개발자 콘솔에 앱을 등록하여 얻습니다. 리디렉션 URL은 Google 자격 증명으로 로그인 한 후 사용자가 앱으로 다시 전송되는 URL입니다. 이는 앱의 배포 방법과 위치에 따라 다르지만 이제는 하드 코드가됩니다.

Google 인증 여권 구성이 다음과 같습니다.

성공적인 인증 후 사용자가 우리에게 다시 리디렉션되면 Google 시스템에서 ID와 일부 프로필 정보를 얻게됩니다. 우리는 먼저이 사용자가 이전에 로그인했는지 확인하려고합니다. 그렇다면 우리는 사용자 기록을 얻고 완료되었습니다. 그렇지 않은 경우 새 계정을 등록 하고이 새 계정을 사용할 것입니다. 이를 통해 첫 번째 로그인시 사용자 등록이 수행되는 투명 메커니즘을 제공합니다. 필요한 경우 다른 방식 으로이 작업을 수행 할 수 있지만 지금은 필요하지 않습니다.

다음은이 로그인을 관리하기 위해 라우팅 핸들러를 설정하는 것입니다. 이것들은 다음과 같이 보일 것입니다 :

/API/Authentication/Google/Start 및/API/Authentication/Gogle/Redirect의 경로에 유의하십시오. 위에서 언급했듯이 /start 변형은 우리가 열리는 URL이며, /리디렉션 변형은 Google이 사용자를 성공적으로 리디렉션하는 URL입니다. 그러면 위에서 보여주는 인증 된보기를 렌더링하여 생성 된 JWT를 사용하여 사용합니다.

Facebook 인증 구현

이제 우리는 첫 번째 소셜 로그인 제공 업체를 확보 했으므로 두 번째 로그인 제공 업체를 확장하고 추가합시다. 이번에는 Passport-Facebook 모듈을 사용하여 Facebook이 될 것입니다.

이 모듈은 Google 모듈과 거의 같은 방식으로 작동하므로 동일한 구성과 동일한 설정이 필요합니다. 유일한 차이점은 다른 모듈이며 접근하는 URL 구조가 다르다는 것입니다.

Facebook 인증을 구성하려면 클라이언트 ID, 클라이언트 키 및 URL 리디렉션이 필요합니다. Facebook 개발자 콘솔에서 Facebook 앱을 만들어 클라이언트 ID 및 클라이언트 키 (Facebook에서 App ID 및 App Key라고 함)를 얻을 수 있습니다. Facebook 로그인 제품이 앱에 추가되어 작동하도록해야합니다.

우리의 Facebook Authentication Passport 구성은 다음과 같습니다

이것은 "Google"대신 "Facebook"이 사용된다는 점을 제외하고는 Google의 구성과 거의 동일합니다. URL 라우팅도 비슷합니다

여기서는 기본 세트가 충분하기 때문에 사용하려는 범위를 지정할 필요가 없습니다. 그렇지 않으면 Google과 Facebook 간의 구성은 거의 동일합니다.

# Windows
> set GOOGLE_CLIENTID=myGoogleClientId
> set GOOGLE_CLIENTSECRET=myGoogleClientSecret
> set FACEBOOK_CLIENTID=myFacebookClientId
> set FACEBOOK_CLIENTSECRET=myFacebookClientSecret
> node src/index.js

요약

소셜 로그인 제공 업체를 사용하여 사용자 로그인 및 등록을 앱에 빠르고 쉽게 추가하십시오. 실제로, 이것은 브라우저 리디렉션을 사용하여 사용자를 소셜 로그인 제공 업체로 보내고 앱으로 다시 보냅니다. 따라서 기존 앱이 비교적 쉽게 통합되어 있어도 단일 페이지 앱에 통합 할 수 있습니다.

이 기사는 이러한 소셜 로그인 제공 업체를 단일 페이지 애플리케이션에 통합하는 방법을 보여줍니다. Passport에는 다른 제공 업체와 함께 작동 할 수있는 많은 모듈이 있으며, 올바른 모듈을 찾고 위에서 Google 및 Facebook에서 수행 한 것처럼 구성하는 문제 일뿐입니다.

이 기사는 제임스 콜스 (James Kolce)가 동료 검토했습니다. itepoint 컨텐츠를 최고로 가져간 모든 Sitepoint Peer Reviewer에게 감사합니다. 소셜 로그인 통합 (FAQS)에 대한 FAQS

소셜 로그인을 내 웹 애플리케이션에 통합하면 어떤 이점이 있습니까? 웹 응용 프로그램에 소셜 로그인을 통합하면 몇 가지 이점이 생길 수 있습니다. 먼저 다른 사용자 이름과 비밀번호를 기억하지 않고 기존 소셜 미디어 계정에 등록 할 수 있기 때문에 사용자의 등록 프로세스를 단순화합니다. 둘째, 단순화 된 등록 프로세스가 더 많은 사용자가 가입하도록 장려 할 수 있으므로 전환율을 향상시킬 수 있습니다. 마지막으로, 웹 사이트에서 경험을 개인화하는 데 사용할 수있는 소셜 미디어 프로필의 사용자 데이터에 액세스 할 수 있습니다. 소셜 로그인을 사용할 때 사용자 데이터의 보안을 보장하는 방법은 무엇입니까?

소셜 로그인을 통합 할 때 사용자 데이터의 보안을 보장하는 것이 중요합니다. OAUTH 2.0과 같은 보안 프로토콜을 사용하여 인증하여 사용자 비밀번호가 앱과 공유되지 않도록합니다. 또한 애플리케이션에 필요한 최소의 사용자 데이터 만 요청 하고이 데이터가 안전하게 저장되어 있는지 확인해야합니다.

내 웹 애플리케이션에서 여러 소셜 로그인을 통합 할 수 있습니까? 예, 웹 애플리케이션에서 여러 소셜 로그인을 통합 할 수 있습니다. 이를 통해 사용자에게 더 많은 선택을 제공하고 등록 가능성을 높일 수 있습니다. 그러나 사용자가 사용하기로 선택한 소셜 로그인에 관계없이 사용자 경험이 원활하게 유지되는 것이 중요합니다. 여러 소셜 미디어 계정을 사용자와 처리하는 방법은 무엇입니까?

여러 소셜 미디어 계정으로 사용자를 처리하는 것은 어려울 수 있습니다. 한 가지 해결책은 사용자가 여러 소셜 미디어 계정을 앱의 단일 계정에 연결할 수 있도록하는 것입니다. 이렇게하면 링크 된 계정으로 로그인 할 수있는 옵션이 있습니다.