facebook 및 Twitter을 사용하여 소셜 로그인 social-login-with-facebook-and-twitter

CAUTION
AEM 6.4가 확장 지원이 종료되었으며 이 설명서는 더 이상 업데이트되지 않습니다. 자세한 내용은 기술 지원 기간. 지원되는 버전 찾기 여기.

소셜 로그인은 사이트 방문자에게 Facebook 또는 Twitter 계정으로 로그인하는 옵션을 제공하는 기능입니다. 따라서 AEM 구성원 프로필에 허용된 Facebook 또는 Twitter 데이터를 포함합니다.

socialloginweretail

소셜 로그인 개요 social-login-overview

소셜 로그인을 포함하려면 필수 로 사용자 지정 Facebook 및 Twitter 애플리케이션을 만듭니다.

we-retail 샘플은 샘플 Facebook 및 Twitter 앱 및 클라우드 서비스를 제공하지만, 프로덕션 웹 사이트.

필요한 단계는 다음과 같습니다.

  1. OAuth 인증 활성화 모든 AEM 게시 인스턴스에서 게시 가능합니다.

    OAuth가 활성화되지 않은 상태에서 로그인 시도가 실패합니다.

  2. 만들기 소셜 앱 및 클라우드 서비스.

  3. 활성화 소셜 로그인 커뮤니티 사이트용.

다음과 같은 두 가지 기본 개념이 있습니다.

  1. 범위 (권한) 앱이 요청할 수 있는 데이터를 지정합니다.

  2. 필드 (params) URL 매개 변수를 사용하여 요청한 실제 데이터를 지정합니다.

Facebook 로그인 facebook-login

Facebook API 버전 facebook-api-version

facebook Graph API 버전이 1.0일 때 소셜 로그인 및 we-retail Facebook 샘플이 개발되었습니다.
AEM 6.4 GA 및 AEM 6.3 SP1 소셜 로그인이 최신 Facebook Graph API 2.5 버전에서 작동하도록 업데이트되었습니다.

NOTE
이전 AEM 버전의 경우, 로그에서 예외가 발생한 경우 토큰에서 토큰을 추출할 수 없습니다., 해당 AEM 릴리스에 대한 최신 CFP로 업그레이드하십시오.

facebook Graph API 버전 정보는 Facebook API 변경 로그.

facebook 앱 만들기 create-a-facebook-app

facebook Social 로그인을 사용하려면 적절하게 구성된 Facebook 애플리케이션이 필요합니다.

facebook 애플리케이션을 만들려면 다음 위치에서 Facebook의 지침을 따르십시오. https://developers.facebook.com/apps/. 지침에 대한 변경 내용은 다음 정보에 반영되지 않습니다.

일반적으로 Facebook API v2.7의 경우:

  • 새 Facebook 앱 추가:

    • 대상 플랫폼, 웹 사이트 선택
      • 대상 사이트 URL, 입력 https://<server>:<port>.
    • 대상 표시 이름 ​를 클릭하고 Facebook connect 서비스의 제목 을 사용할 제목을 입력합니다.
    • 대상 카테고리, 선택 권장 페이지용 앱, 하지만 뭐든 될 수 있어
    • 제품 추가: Facebook 로그인
      • 대상 유효한 OAuth 리디렉션 URI, 입력 https://<server>:<port>.
NOTE
개발을 위해 http://localhost:4503 이 작동합니다.

응용 프로그램이 만들어지면 앱 ID앱 암호 설정. 이 정보는 Facebook 클라우드 서비스.

facebook Connect Cloud Service 만들기 create-a-facebook-connect-cloud-service

다음 Granite OAuth 애플리케이션 및 공급자 Adobe 클라우드 서비스 구성을 만들어 인스턴스화한 인스턴스에서, Facebook 애플리케이션 및 새 사용자가 추가되는 구성원 그룹을 식별합니다.

  1. AEM 작성자 인스턴스에서 관리자 권한으로 로그인합니다.

  2. 전역 탐색에서 를 선택합니다 도구 > Cloud Services > Facebook Social 로그인 구성.

  3. 구성을 선택합니다 컨텍스트 경로.

    컨텍스트 경로 커뮤니티 사이트를 생성/편집하는 동안 선택한 클라우드 구성 경로와 같아야 합니다.

  4. 컨텍스트 경로가 활성화 되어 있는지 확인하여 그 아래에 클라우드 서비스를 만듭니다.

  5. 이동 도구 > 일반 > 구성 브라우저. 컨텍스트를 선택하고 속성을 편집합니다. 아직 활성화되지 않은 경우 클라우드 구성을 활성화합니다.

    config-property

  6. facebook 클라우드 서비스 구성 만들기/편집.

    fbsocialloginconfigpng

    • 제목 (필수 여부) Facebook 앱을 식별하는 표시 제목을 입력합니다. 입력한 이름과 동일한 이름을 사용하는 것이 좋습니다 표시 이름 facebook 앱용.
    • 앱 ID/API 키 (필수 여부) 을 입력합니다. 앱 ID facebook 앱용. 이것은 Granite OAuth 애플리케이션 및 공급자 Adobe 대화 상자에서 만든 인스턴스입니다.
    • 앱 암호 (필수 여부) 을 입력합니다. 앱 암호 facebook 앱용.
    • 사용자 만들기 이 확인란을 선택하면 Facebook 계정으로 로그인하면 AEM 사용자 항목이 만들어지고 선택한 사용자 그룹에 구성원으로 추가됩니다. 기본값이 선택되어 있습니다(적극 권장).
    • 마스크 사용자 ID: 선택을 취소합니다.
    • 범위 전자 메일: 사용자의 이메일 id를 Facebook에서 가져와야 합니다.
    • 사용자 그룹에 추가 사용자 그룹 추가를 선택하여 하나 이상을 선택합니다. 구성원 그룹 사용자를 추가할 커뮤니티 사이트용.
    note note
    NOTE
    그룹은 언제든지 추가하거나 제거할 수 있습니다. 그러나 기존 사용자의 멤버십은 영향을 받지 않습니다. 자동 멤버십은 이 필드 업데이트 이후 새로 만들어지는 사용자에게만 적용됩니다. 익명의 사용자가 비활성화된 사이트의 경우, 폐쇄된 커뮤니티 사이트에 대한 해당 커뮤니티 구성원 그룹에 사용자를 추가하도록 선택합니다.
    • 선택 저장.
    • 게시.

결과는 Granite OAuth 애플리케이션 및 공급자 Adobe 추가 범위(권한)를 추가하지 않은 경우 추가로 수정할 필요가 없는 인스턴스. 기본 범위는 Facebook 로그인에 대한 표준 권한입니다. 추가 범위가 필요한 경우 OSGI 구성을 직접 편집해야 합니다. 시스템/콘솔을 통해 직접 수정한 경우 덮어쓰기를 방지하기 위해 touch UI에서 클라우드 서비스 구성을 편집하지 마십시오.

AEM Communities Facebook OAuth 공급자 aem-communities-facebook-oauth-provider

AEM Communities 제공업체는 Granite OAuth 애플리케이션 및 공급자 Adobe 인스턴스.

이 공급자를 편집하려면 다음을 편집해야 합니다.

  • 사용자 업데이트 허용

  • 추가 필드 추가 범위 내

    • 기본적으로 허용되는 모든 필드는 기본적으로 포함되지 않습니다.

편집해야 하는 경우 각 AEM 게시 인스턴스에서 다음을 수행합니다.

  1. 관리자 권한으로 로그인합니다.

  2. 로 이동합니다 웹 콘솔. 예: http://localhost:4503/system/console/configMgr

  3. AEM Communities Facebook OAuth 공급자를 찾습니다.

  4. 편집할 연필 아이콘을 선택합니다.

    fboauthprov_png

    • OAuth 공급자 ID

      (필수 여부) 기본값은 입니다 soco-facebook. 편집하지 마십시오.

    • Cloud Service 구성

      기본값은 입니다. /etc/cloudservices/facebookconnect. 편집하지 마십시오.

    • OAuth 공급자 서비스 구성

      기본값은 입니다. /apps/social/facebook/provider/config/. 편집하지 마십시오.

    • 태그 활성화

      편집하지 마십시오.

    • 사용자 경로

      사용자 데이터가 저장되는 저장소의 위치입니다. 커뮤니티 사이트의 경우 구성원이 서로의 프로필을 볼 수 있는 권한을 보장하려면 경로가 기본값이어야 합니다 /home/users/community.

    • 필드 활성화

      이 확인란을 선택하면 나열된 필드가 Facebook에 대한 사용자 인증 및 정보 요청에 지정됩니다. 기본값은 선택 취소되어 있습니다.

    • 필드

      필드가 활성화되어 있으면 Facebook Graph API를 호출할 때 다음 필드가 포함됩니다. 클라우드 서비스 구성에 정의된 범위 내에서 필드를 허용해야 합니다. 추가 필드를 사용하려면 Facebook의 승인이 필요할 수 있습니다. facebook 설명서의 Facebook 로그인 권한 섹션을 참조하십시오. 매개 변수로 추가된 기본 필드는 다음과 같습니다.

      • id
      • 이름
      • first_name
      • last_name
      • 링크
      • 로케일
      • 사진
      • 시간대
      • updatetime
      • 확인됨
      • 이메일

    필드가 추가되거나 변경된 경우 해당 기본 동기화 처리기 구성을 업데이트하여 매핑을 수정합니다.

    • 사용자 업데이트
      선택하면, 매번 로그인 시 저장소에서 사용자 데이터를 새로 고쳐 프로필 변경 또는 요청한 추가 데이터를 반영합니다. 기본값은 선택 취소되어 있습니다.

다음 단계 next-steps

다음 단계는 Facebook과 Twitter 모두에 대해 동일합니다.

Twitter 로그인 twitter-login

twitter 앱 만들기 create-a-twitter-app

twitter 소셜 로그인을 활성화하려면 구성된 Twitter 응용 프로그램이 필요합니다.

최신 지침에 따라 에서 새 Twitter 애플리케이션을 만듭니다. https://apps.twitter.com.

일반적으로

  1. 을(를) 입력합니다. 이름 은 웹 사이트 사용자에게 Twitter 애플리케이션을 식별합니다.

  2. 을(를) 입력합니다. 설명.

  3. 대상 웹 사이트 - https:// 입력<server>/.

  4. 대상 콜백 URL - https:// 입력<server>/.

    note note
    NOTE
    포트를 지정할 필요는 없습니다.
    개발을 위해 https://127.0.0.1/ 이 작동합니다.
  5. 응용 프로그램이 만들어지면 소비자(API) 키소비자(API) 비밀. 이 정보는 Twitter 클라우드 서비스.

권한 permissions

twitter 애플리케이션 관리의 권한 섹션에서 다음을 수행합니다.

  • 액세스: 선택 Read only.

    • 다른 옵션은 지원되지 않습니다
  • 추가 권한: 선택 가능 Request email addresses from users.

    • 선택하지 않으면 AEM의 사용자 프로필에 이메일 주소가 포함되지 않습니다.
    • Twitter의 지침은 수행할 추가 단계를 기록합니다.

소셜 로그인에 대한 유일한 REST 요청은 입니다 GET 계정/자격 증명 확인.

twitter 연결 Cloud Service 만들기 create-a-twitter-connect-cloud-service

다음 Granite OAuth 애플리케이션 및 공급자 Adobe 인스턴스, 클라우드 서비스 구성을 생성하여 인스턴스화한 경우, 새 사용자가 추가되는 Twitter 응용 프로그램 및 멤버 그룹을 식별합니다.

  1. 작성자 인스턴스에서 관리자 권한으로 로그인합니다.

  2. 전역 탐색에서 를 선택합니다 도구 > Cloud Services > 소셜 로그인 구성 Twitter.

  3. 을(를) 선택합니다 컨텍스트 경로 구성.

    컨텍스트 경로는 커뮤니티 사이트를 생성/편집하는 동안 선택한 클라우드 구성 경로와 동일해야 합니다.

  4. 컨텍스트 경로가 활성화 되어 있는지 확인하여 그 아래에 클라우드 서비스를 만듭니다.

  5. 이동 도구 > 일반 > 구성 브라우저. 컨텍스트를 선택하고 속성을 편집합니다. 아직 활성화되지 않은 경우 클라우드 구성을 활성화합니다.

    twitterconfigpropping

  6. twitter 클라우드 서비스 구성 만들기/편집.

    twittersocialloginpng

    • 제목 (필수 여부) Twitter 앱을 식별하는 표시 제목을 입력합니다. 입력한 이름과 동일한 이름을 사용하는 것이 좋습니다 표시 이름 twitter 앱용.

    • 소비자 키 (필수 여부) 을 입력합니다. 소비자(API) 키 twitter 앱용. 이것은 Granite OAuth 애플리케이션 및 공급자 Adobe 대화 상자에서 만든 인스턴스입니다.

    • 소비자 비밀 (필수 여부) 을 입력합니다. Consumer(API) 암호 twitter 앱용.

    • 사용자 만들기 이 확인란을 선택하면 Twitter 계정으로 로그인하면 AEM 사용자 항목이 만들어지고 선택한 사용자 그룹에 구성원으로 추가됩니다. 기본값이 선택되어 있습니다(적극 권장).

    • 마스크 사용자 ID 선택을 취소합니다.

    • 사용자 그룹에 추가 사용자 그룹 추가를 선택하여 하나 이상을 선택합니다. 구성원 그룹 사용자를 추가할 커뮤니티 사이트용.

    note note
    NOTE
    그룹은 언제든지 추가하거나 제거할 수 있습니다. 그러나 기존 사용자의 멤버십은 영향을 받지 않습니다. 자동 멤버십은 이 필드 업데이트 이후 새로 만들어지는 사용자에게만 적용됩니다. 익명 사용자가 비활성화된 사이트의 경우 해당 폐쇄된 커뮤니티 사이트에 대한 해당 커뮤니티 구성원 그룹에 사용자를 추가합니다.
  7. 선택 저장게시.

결과는 Granite OAuth 애플리케이션 및 공급자 Adobe 추가 수정이 필요하지 않은 인스턴스. 기본 범위는 Twitter 로그인에 대한 표준 권한입니다.

AEM Communities Twitter OAuth 공급자 aem-communities-twitter-oauth-provider

AEM Communities 구성은 Granite OAuth 애플리케이션 및 공급자 Adobe 인스턴스. 이 공급자는 사용자 업데이트를 허용하려면 편집이 필요합니다.

편집해야 하는 경우 각 AEM 게시 인스턴스에서 다음을 수행합니다.

  1. 관리자 권한으로 로그인합니다.

  2. 로 이동합니다 웹 콘솔.

    예: http://localhost:4503/system/console/configMgr

  3. AEM Communities Twitter OAuth 공급자를 찾습니다.

  4. 편집할 연필 아이콘을 선택합니다.

    twitteroauth_png

    • OAuth 공급자 ID (필수 여부)

      기본값은 입니다. soco-twitter. 편집하지 마십시오.

    • Cloud Service 구성

      기본값은 입니다. conf. 편집하지 마십시오.

    • OAuth 공급자 서비스 구성

      기본값은 입니다. /apps/social/twitterprovider/config/. 편집하지 마십시오.

    • 사용자 경로

      사용자 데이터가 저장되는 저장소의 위치입니다. 커뮤니티 사이트의 경우 구성원이 서로의 프로필을 볼 수 있는 권한을 보장하려면 경로가 기본값이어야 합니다 /home/users/community.

    • 매개 변수 활성화 편집 안 함

    • URL 매개 변수 편집 안 함

    • 사용자 업데이트

      선택하면, 매번 로그인 시 저장소에서 사용자 데이터를 새로 고쳐 프로필 변경 또는 요청한 추가 데이터를 반영합니다. 기본값은 선택 취소되어 있습니다.

다음 단계 next-steps-1

다음 단계는 Facebook과 Twitter 모두에 대해 동일합니다.

소셜 로그인 활성화 enable-social-login

AEM Communities Sites 콘솔 aem-communities-sites-console

클라우드 서비스가 구성되면 을 사용하여 커뮤니티 사이트에 대한 관련 소셜 로그인 설정에 대해 활성화할 수 있습니다 사용자 관리 커뮤니티 사이트 중 설정 하위 패널 생성 또는 관리.

  1. 소셜 로그인 구성을 저장한 사이트 구성 컨텍스트를 선택합니다.

  2. 일반 탭에서 클라우드 구성을 설정합니다.

    managessites_png

  3. 설정 탭에서 을 활성화합니다 Social 로그인 저장

    usermgmt_png

소셜 로그인 테스트 test-social-login

  • 확인 Adobe Granite OAuth 인증 핸들러 모든 게시 인스턴스에서 활성화되었습니다
  • 클라우드 서비스가 게시되었는지 확인합니다
  • 커뮤니티 사이트가 게시되었는지 확인합니다
  • 브라우저에서 게시된 사이트를 시작합니다(예: http://localhost:4503/content/sites/engage/en.html).
  • 선택 로그인
  • 다음 중 하나를 선택합니다 facebook으로 로그인 또는 twitter으로 로그인
  • 아직 Facebook 또는 Twitter에 로그인하지 않은 경우 적절한 자격 증명으로 로그인합니다
  • facebook 또는 Twitter 앱에서 표시되는 대화 상자에 따라 권한을 부여해야 할 수 있습니다
  • 성공적인 로그인을 반영하도록 페이지 상단에 있는 도구 모음이 업데이트됩니다
  • 선택 프로필: 프로필 페이지에는 사용자의 아바타 이미지, 이름 및 성이 표시됩니다. 또한 허용되는 필드/매개 변수에 따라 Facebook 또는 Twitter 프로필의 정보를 표시합니다.

AEM Platform OAuth 구성 aem-platform-oauth-configurations

Adobe Granite OAuth 인증 핸들러 adobe-granite-oauth-authentication-handler

다음 Adobe Granite OAuth Authentication Handler 기본적으로 활성화되지 않으며 모든 AEM 게시 인스턴스에서 활성화되어야 합니다.

게시 시 인증 핸들러를 활성화하려면 OSGi 구성을 열고 저장하면 됩니다.

  • 관리자 권한으로 로그인
  • 로 이동합니다 웹 콘솔
    예: http://localhost:4503/system/console/configMgr
  • 찾기 Adobe Granite OAuth Authentication Handler
  • 을(를) 선택하여 편집할 구성을 엽니다
  • 저장 ​을 선택합니다

chlimage_1-489

CAUTION
인증 핸들러를 의 Facebook 또는 Twitter 인스턴스와 혼동하지 않도록 주의하십시오 Granite OAuth 애플리케이션 및 공급자 Adobe.

chlimage_1-490

Granite OAuth 애플리케이션 및 공급자 Adobe adobe-granite-oauth-application-and-provider

facebook 또는 Twitter에 대한 클라우드 서비스를 만들 때 의 인스턴스 Adobe Granite OAuth Authentication Handler 가 만들어집니다.

facebook 또는 Twitter 앱에 대해 생성된 인스턴스를 찾으려면 다음을 수행하십시오.

  1. 관리자 권한으로 로그인합니다.

  2. 로 이동합니다 웹 콘솔.

    예: http://localhost:4503/system/console/configMgr

  3. Granite OAuth 애플리케이션 및 공급자를 찾습니다.

    • 다음 위치의 인스턴스를 찾습니다. 클라이언트 ID 일치 앱 ID

    chlimage_1-491

    다음 속성을 제외하고 구성의 다른 속성은 변경되지 않은 상태로 둡니다.

    • 구성 ID

      (필수 여부) OAuth 구성 ID는 고유해야 합니다. 클라우드 서비스를 만들 때 자동으로 생성됩니다.

    • 클라이언트 ID

      (필수 여부) 클라우드 서비스를 만들 때 제공된 애플리케이션 ID입니다.

    • 클라이언트 암호

      (필수 여부) 클라우드 서비스를 만들 때 제공된 애플리케이션 암호입니다.

    • 범위

      (선택 사항입니다) 허용된 내용에 대한 추가 범위를 제공자로부터 요청할 수 있습니다. 기본 범위에서는 소셜 인증 및 프로필 데이터를 제공하는 데 필요한 권한을 다룹니다.

    • 공급자 ID

      (필수 여부) 클라우드 서비스를 만들 때 AEM Communities의 공급자 ID가 설정됩니다. 편집하지 마십시오. facebook Connect의 경우 값은 soco-facebook. twitter 연결의 경우 값은 soco-twitter.

    • 그룹

      (권장) 생성된 사용자가 추가된 하나 이상의 구성원 그룹이 추가됩니다. AEM Communities의 경우 커뮤니티 사이트의 구성원 그룹을 나열하는 것이 좋습니다.

    • 콜백 URL

      (선택 사항입니다) 클라이언트를 다시 리디렉션하도록 OAuth 공급자로 구성된 URL입니다. 원래 요청의 호스트를 사용하려면 상대 URL을 사용하십시오. 원래 요청된 URL을 대신 사용하려면 비워 두십시오. 접미사 "/callback/j_security_check"가 이 URL에 자동으로 추가됩니다.

    note note
    NOTE
    콜백용 도메인은 공급자(Facebook 또는 Twitter)에 등록해야 합니다.

각 OAuth 인증 핸들러 구성에 대해 인스턴스에 두 개의 추가 구성이 있습니다.

  • Apache Jackrabbit Oak Default Sync Handler(org.apache.jackrabbit.oak.spi.security.authentication.external.impl.DefaultSyncHandler) - 여기에는 편집이 필요하지 않지만 Facebook 필드가 CQ 사용자 프로필 노드에 매핑되는 방법을 사용자 필드 매핑을 볼 수 있습니다. 또한 '동기화 처리기 이름'이 OAuth 공급자 구성의 구성 ID와 일치하는지 확인합니다.
  • Apache Jackrabbit Oak External Login Module(org.apache.jackrabbit.oak.spi.security.authentication.external.impl.ExternalLoginModuleFactory) - 여기에는 편집할 필요가 없지만, 'ID 공급자 이름' 및 '동기화 처리기 이름'이 동일하고 해당 OAuth 및 동기화 처리기 구성을 각각 가리키는 것을 볼 수 있습니다.

자세한 내용은 Apache Oak 외부 로그인 모듈을 사용한 인증.

OAuth 사용자 순회 성능 oauth-user-traversal-performance

수십만 명의 사용자가 Facebook 또는 Twitter 로그인을 사용하여 등록하는 커뮤니티 사이트의 경우 사이트 방문자가 다음 Oak 인덱스를 추가하여 소셜 로그인을 사용할 때 수행되는 쿼리의 순회 성능을 향상시킬 수 있습니다.

로그에 순회 경고가 표시되면 이 인덱스를 추가하는 것이 좋습니다.

작성자 인스턴스에서 관리자 권한으로 로그인됨:

  1. 전역 탐색에서: 선택 도구, CRX/DE Lite.

  2. ntBaseLucene 복사본에서 ntBaseLucene-oauth라는 인덱스를 만듭니다.

    • /oak:index 노드 아래에 있습니다.
    • node ntBaseLucene 선택
    • 선택 복사
    • 선택 /oak:index
    • 선택 붙여넣기
    • ntBaseLucene의 복사본 이름을 ntBaseLucene-oauth로 변경합니다.
  3. ntBaseLucene-oauth 노드의 속성을 수정합니다.

    • indexPath: /oak:index/ntBaseLucene-oauth
    • 이름: oauthid-123xxxx
    • 다시 색인화: true
    • reindexCount: 1
  4. /oak:index/ntBaseLucene-oauth/indexRules/nt:base/properties 노드 아래:

    • cqTags를 제외한 모든 하위 노드를 삭제합니다.

    • cqTags를 oauthid-123xxxx로 이름 변경

    • 노드 authid-123xxxx의 속성을 수정합니다.

      • 이름: oauthid-123xxxx
    • 선택 모두 저장.

* 대상 이름 oauthid-123년, 바꾸기 123년 facebook 사용 앱 ID 또는 Twitter 소비자(API) 키 이 값은 클라이언트 ID 에서 Granite OAuth 애플리케이션 및 공급자 Adobe구성.

chlimage_1-492

추가 정보 및 도구는 Oak 쿼리 및 색인 지정.

Dispatcher 구성 dispatcher-configuration

자세한 내용은 커뮤니티에 대한 Dispatcher 구성.

recommendation-more-help
5d37d7b0-a330-461b-814d-068612705ff6