facebook 및 Twitter을 사용하여 소셜 로그인 social-login-with-facebook-and-twitter
소셜 로그인은 사이트 방문자에게 Facebook 또는 Twitter 계정으로 로그인하는 옵션을 제공하는 기능입니다. 따라서 AEM 구성원 프로필에 허용된 Facebook 또는 Twitter 데이터를 포함합니다.
소셜 로그인 개요 social-login-overview
소셜 로그인을 포함하려면 필수 로 사용자 지정 Facebook 및 Twitter 애플리케이션을 만듭니다.
we-retail 샘플은 샘플 Facebook 및 Twitter 앱 및 클라우드 서비스를 제공하지만, 프로덕션 웹 사이트.
필요한 단계는 다음과 같습니다.
-
OAuth 인증 활성화 모든 AEM 게시 인스턴스에서 게시 가능합니다.
OAuth가 활성화되지 않은 상태에서 로그인 시도가 실패합니다.
-
만들기 소셜 앱 및 클라우드 서비스.
-
facebook으로 로그인을 지원하려면
- 만들기 Facebook 앱.
- 만들기 및 게시 Facebook Connect 클라우드 서비스.
-
twitter으로 로그인을 지원하려면
- 만들기 Twitter 앱.
- 만들기 및 게시 Twitter Connect 클라우드 서비스.
-
-
활성화 소셜 로그인 커뮤니티 사이트용.
다음과 같은 두 가지 기본 개념이 있습니다.
-
범위 (권한) 앱이 요청할 수 있는 데이터를 지정합니다.
- facebook 및 Twitter Granite OAuth 애플리케이션 및 공급자 Adobe 인스턴스는 기본적으로 범위 내에 기본 앱 권한을 포함합니다.
-
필드 (params) URL 매개 변수를 사용하여 요청한 실제 데이터를 지정합니다.
- 이러한 필드는 AEM Communities Facebook OAuth 공급자 및 AEM Communities Twitter OAuth 공급자.
- 기본 필드는 대부분의 사용 사례에 충분하지만 수정할 수 있습니다.
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 버전에서 작동하도록 업데이트되었습니다.
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>.
- 대상 사이트 URL, 입력
- 대상 표시 이름 를 클릭하고 Facebook connect 서비스의 제목 을 사용할 제목을 입력합니다.
- 대상 카테고리, 선택 권장 페이지용 앱, 하지만 뭐든 될 수 있어
- 제품 추가: Facebook 로그인
- 대상 유효한 OAuth 리디렉션 URI, 입력
https://<server>:<port>.
- 대상 유효한 OAuth 리디렉션 URI, 입력
- 대상 플랫폼, 웹 사이트 선택
응용 프로그램이 만들어지면 앱 ID 및 앱 암호 설정. 이 정보는 Facebook 클라우드 서비스.
facebook Connect Cloud Service 만들기 create-a-facebook-connect-cloud-service
다음 Granite OAuth 애플리케이션 및 공급자 Adobe 클라우드 서비스 구성을 만들어 인스턴스화한 인스턴스에서, Facebook 애플리케이션 및 새 사용자가 추가되는 구성원 그룹을 식별합니다.
-
AEM 작성자 인스턴스에서 관리자 권한으로 로그인합니다.
-
전역 탐색에서 를 선택합니다 도구 > Cloud Services > Facebook Social 로그인 구성.
-
구성을 선택합니다 컨텍스트 경로.
컨텍스트 경로 커뮤니티 사이트를 생성/편집하는 동안 선택한 클라우드 구성 경로와 같아야 합니다.
-
컨텍스트 경로가 활성화 되어 있는지 확인하여 그 아래에 클라우드 서비스를 만듭니다.
-
이동 도구 > 일반 > 구성 브라우저. 컨텍스트를 선택하고 속성을 편집합니다. 아직 활성화되지 않은 경우 클라우드 구성을 활성화합니다.
- 자세한 내용은 구성 브라우저 설명서 추가 정보.
-
facebook 클라우드 서비스 구성 만들기/편집.
- 제목 (필수 여부) 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 게시 인스턴스에서 다음을 수행합니다.
-
관리자 권한으로 로그인합니다.
-
로 이동합니다 웹 콘솔. 예: http://localhost:4503/system/console/configMgr
-
AEM Communities Facebook OAuth 공급자를 찾습니다.
-
편집할 연필 아이콘을 선택합니다.
-
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.
일반적으로
-
을(를) 입력합니다. 이름 은 웹 사이트 사용자에게 Twitter 애플리케이션을 식별합니다.
-
을(를) 입력합니다. 설명.
-
대상 웹 사이트 - https:// 입력<server>/.
-
대상 콜백 URL - https:// 입력<server>/.
note note NOTE 포트를 지정할 필요는 없습니다. 개발을 위해 https://127.0.0.1/ 이 작동합니다. -
응용 프로그램이 만들어지면 소비자(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 응용 프로그램 및 멤버 그룹을 식별합니다.
-
작성자 인스턴스에서 관리자 권한으로 로그인합니다.
-
전역 탐색에서 를 선택합니다 도구 > Cloud Services > 소셜 로그인 구성 Twitter.
-
을(를) 선택합니다 컨텍스트 경로 구성.
컨텍스트 경로는 커뮤니티 사이트를 생성/편집하는 동안 선택한 클라우드 구성 경로와 동일해야 합니다.
-
컨텍스트 경로가 활성화 되어 있는지 확인하여 그 아래에 클라우드 서비스를 만듭니다.
-
이동 도구 > 일반 > 구성 브라우저. 컨텍스트를 선택하고 속성을 편집합니다. 아직 활성화되지 않은 경우 클라우드 구성을 활성화합니다.
- 자세한 내용은 구성 브라우저 설명서 추가 정보.
-
twitter 클라우드 서비스 구성 만들기/편집.
-
제목 (필수 여부) Twitter 앱을 식별하는 표시 제목을 입력합니다. 입력한 이름과 동일한 이름을 사용하는 것이 좋습니다 표시 이름 twitter 앱용.
-
소비자 키 (필수 여부) 을 입력합니다. 소비자(API) 키 twitter 앱용. 이것은 Granite OAuth 애플리케이션 및 공급자 Adobe 대화 상자에서 만든 인스턴스입니다.
-
소비자 비밀 (필수 여부) 을 입력합니다. Consumer(API) 암호 twitter 앱용.
-
사용자 만들기 이 확인란을 선택하면 Twitter 계정으로 로그인하면 AEM 사용자 항목이 만들어지고 선택한 사용자 그룹에 구성원으로 추가됩니다. 기본값이 선택되어 있습니다(적극 권장).
-
마스크 사용자 ID 선택을 취소합니다.
-
사용자 그룹에 추가 사용자 그룹 추가를 선택하여 하나 이상을 선택합니다. 구성원 그룹 사용자를 추가할 커뮤니티 사이트용.
note note NOTE 그룹은 언제든지 추가하거나 제거할 수 있습니다. 그러나 기존 사용자의 멤버십은 영향을 받지 않습니다. 자동 멤버십은 이 필드 업데이트 이후 새로 만들어지는 사용자에게만 적용됩니다. 익명 사용자가 비활성화된 사이트의 경우 해당 폐쇄된 커뮤니티 사이트에 대한 해당 커뮤니티 구성원 그룹에 사용자를 추가합니다. -
-
선택 저장 및 게시.
결과는 Granite OAuth 애플리케이션 및 공급자 Adobe 추가 수정이 필요하지 않은 인스턴스. 기본 범위는 Twitter 로그인에 대한 표준 권한입니다.
AEM Communities Twitter OAuth 공급자 aem-communities-twitter-oauth-provider
AEM Communities 구성은 Granite OAuth 애플리케이션 및 공급자 Adobe 인스턴스. 이 공급자는 사용자 업데이트를 허용하려면 편집이 필요합니다.
편집해야 하는 경우 각 AEM 게시 인스턴스에서 다음을 수행합니다.
-
관리자 권한으로 로그인합니다.
-
로 이동합니다 웹 콘솔.
예: http://localhost:4503/system/console/configMgr
-
AEM Communities Twitter OAuth 공급자를 찾습니다.
-
편집할 연필 아이콘을 선택합니다.
-
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
클라우드 서비스가 구성되면 을 사용하여 커뮤니티 사이트에 대한 관련 소셜 로그인 설정에 대해 활성화할 수 있습니다 사용자 관리 커뮤니티 사이트 중 설정 하위 패널 생성 또는 관리.
-
소셜 로그인 구성을 저장한 사이트 구성 컨텍스트를 선택합니다.
-
일반 탭에서 클라우드 구성을 설정합니다.
-
설정 탭에서 을 활성화합니다 Social 로그인 저장
소셜 로그인 테스트 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
- 을(를) 선택하여 편집할 구성을 엽니다
- 저장 을 선택합니다
Granite OAuth 애플리케이션 및 공급자 Adobe adobe-granite-oauth-application-and-provider
facebook 또는 Twitter에 대한 클라우드 서비스를 만들 때 의 인스턴스 Adobe Granite OAuth Authentication Handler
가 만들어집니다.
facebook 또는 Twitter 앱에 대해 생성된 인스턴스를 찾으려면 다음을 수행하십시오.
-
관리자 권한으로 로그인합니다.
-
로 이동합니다 웹 콘솔.
예: http://localhost:4503/system/console/configMgr
-
Granite OAuth 애플리케이션 및 공급자를 찾습니다.
- 다음 위치의 인스턴스를 찾습니다. 클라이언트 ID 일치 앱 ID
다음 속성을 제외하고 구성의 다른 속성은 변경되지 않은 상태로 둡니다.
-
구성 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 인덱스를 추가하여 소셜 로그인을 사용할 때 수행되는 쿼리의 순회 성능을 향상시킬 수 있습니다.
로그에 순회 경고가 표시되면 이 인덱스를 추가하는 것이 좋습니다.
작성자 인스턴스에서 관리자 권한으로 로그인됨:
-
전역 탐색에서: 선택 도구, CRX/DE Lite.
-
ntBaseLucene 복사본에서 ntBaseLucene-oauth라는 인덱스를 만듭니다.
- /oak:index 노드 아래에 있습니다.
- node ntBaseLucene 선택
- 선택 복사
- 선택
/oak:index
- 선택 붙여넣기
- ntBaseLucene의 복사본 이름을 ntBaseLucene-oauth로 변경합니다.
-
ntBaseLucene-oauth 노드의 속성을 수정합니다.
- indexPath: /oak:index/ntBaseLucene-oauth
- 이름: oauthid-123xxxx
- 다시 색인화: true
- reindexCount: 1
-
/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구성.
추가 정보 및 도구는 Oak 쿼리 및 색인 지정.
Dispatcher 구성 dispatcher-configuration
자세한 내용은 커뮤니티에 대한 Dispatcher 구성.