Alipay 소셜 로그인을 설정하세요 (Web)
웹 앱에서 Alipay 소셜 로그인을 위한 공식 Logto 커넥터입니다.
팁:
이 가이드는 Logto 커넥터에 대한 기본적인 이해를 전제로 합니다. 익숙하지 않은 분들은 커넥터 가이드를 참조하여 시작하세요.
시작하기
Alipay Web 커넥터는 데스크톱 웹 애플리케이션을 위해 설계되었습니다. Alipay의 OAuth 2.0 인증 (Authentication) 워크플로우를 활용하여, Alipay 사용자가 번거로운 회원가입 과정 없이 공개 Alipay 사용자 프로필을 사용해 다른 앱에 로그인할 수 있도록 합니다.
Alipay 개발자 계정 등록하기
Alipay 개발자 계정 등록을 아직 하지 않았다면 진행하세요.
Alipay 앱 생성 및 구성하기
- Alipay 콘솔에 방금 등록한 계정으로 로그인하세요.
- "내 애플리케이션" (我的应用) 패널에서 "웹 & 모바일 애플리케이션" (网页&移动应用) 탭으로 이동하세요.
- "앱 생성" (立即创建) 버튼을 클릭하여 애플리케이션 구성을 시작하세요.
- "애플리케이션 이름" (应用名称)에 명명 규칙에 따라 이름을 입력하고, "애플리케이션 아이콘" (应用图标)을 업로드하세요. "앱 유형" (应用类型)으로 "웹 애플리케이션" (网页应用)을 선택해야 합니다.
- 애플리케이션 생성이 완료되면, 개요 페이지로 이동합니다. 여기서 "기능 추가" (添加能力)를 클릭하여 "제3자 애플리케이션 인가" (第三方应用授权), "회원 정보 가져오기" (获取会员信息), "앱 Alipay 로그인" (App 支付宝登录)을 추가한 후 Alipay 로그인을 활성화하세요.
- Alipay 고객센터로 이동하여 Alipay 개발자 계정으로 로그인하세요. 상단바에서 "계정 센터" (账号中心)를 클릭하고, 사이드바 하단에서 "APPID 바인딩" (APPID 绑定)으로 이동하세요. 4단계에서 생성한 웹 애플리케이션의 APPID를 입력하여 "바인딩 추가" (添加绑定)를 진행하세요.
- "앱 Alipay 로그인"의 "서명" 버튼을 클릭하고 안내에 따라 서명 과정을 완료하세요. 이 단계가 끝나면 5단계에서 추가한 기능들이 활성화된 것을 확인할 수 있습니다.
- Alipay 오픈 플랫폼 콘솔 페이지로 돌아가 "개발 정보" (开发信息) 섹션에서 "인터페이스 서명 방식" (接口加签方式（密钥/证书）)을 찾으세요. "설정" (设置) 버튼을 클릭하면 서명 방식을 설정하는 페이지로 이동합니다. "공개키" (公钥)가 권장 서명 방식이며, 생성한 공개키 파일의 내용을 입력란에 붙여넣으세요.
- Alipay 콘솔 페이지 하단의 "설정" (设置) 버튼을 클릭하여 "인가 리디렉션 URI" (授权回调地址)를 설정하세요.
${your_logto_origin}/callback/${connector_id}가 Logto 코어에서 사용하는 기본 리디렉션 URI입니다.connector_id는 Logto Admin Console 커넥터 상세 페이지 상단에서 확인할 수 있습니다. - 모든 단계를 완료한 후, Alipay 콘솔 페이지 우측 상단에서 "검토 제출" (提交审核)을 클릭하세요. 검토가 승인되면 원활한 Alipay 로그인 플로우를 사용할 수 있습니다.
노트:
- openssl *을 사용하여 로컬 컴퓨터에서 다음 명령어로 키 쌍을 생성할 수 있습니다.
openssl genrsa -out private.pem 2048
openssl rsa -in private.pem -outform PEM -pubout -out public.pem
Alipay 앱 설정 웹사이트에서 공개키를 입력할 때, public.pem의 헤더와 푸터를 제거하고 모든 줄바꿈 문자를 삭제한 뒤, 나머지 내용을 "공개키" 입력란에 붙여넣어야 합니다.
Logto Alipay Web 커넥터 설정하기
- Alipay 콘솔 작업공간에서 "내 애플리케이션" (我的应用) 패널로 이동하여 "웹 & 모바일 애플리케이션" (网页&移动应用) 탭을 클릭하면 모든 애플리케이션의 APPID를 확인할 수 있습니다.
- 이전 단계 7에서 이미 개인키와 공개키가 포함된 키 쌍을 생성했습니다.
- Logto 커넥터 설정을 입력하세요:
- 1단계에서 얻은 APPID를
appId필드에 입력하세요. - 2단계에서 생성한 개인키 파일의 내용을
privateKey필드에 입력하세요. 반드시 모든 줄바꿈 문자를 '\n'으로 대체하고, 개인키 파일의 헤더와 푸터는 삭제하지 마세요. - "Create And Configure Alipay Apps"의 7단계에서 선택한
Public key서명 방식에 따라signType필드는 'RSA2'로 입력하세요. charset필드는 'gbk' 또는 'utf8' 중 하나를 입력할 수 있습니다. 이 필드는 선택 사항이며, 기본값은 'utf8'입니다.scope필드는 'auth_base' 또는 'auth_user' 중 하나를 입력할 수 있습니다. 이 필드도 선택 사항이며, 기본값은 'auth_user'입니다. 차이점을 참고하세요.
- 1단계에서 얻은 APPID를
설정 타입
| 이름 | 타입 | Enum 값 |
|---|---|---|
| appId | string | N/A |
| privateKey | string | N/A |
| signType | enum string | 'RSA' | 'RSA2' |
| charset | enum string (선택) | 'gbk' | 'utf8' | undefined |
| scope | enum string (선택) | 'auth_user' | 'auth_base' |
Alipay 웹 커넥터 테스트하기
이제 끝입니다. 회원가입 및 로그인에서 소셜 커넥터 활성화를 잊지 마세요.
Alipay 웹 커넥터가 활성화되면, 웹 앱을 빌드하고 실행하여 정상 동작하는지 확인할 수 있습니다.
참고 자료
Alipay 문서 - 접근 준비 - 앱 생성 방법Alipay 문서 - 웹 & 모바일 애플리케이션 - 앱 생성