Alipay (Web) 소셜 로그인을 설정하세요

웹 앱에서 Alipay 소셜 로그인에 대한 공식 Logto 커넥터입니다.

팁:

이 가이드는 Logto 커넥터에 대한 기본적인 이해를 전제로 합니다. 익숙하지 않은 분들은 커넥터 가이드를 참조하여 시작하세요.

시작하기

Alipay Web 커넥터는 데스크톱 웹 애플리케이션을 위해 설계되었습니다. Alipay의 OAuth 2.0 인증 워크플로우를 활용하여 Alipay 사용자가 번거로운 등록 과정을 거치지 않고 공개 Alipay 사용자 프로필을 사용하여 다른 앱에 로그인할 수 있도록 합니다.

Alipay 개발자 계정 등록

Alipay 개발자 계정을 등록하세요. 계정이 없는 경우.

Alipay 앱 생성 및 구성

방금 등록한 계정으로 Alipay 콘솔에 로그인하세요.
"내 애플리케이션" (我的应用) 패널의 "웹 & 모바일 애플리케이션" (网页&移动应用) 탭으로 이동하세요.
"앱 생성" (立即创建) 버튼을 클릭하여 애플리케이션 구성을 시작하세요.
"애플리케이션 이름" (应用名称)에 명명 규칙을 따라 애플리케이션 이름을 지정하고 "애플리케이션 아이콘" (应用图标)을 업로드하세요. "앱 유형" (应用类型)으로 "웹 애플리케이션" (网页应用)을 선택하세요.
애플리케이션 생성을 완료한 후, 개요 페이지로 이동하여 "능력 추가" (添加能力)를 클릭하여 Alipay 로그인을 활성화하기 전에 "제3자 애플리케이션 인가" (第三方应用授权), "회원 정보 가져오기" (获取会员信息) 및 "앱 Alipay 로그인" (App 支付宝登录)을 추가하세요.
Alipay 고객 센터로 이동하여 Alipay 개발자 계정으로 로그인하세요. 상단바에서 "계정 센터" (账号中心)를 클릭하고 사이드바 하단에서 찾을 수 있는 "APPID 바인딩" (APPID 绑定)으로 이동하세요. 4단계에서 생성한 웹 애플리케이션의 APPID를 입력하여 "바인딩 추가" (添加绑定)를 하세요.
"앱 Alipay 로그인"의 "서명" 버튼을 클릭하고 가이드를 따라 서명 과정을 완료하세요. 이 단계를 완료하면 5단계에서 추가한 기능이 작동하는 것을 볼 수 있습니다.
Alipay 오픈 플랫폼 콘솔 페이지로 돌아가서 "개발 정보" (开发信息) 섹션에서 "인터페이스 서명 방법" (接口加签方式（密钥/证书）)을 찾을 수 있습니다. "설정" (设置) 버튼을 클릭하면 서명 방법을 설정하는 페이지로 이동합니다. "공개 키" (公钥)는 선호되는 서명 모드이며, 생성한 공개 키 파일의 내용을 텍스트 입력 상자에 입력하세요.
Alipay 콘솔 페이지 하단의 "설정" (设置) 버튼을 클릭하여 "인가 리디렉션 URI" (授权回调地址)를 설정하세요. ${your_logto_origin}/callback/${connector_id}는 Logto 코어에서 사용되는 기본 리디렉션 URI입니다. connector_id는 Logto 관리자 콘솔 커넥터 세부 정보 페이지의 상단 바에서 찾을 수 있습니다.
모든 단계를 완료한 후, 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'으로 대체하고 개인 키 파일의 헤더와 푸터를 제거하지 마세요.
- 7단계의 "Alipay 앱 생성 및 구성"에서 선택한 공개 키 서명 모드에 따라 signType 필드를 'RSA2'로 작성하세요.
- charset 필드를 'gbk' 또는 'utf8'로 작성하세요. 이 필드는 선택 사항이므로 비워둘 수 있습니다. 기본값은 'utf8'로 설정되어 있습니다.
- scope 필드를 'auth_base' 또는 'auth_user'로 작성하세요. 이 필드는 선택 사항이므로 비워둘 수 있습니다. 기본값은 'auth_user'로 설정되어 있습니다. 차이점을 확인할 수 있습니다.

구성 유형

이름	유형	열거형 값
appId	string	N/A
privateKey	string	N/A
signType	enum string	'RSA' \| 'RSA2'
charset	enum string (OPTIONAL)	'gbk' \| 'utf8' \| undefined
scope	enum string (OPTIONAL)	'auth_user' \| 'auth_base'

Alipay 웹 커넥터 테스트

이제 완료되었습니다. 로그인 경험에서 소셜 커넥터 활성화를 잊지 마세요.

Alipay 웹 커넥터가 활성화되면 웹 앱을 빌드하고 실행하여 작동하는지 확인할 수 있습니다.

참고 자료

Alipay 문서 - 접근 준비 - 앱 생성 방법

Alipay 문서 - 웹 & 모바일 애플리케이션 - 앱 생성

시작하기​

Alipay 개발자 계정 등록​

Alipay 앱 생성 및 구성​

Logto Alipay Web 커넥터 설정​

구성 유형​

Alipay 웹 커넥터 테스트​

참고 자료​