Auth0 싱글 사인온(SSO) | Auth0을 이용한 워드프레스 로그인

회사 개요

WordPress용 OAuth SSO 플러그인은 Auth0을 OAuth 및 OpenID Connect 제공업체로 사용하여 WordPress에 안전하게 로그인할 수 있도록 합니다. 다양한 사용자 지정 제공업체 및 표준 IDP를 사용하여 플러그인을 구성할 수도 있습니다. 사용자 프로필 속성 매핑, 역할 매핑 등과 같은 고급 SSO(싱글 사인온) 기능을 지원합니다. 이 가이드에서는 WordPress와 Auth0 간의 SSO를 구성하는 방법을 살펴보겠습니다. 이 가이드를 마치면, 사용자는 OAuth 싱글 사인온을 사용하여 WordPress에 Auth0으로 로그인할 수 있어야 합니다. 여기를 클릭하세요..

전제조건 : 다운로드 및 설치

• WordPress 인스턴스에 관리자로 로그인합니다.
• 워드프레스로 이동 대시보드 -> 플러그인 그리고 클릭 새로운 추가.
• 검색 OAuth 싱글 사인온(SSO) 워드프레스 플러그인을 클릭하고 클릭하세요. 지금 설치.
• 설치가 완료되면 클릭하세요. 활성화.

구성 단계

1단계: Auth0을 OAuth 공급자로 설정

• We Buy Orders 신청서를 클릭하세요. https://auth0.com/auth/login 그리고 가입하거나 로그인하세요.
• We Buy Orders 신청서를 클릭하세요. 어플리케이션 왼쪽 패널의 탭을 클릭한 다음 어플리케이션.

• 클릭 응용 프로그램 만들기 새 응용 프로그램을 만들 수 있습니다.

• 선택 일반 웹 애플리케이션 그리고 클릭 만들기 버튼을 클릭합니다.

• 이제 가라. 설정 탭.

• 아래로 스크롤 애플리케이션 URI 섹션을 입력하고 콜백 URL 플러그인에서 얻을 수 있습니다. 그런 다음 아래로 스크롤하여 변경 사항 저장을 클릭합니다.

• 복사 고객 ID 고객 비밀 설정 탭에서 기본 정보를 확인하고 miniOrange OAuth 클라이언트 플러그인 구성에 저장합니다.

• 이제 가라. 사용자 왼쪽 패널의 사용자 관리 탭.

• 를 클릭하십시오 사용자 만들기 새 사용자를 생성합니다.

• 필수 사항을 모두 입력하고 클릭하세요. 만들기.




성공적으로 구성되었습니다 인증0 귀하의 WordPress 사이트에 Auth0 SSO 로그인을 달성하기 위한 OAuth 공급자입니다.

2단계: WordPress를 OAuth 클라이언트로 설정

• 무료
• 프리미엄

• We Buy Orders 신청서를 클릭하세요. OAuth 구성 탭을 클릭하십시오. 새 애플리케이션 추가 웹사이트에 새로운 클라이언트 애플리케이션을 추가하려면

• 여기의 OAuth/OpenID Connect 공급자 목록에서 애플리케이션을 선택하세요. 인증0

• 공급자를 선택한 후 콜백 URL 이는 OAuth 공급자의 SSO 애플리케이션 구성에서 구성되어야 합니다.
• 다음과 같은 클라이언트 자격 증명을 입력하십시오. 고객 ID & 고객 비밀 Auth0 SSO 애플리케이션에서 얻을 수 있습니다.
• 구성 도메인 이름 Auth0 SSO 애플리케이션에서 찾았습니다. 구성 방법은 아래 표를 참조하세요. 범위 및 엔드포인트 플러그인의 Auth0에 대해.

참고 : Auth0 계정을 생성하면 다음을 찾을 수 있습니다. 도메인 URL 아래 끝점에 동일한 내용을 추가해야 합니다.




범위:	openid 프로필 이메일
엔드포인트 승인:	https://<Auth0-app-domain>/authorize
액세스 토큰 엔드포인트:	https://<Auth0-app-domain>/oauth/token
사용자 정보 가져오기 끝점:	https://<Auth0-app-domain>/userinfo



• 를 클릭하십시오 다음.
• 요약 페이지에서 모든 세부 정보를 확인한 후 마침을 클릭하여 구성을 저장하고 SSO 연결을 테스트합니다.




성공적으로 구성되었습니다 OAuth 클라이언트로서의 WordPress WordPress 사이트에 Auth0 로그인을 달성하려면 다음을 수행하세요.

• We Buy Orders 신청서를 클릭하세요. OAuth 구성 탭을 클릭하고 애플리케이션 이름을 검색하여 웹사이트에 새 클라이언트 애플리케이션을 추가하세요. 여기 인증0.

• 구성 앱 이름, 클라이언트 ID, 클라이언트 비밀번호 Auth0 SSO 애플리케이션에서.

• 구성 방법은 아래 표를 참조하세요. 플러그인의 Auth0에 대한 범위 및 끝점.

  참고 : Auth0 계정을 생성하면 다음을 찾을 수 있습니다. 도메인 URL 아래 끝점에 동일한 내용을 추가해야 합니다.

  
  

  범위:	openid 프로필
  엔드포인트 승인:	https://{your-auth0-domain}/authorize
  액세스 토큰 엔드포인트:	https://{your-auth0-domain}/oauth/token

  
• 당신의 선택 부여 유형 옵션 목록에서 & 클릭 설정을 저장하여 구성을 저장합니다.




성공적으로 구성되었습니다 OAuth 클라이언트로서의 WordPress 귀하의 WordPress 사이트에 Auth0 로그인을 달성하기 위해.

3단계: 사용자 속성 매핑

• 사용자가 WordPress에 성공적으로 로그인하려면 사용자 속성 매핑이 필수입니다. 아래 설정을 사용하여 WordPress에 대한 사용자 프로필 속성을 설정하겠습니다.

사용자 속성 찾기:

• We Buy Orders 신청서를 클릭하세요. OAuth 구성 탭. 아래로 스크롤하여 클릭하세요. 테스트 구성.

• OAuth 공급자가 WordPress에 반환한 모든 값이 표로 표시됩니다. 이름, 성, 이메일 또는 사용자 이름 값이 표시되지 않으면 OAuth 공급자에서 필수 설정을 지정하여 이 정보를 반환하세요.
• 테스트 구성에 모든 값이 표시되면 다음으로 이동하세요. 속성/역할 매핑 탭을 클릭하면 사용자 이름 드롭다운에 속성 목록이 표시됩니다.

4단계: 역할 매핑[프리미엄]

• 를 클릭하십시오 “테스트 구성” 그러면 OAuth 공급자가 보낸 속성 이름 및 속성 값 목록을 받게 됩니다.
• 테스트 구성 창에서 플러그인의 속성 매핑 섹션에 있는 속성 이름을 매핑합니다. 자세한 내용은 스크린샷을 참조하세요.

• 역할 매핑 활성화: 역할 매핑을 활성화하려면 그룹 이름 속성을 매핑해야 합니다. 제공자 애플리케이션에서 역할을 반환하는 속성 목록에서 속성 이름을 선택합니다.
  예: 역할


• 공급자 역할에 WordPress 역할을 할당합니다. 제공자 애플리케이션에 따라 WordPress 역할을 제공자 역할에 할당할 수 있습니다. 귀하의 응용 프로그램에 따라 학생, 교사, 관리자 또는 기타 사람이 될 수 있습니다. 그룹 속성 값 아래에 공급자 역할을 추가하고 WordPress 역할 아래에서 그 앞에 필요한 WordPress 역할을 할당합니다.
  
  예를 들어, 아래 이미지에서. 교사에게는 관리자 역할이 할당되고 학생에게는 구독자 역할이 할당됩니다.

• 매핑을 저장하면 공급자 역할에 WordPress용 SSO가 할당됩니다.
  예: 주어진 예에 따라 '교사' 역할을 가진 사용자는 WordPress의 관리자로 추가되고 '학생'은 구독자로 추가됩니다.

5단계: Auth0에서 사용자 정의 속성 만들기

• 공통 속성 값으로 사용자 정의 속성 추가
• 다양한 속성 값을 사용하여 사용자별 맞춤 속성 추가

• We Buy Orders 신청서를 클릭하세요. https://auth0.com/auth/login 인증 개발자 계정에 로그인하세요.
• 왼쪽 패널에서 작업 -> 흐름 -> 로그인.

• 를 클릭하십시오 작업 추가 -> 사용자 정의 빌드.

• 원하는 이름을 입력하고 다른 설정은 그대로 유지하세요. 클릭 만들기 버튼을 클릭합니다.

• 코드 편집기에서 아래 코드를 작성합니다. 코드를 작성한 후 다음을 클릭하세요. 배포.

      
                
                Code:
                  exports.onExecutePostLogin = async (event, api) => {
                  const attr_name = "favorite_color";
                  api.idToken.setCustomClaim( attr_name , 'Purple');
                          
                  // ... additional code
                  };
                          
                Code Description:
                          
                  attr_name: This will be the attribute name which will you want to create (favorite_color in my case)
                          
                  The function api.idToken.setCustomClaim(), expects the key and its value. Here, the key is attr_name, and its value is “Purple”
                
                


• 배포를 클릭한 후 다음으로 돌아갑니다. 작업 -> 흐름 -> 로그인 -> 사용자 정의 & 아래와 같이 시작 및 완료 흐름 사이에 생성한 작업(사용자 정의 속성 추가)을 끌어서 놓습니다.

• 이렇게 한 후 다음을 클릭하세요. 신청 버튼을 클릭합니다.
• 마지막으로 miniOrange OAuth Single Sign-On 플러그인의 테스트 구성을 수행하여 아래와 같이 사용자의 사용자 정의 속성을 확인합니다.

• We Buy Orders 신청서를 클릭하세요. https://auth0.com/auth/login 인증 개발자 계정에 로그인하세요.
• 왼쪽 패널에서 사용자 관리 -> 사용자.
• 사용자 정의 속성을 할당할 사용자를 선택합니다.

• 사용자를 선택한 후 아래로 스크롤하여 메타데이터로 이동합니다. ~ 안에 user_metadata, 아래와 같이 맞춤 속성을 키-값 쌍으로 추가해야 합니다.

• 왼쪽 패널에서 작업 -> 흐름 -> 로그인.

• 를 클릭하십시오 작업 추가 -> 사용자 정의 빌드.

• 원하는 이름을 입력하고 다른 설정은 그대로 유지하세요. 클릭 만들기 버튼을 클릭합니다.

• 코드 편집기에서 아래 코드를 작성합니다. 코드를 작성한 후 다음을 클릭하세요. 배포.

              

              Code:
                exports.onExecutePostLogin = async (event, api) => {
                          
                const { favorite_color, preferred_contact } = event.user.user_metadata;
                        
                if (event.authorization) {
                // Set claims 
                api.idToken.setCustomClaim('fav_color', favorite_color);
                api.idToken.setCustomClaim('preferred_contact', preferred_contact);
                }
                };
                        
                        
              Code Description:
                We’ll add the keys (created in user_metadata) in the const as the parameters.
                        
                When using the "api.idToken.setCustomClaim() function, you will need to include two parameters. The first parameter is used to specify the desired attribute name, while in the second parameter you will add the key which you want set the attribute value.
              
              


• 배포를 클릭한 후 다음으로 돌아갑니다. 작업 -> 흐름 -> 로그인 -> 사용자 정의 & 드래그 앤 드롭 아래와 같이 시작 및 완료 흐름 사이에 이전에 생성한 작업(사용자 정의 속성 추가)이 있습니다.

• 이렇게 한 후 다음을 클릭하세요. 신청 버튼을 클릭합니다.
• 마지막으로 miniOrange 플러그인의 테스트 구성을 수행하여 아래와 같이 사용자 정의 속성을 확인합니다.

6단계: 로그인 설정

• WordPress 5.7 이하의 로그인 설정
• WordPress 5.8의 로그인 설정
• WordPress 5.9의 로그인 설정

• We Buy Orders 신청서를 클릭하세요. WordPress 왼쪽 패널 > 모양 > 위젯.
• 선택 미니오렌지 OAuth. 원하는 위치로 드래그 앤 드롭하고 저장하세요.

• We Buy Orders 신청서를 클릭하세요. WordPress 왼쪽 패널 > 모양 > 위젯.
• 선택 미니오렌지 OAuth. 원하는 위치로 드래그 앤 드롭하고 저장하세요.

• 지금 바로 Auth0 SSO(Single Sign-On for WordPress) - Auth0 OAuth를 활성화하세요.

• 확인 "로그인 페이지에 표시" 응용프로그램에 옵션이 활성화되어 있습니다. (아래 이미지 참고)

• 이제 당신의 워드프레스 로그인 페이지를 확인하시기 바랍니다. (예: https://< your-wordpress-domain >/wp-login.php)
• 거기에 Auth0 SSO 로그인 버튼이 보일 겁니다. 로그인 버튼을 클릭하면 Auth0 Single Sign-On(SSO) - Auth0 OAuth를 테스트할 수 있습니다.

관련 기사

• OAuth 2.0 인증 프레임워크
• OAuth 2.0이란 무엇입니까?
• WordPress용 OAuth/OpenID Connect/JWT SSO
• OAuth 2.0은 무엇이고 어떻게 작동하나요?
• 우리는 어떻게 다른가