소셜 로그인 구현

PWA Kit는 구매자를 위해 소셜 로그인을 사용할 수 있는 옵션과 함께 즉시 제공됩니다. PWA(Progressive Web App) Kit사이트에 이 기능을 포함하여 구매자 경험을 개선하십시오. 구매자는 소셜 로그인을 통해 소셜 네트워크 계정으로 사이트에 빠르게 로그인하고 프로필을 생성할 수 있습니다.

데모 사이트에서는 소셜 로그인의 기본 구현을 보여 줍니다.

PWA Kit 사이트에 대한 소셜 로그인을 활성화하고 구성하려면 이 가이드의 단계를 따르십시오. 이 가이드에서는 URL https://www.example.com이 있는 예제 스토어프런트를 사용합니다. 도메인 이름으로 바꿉니다example.com .

소셜 로그인은하이브리드 스토어프런트에서 지원되지 않습니다.

Note

지원되는 IdP

PWA Kit는지원되는 ID 공급자아래에 나열된 ID 공급자(IdP)를 지원합니다.

필수 구성 요소를충족하는 경우 Google 및 Apple 소셜 로그인은 기본적으로 Retail React App에서 사용할 수 있습니다.

사전 요구 사항

소셜 로그인을 사용하려면:

Composable Storefront 및Retail React App버전 6.0 이상을 사용하여 사이트를 빌드합니다.
선택한 IdP를 추가하려면ID 공급자 등록의 단계를 완료합니다.
구매자 로그인 및 API 액세스(SLAS) 클라이언트를 구성합니다 . 클라이언트의 리디렉션 URI 필드에 소셜 로그인 플로우에서 사용할 리디렉션 URI를 입력합니다. 기본적으로 PWA Kit는 경로로 사용합니다/social-callback . 예를 들어 도메인이example.com인 경우 를 입력합니다https://www.example.com/social-callback . 실제 도메인으로 바꿉니다example.com .

PWA Kit에서 소셜 로그인 구성

a. 업데이트 template-retail-react-app/config/default.js

PWA Kit 프로젝트에서 소셜 로그인을 구성하려면 이 예와 같이 업데이트template-retail-react-app/config/default.js합니다.

PWA Kit 프로젝트에 구성된 리디렉션 URI 경로가 SLAS 클라이언트에 구성된 경로와 일치하는지 확인합니다. SLAS 클라이언트는 전체 URI에 와일드카드를 사용할 수 있지만 경로가 정확히 일치해야 합니다.

1module.exports = {
2    app: {
3        login: {
4            social: {
5               
6               // Enable social login and add your chosen IdPs and Redirect URI.
7                enabled: true,
8                idps: ['Google', 'Apple'],
9                redirectURI: '/social-callback' // relative path
10            }
11            // More code here...
12            
13         sites,
14         commerceAPI: {
15            proxyPath: `/mobify/proxy/api`,
16            parameters: {
17            
18            // Add your clientId, organizationId, short code, and siteId.
19                clientId: 'c9c45bfd-0ed3-4aa2-9971-40f88962b836',
20                organizationId: 'f_ecom_zzrf_001',
21                shortCode: '8o7m175y',
22                siteId: 'RefArchGlobal'
23            }
24
25           // More code here...

b. 선택 사항: 환경 변수를 사용하여 리디렉션 URI 설정

소셜 로그인에 대한 환경 변수의 값은 에 추가한 모든 값을 재정의합니다template-retail-react-app/config/default.js .

Note

선택적으로 대신 환경 변수를template-retail-react-app/config/default.js사용하여 리디렉션 URI를 설정할 수 있습니다. 소셜 로그인을 활성화하고 IdP를 설정하는 데 사용합니다template-retail-react-app/config/default.js . 리디렉션 URI를 설정하도록 이 환경 변수를 구성합니다.

SOCIAL_LOGIN_REDIRECT_URI

환경 변수를 참조하십시오.

지원되는 IdP에 대한 아이콘 추가

기본적으로 PWA Kit는 파일의 구성 요소template-retail-react-app/app/components/social-login/index.jsx에서SocialLogin Google 및 Apple 소셜 로그인에 대한 아이콘을 가져오고 구성합니다. 사이트에는지원되는 다른 IdP에 대한 아이콘을 포함할 수 있습니다. 이렇게 하려면 다음 단계를 완료하십시오.

**a. 구성요소로 아이콘 가져오기Import Icons into the SocialLogin Component **

이 예에서는 Facebook 아이콘을 구성 요소로SocialLogin가져옵니다.

1// Icons
2import {AppleIcon, GoogleIcon, FacebookIcon} from '@salesforce/retail-react-app/app/components/icons'

b. 개체 확장IDP_CONFIG

IDP_CONFIG구성 요소의 개체를SocialLogin사용하여 추가 소셜 로그인을 위한 버튼을 표시하며, 각 버튼에는 해당 아이콘과 현지화된 메시지가 있습니다.

이 예에서는 Facebook에 대한 구성을 추가합니다. 각 IdP 키가 선택한 IdP의 소문자 이름과 일치하는지 확인합니다.

1const IDP_CONFIG = {
2    apple: {
3        icon: AppleIcon,
4        message: defineMessage({
5            id: 'login_form.button.apple',
6            defaultMessage: 'Apple'
7        })
8    },
9    google: {
10        icon: GoogleIcon,
11        message: defineMessage({
12            id: 'login_form.button.google',
13            defaultMessage: 'Google'
14        })
15    },
16    facebook: {
17        icon: FacebookIcon,
18        message: defineMessage({
19            id: 'login_form.button.facebook',
20            defaultMessage: 'Facebook'
21        })
22    }
23}

소셜 로그인에 대한 모범 사례

보안 모범 사례에 따라 구매자 계정을 보호하십시오. 예:
- 임베디드 CDN(eCDN)을 사용하는 경우eCDN 속도 제한 규칙을적용할 수 있습니다.
- Cloudfare와 같은 타사 CDN(콘텐츠 전송 네트워크)을 사용하는 경우위협 점수로 요청을 차단할 수 있습니다.
구매자의 인증 옵션 사용을 추적하고 문제를 효율적으로 진단합니다. 예를 들어Log Center를 사용하여 MRT(Managed Runtime) 및 B2C Commerce 인스턴스의 로그에 액세스합니다.
B2C Commerce ID와 타사 IdP를 모두 보유한 구매자가 중복 계정을 생성하지 않고 원활하게 로그인할 수 있도록 Shopper Login and API Access Service(SLAS)에서구매자 프로필을 병합합니다.

:::참고

구성loginMergeClaims하기 전과 구매자가 사이트에 로그인하기 전에 두 프로필이 모두 존재하는 경우 병합이 수행되지 않습니다. 계정은 소급하여 병합할 수 없습니다.
구매자 프로필 병합 가이드의 단계는 B2C Commerce 프로필과 타사 IdP의 로그인 ID가 동일한 구매자에게 적용됩니다.

:::

프로필 병합 및 지원되는 사용 사례에 대한 자세한 내용은구매자 프로필 병합을참조하십시오.

소셜 로그인 문제 해결

이 섹션에서는 소셜 로그인과 관련하여 발생할 수 있는 몇 가지 일반적인 오류에 대해 제안된 해결 방법을 제공합니다.

구매자가 로그인할 수 없음

**잠재적 원인:**소셜 로그인 구성이 잘못되었습니다.

제안된 솔루션: PWA Kit 프로젝트에 구성된 리디렉션 URI 경로가 SLAS 클라이언트에 구성된 경로와 일치하는지 확인합니다. 소셜 로그인 구성의 내용을 참조하십시오.

구매자 프로필 충돌 발생

**잠재적 원인:**구매자는 B2C Commerce와 타사 IdP에 대해 별도의 프로필을 갖습니다.

제안된 솔루션:구매자 프로필 병합의 단계에 따라 B2C Commerce 및 타사 IdP에 등록된 구매자의 레코드를 병합합니다.