앱의 UX를 간소화하는 것 외에도 SSO에는 다른 이점이 있습니다. 여러 애플리케이션에 하나의 비밀번호나 계정을 사용하면 시스템의 취약 지점 수가 제한되어 보안이 강화되고 등록된 사용자가 자격 증명을 기억하기가 더 쉬워집니다. 사람들이 비밀번호 관리에 서툴다는 것은 입증된 사실이며, 일반적으로 사람들은 실제로 여러 계정에 동일한 비밀번호를 재사용합니다(매우 나쁜 생각).
따라서 이 블로그에서는 Google SSO를 사용하여 로그인을 추가하는 방법을 보여드리겠습니다. Mendix 단 몇 분만에 앱을 사용해보세요 OIDC 마켓플레이스 모듈(Open ID Connect Single Sign On)
우리에게 필요한 건 뭐죠?
시작하기 전에 잠시 시간을 내어 필요한 모든 것을 갖추었는지 확인하세요. Google Cloud Platform 계정을 생성했는지 확인하세요.
또한 Marketplace 모듈도 몇 가지 필요합니다. Mendix 응용 프로그램 :
- 커뮤니티 커먼즈
- 암호화
- 나노플로우 커먼즈
- OIDC 모듈
시작하기
에 구글 클라우드 콘솔, 이와 같은 프로젝트 개요로 이동합니다.
클릭하여 생성 새 프로젝트, 이름을 지정하고(이름은 무엇이든 가능) 클릭합니다. 만들기
프로젝트를 열고 대시보드의 페이지 상단 검색 창에서 OAUTH 동의 화면을 검색하세요.
사용자 유형에서 외부를 선택합니다(이렇게 하면 Google 계정이 있는 모든 사용자가 계정을 만들고 앱에 액세스할 수 있습니다. 만들기를 클릭하여 계속 진행합니다. 다음 페이지에서 아래에 표시된 대로 필요한 모든 세부 정보를 자신의 정보로 입력합니다.
다음 화면 "Scopes"에서는 아무것도 입력할 필요가 없습니다. 화면 하단에서 Save and Continue를 클릭하기만 하면 됩니다.
"테스트 사용자"라는 제목의 마지막 화면에서 테스트 중인 앱에 대한 액세스가 허용된 사용자 목록을 지정할 수 있습니다. 앱이 아직 개발 중인 동안에는 일반적으로 필요하지 않지만 100명 이상의 테스트 사용자가 필요한 경우(이것이 제한 사항임)가 아니면 필요하지 않습니다. 사용자를 지정해야 하는지 여부를 결정하고 다음을 클릭합니다. 저장하고 계속하기계속하려면 화면 하단에 있는 e를 누르세요.
이제 자격 증명 페이지(왼쪽 메뉴)로 이동하여 자격 증명 만들기를 클릭하고 나타나는 드롭다운에서 OAuth 클라이언트 ID를 선택할 수 있습니다.
다음 페이지에서 애플리케이션 유형을 선택하세요. 제 경우에는 웹 애플리케이션을 선택했습니다.
클라이언트 이름을 지정하고 "인증된 리디렉션 URI" 2개를 추가합니다. 추가할 첫 번째 항목은 앱의 클라우드 URL(무료 앱 URL 또는 모든 클라우드 URL)이고 두 번째 항목은 로컬 호스트입니다. 로컬 호스트 옵션을 추가하여 로컬에서 테스트할 수 있습니다. 앱 리디렉션 URL 끝에 "/oauth/v2/callback"을 추가하는 것을 잊지 마세요. 클릭하세요. 만들기 너 끝났을 때.
모두 완료되었습니다! 나중에 참고할 수 있도록 클라이언트 ID와 클라이언트 비밀번호를 안전한 곳에 저장해 두세요.
Studio Pro에서
이제 Mendix 이 빌드의 섹션! 익명 사용자가 필요한 페이지에 액세스할 수 있도록 하려면 앱이 보안을 켜고 익명 사용자의 액세스를 허용하도록 구성해야 합니다. 이를 위해 익명 사용자로 선택할 수 있는 게스트 사용자 역할이 필요합니다.
또한 게스트 사용자 역할이 익명 모듈 역할로 OIDC 모듈에 할당되어야 하며, 관리자에게는 동일한 OIDC 모듈에 대한 관리자 사용자 역할이 할당되어야 합니다.
이제 보안 및 사용자 역할이 설정되었으므로 사용자가 로그인 페이지에 도달할 수 있도록 허용해야 합니다. 프로젝트 탐색으로 이동하여 게스트를 위한 역할 기반 홈페이지를 추가합니다. 이를 위해 OIDC 모듈에서 제공하는 페이지인 "OIDC.Login_Web_Button"을 선택할 수 있습니다. 또한 사용자를 위한 역할 기반 홈페이지를 제공합니다.
마지막으로, 관리자가 SSO 클라이언트 자격 증명에 액세스하고 구성할 수 있도록 허용해야 합니다. 다시 한 번 ODIC 모듈에 "OIDC_Client_Overview"라는 페이지가 이미 제공됩니다. 이것을 탐색에 추가하고 앱 관리자가 접근할 수 있는지 확인하세요.
로컬에서 앱을 실행하고 관리자로 로그인합니다. 데모 스위처 위젯을 사용하여 여기에서 쉽게 로그인합니다. 다음으로 OIDC 클라이언트 개요 페이지로 이동합니다. 새로 만들기를 클릭하여 새 구성을 만듭니다.
별칭에는 원하는 이름을 입력하세요. 저는 간단히 Google이라고 불렀습니다.
클라이언트 ID를 입력하고 상태를 활성으로 설정하세요. 가장 중요한 것은 Google에 대한 자동 구성 URL을 추가해야 한다는 것입니다(https://accounts.google.com/.well-known/openid-configuration)를 클릭하고 "구성 가져오기"를 클릭합니다. 그러면 나머지 필수 필드가 자동으로 채워집니다. 이 URL은 Google에만 해당되며 다른 공급업체는 자체 버전을 가지고 있으므로 사용 중인 공급업체에 대한 올바른 가져오기 URL이 있는지 확인하세요.
마지막 단계는 클라이언트가 사용자에 대해 제공하는 속성인 범위를 선택하는 것입니다. OpenID, 이메일 및 프로필을 선택해야 합니다(프로필은 사용자 정보의 대부분이 저장되는 곳입니다).
로그인 테스트
게스트 사용자가 귀하의 사이트에 접속하면 이제 다음 페이지가 표시되며 사용자는 "SSO를 통해 로그인"을 클릭해야 합니다.
다음으로 사용자에게 로그인에 사용할 Google 계정을 선택하라는 화면이 표시됩니다.
구성이 성공적이라면 사용자는 인증된 사용자로 홈페이지에 접속해야 합니다. 이 설정이 제대로 작동하는지 확인하기 위해 로그인한 사용자의 계정을 반환하는 데이터 뷰를 홈페이지에 추가했고, 레이블을 사용하여 $Account/FullName 속성을 표시했습니다.
마지막으로 하나 더
이 블로그에서는 Google을 SSO 클라이언트로 사용하는 데 초점을 맞추었지만, 이 모듈은 Salesforce 및 Microsoft와 같은 다른 플랫폼을 지원할 수 있지만 이 설정은 모든 OIDC 호환 클라이언트에서 작동해야 한다는 점을 기억하는 것이 중요합니다. 마지막으로 이 모듈은 Native Mobile에서도 작동하므로 실험하고 새로운 구현을 시도하는 것을 즐기세요!
특별 감사를 에릭 티니버이 마켓플레이스 모듈을 만든 사람과 이 글을 쓰는 데 도움을 준 사람에게 감사드립니다!