Experience Cloud 사이트에 Single Sign-on (SSO) 추가하기

Experience Cloud 사이트에 Salesforce as a Service Provider and Identity Provider로 Single Sign-on (SSO) 추가하는 방법을 알아보도록 하겠습니다.

 

SSO란

Single Sign-On의 약자로 한번의 로그인으로 다수의 애플리케이션 및 웹 사이트들을 자동적으로 접속하여 이용하는 방법을 말합니다 (참고: SSO란 by 김정석님). Salesforce에서 SSO를 설정하면, 사용자가 별도로 로그인할 필요 없이 다른 시스템을 신뢰해 인증할 수 있습니다. 사용자를 인증하는 시스템은 ID 공급자(Identity Provider), 인증을 맡기는 시스템은 서비스 제공자(Service Provider)라고 합니다.

 

예를 들어, Google을 ID 공급자로 설정하면 사용자는 Google 계정으로 Salesforce에 로그인할 수 있습니다. 이 경우 Salesforce는 서비스 제공자로서 Google을 신뢰해 사용자 인증을 처리합니다. Salesforce는 ID 공급자와 서비스 제공자 역할을 모두 수행할 수 있으며, SAML이나 OpenID Connect 같은 프로토콜을 사용해 SSO를 지원합니다. 또한 Facebook과 같은 사전 설정된 인증 공급자를 사용할 수도 있습니다. SSO 설정 후에는 싱글 로그아웃(SLO)도 설정해, 한 번의 로그아웃으로 ID 공급자와 서비스 제공자에서 동시에 로그아웃되도록 할 수 있습니다.

 

시나리오

Experience Cloud 사이트에 SSO(Single Sign-On)를 설정하여 Salesforce Org B 계정으로 Org A에 있는 Experience Cloud 사이트에 회원가입 및 로그인한다.

• Service Provider (SP): SSO 로그인을 도입을 할 서비스 제공자. 오늘 포스트에서는 여러분의 Experience Cloud Site가 Service Provider 입니다 (Org A).
• Identity Provider (IP) = Authentication Provider: 나에 대한 인증 서비스를 제공해주는 곳. 다른 Salesforce 오그 아이디로 로그인할 수 있게 하는 시나리오이니 Org B가 Identity Provider 입니다.

 

SSO 세팅

APEX (Registration Handler)

global with sharing class SalesforceRegistrationHandler implements Auth.RegistrationHandler {

    global User createUser(Id portalId, Auth.UserData data) {
        User u              = new User();
        u.username          = data.username + '.ssouser';
        u.email             = data.email;
        u.firstName         = data.firstName;
        u.lastName          = data.lastName;
        u.alias             = data.username.substring(0, 5);
        u.profileId         = [SELECT Id FROM Profile WHERE Name = 'Partner User' LIMIT 1].Id;
        u.timeZoneSidKey    = 'Asia/Seoul';
        u.localeSidKey      = 'en_US';
        u.emailEncodingKey  = 'UTF-8';
        u.languageLocaleKey = 'en_US';
        return u;
    }

    public class RegistrationException extends Exception {}

}

Registration Handler는 SSO로 최초 로그인 시 유저 생성 로직을 담당하는 Apex Class를 의미합니다. SSO 사용 시 넘어온 Username를 사용하면 무조건 중복 에러가 뜨니 이를 처리하기 위해서 Registration Handler를 반드시 개발해주어야 합니다.

먼저 만들어주고 밑에서 기본 설정 시 사용할 예정입니다.

• 100% 작동하는 로직이 아닙니다.
• 비즈니스마다 회원가입을 어떻게 처리할 지 다를뿐만 아니라 어떤 정보를 기준으로 이미 존재하는 고객인지 파악도 필요합니다.
• 유저 생성 시 Account 생성 후 Contact를 생성합니다.
• Contact 생성 후 User 생성 시 ContactId애 방금전에 생성한 ContactId를 맵핑해주면 됩니다.

 

 

Admin Setup

Auth.Providers (기본 세팅)

Setup -> Auth. Providers -> New -> Provider Type -> Salesforce

• Name은 현재 새롭게 설정하는 Auth. Provider의 이름.
• URL Suffix는 유저가 SSO 로그인 버튼을 누르면 이동되는 페이지를 구성하는 URL 뒷부분을 의미.
• Registration Handler는 SSO로 최초 로그인 시 유저 생성 로직을 담당하는 Apex Class를 의미합니다. SSO 사용 시 넘어온 Username를 사용하면 무조건 중복 에러가 뜨니 이를 처리하기 위해서 Registration Handler를 반드시 개발해주어야 합니다.

 

Test-Only Initialization URL 테스트

위 설정이 제대로 됬는지 확인해보기 위해서 Salesforce Configuration 섹션의 Test-Only Initialization URL로 이동합니다.

 

Test-Only Initialization URL로 이동

Org B의 계정으로 로그인을 해봅니다.

 

XML 결과 확인

<user>
    <full_name>로이터링</full_name>
    <provider>Salesforce</provider>
    <v>00D5h000005GafC</org_id>
    <link>https://login.salesforce.com/id/00D90000000Jeb7EAC/0050o00000ZV0XdAAL</link>
    <last_name>로</last_name>
    <id>00D90000000Jeb7EAC0050o00000ZV0XdAAL</id>
    <portal_id>000000000000000</portal_id>
    <locale>ko_KR</locale>
    <first_name>이터링</first_name>
    <email>yoondev83@gmail.com</email>
    <username>yoondev83@gmail.com</username>
</user>

• username은 로그인에 사용된 username 정보를 담고있습니다.
• 세일즈포스는 오그에 상관없이 username은 전세계적으로 유니크 해야하는 정책이 있습니다. 이 말은 위에서 언급한 Handler가 없으면 저 username으로 그대로 가입을 진행을 할 것이고 중복된 username이란 에러로 실패가 됩니다.

 

Experience Cloud Site Builder에서 SSO 컴포넌트 넣기

LWC (PartnerSso)

간단하게 로그인 페이지에 사용할 SSO 버튼을 만들어 보겠습니다.
위 스크린샷의 Salesforce Configuration에 있는 Single Sign-On Initialization URL 값이 필요합니다.

<template>
    <div class="login-container">
        <lightning-button label="Login with Salesforce" onclick={handleLogin}></lightning-button>
    </div>
</template>


import {LightningElement} from 'lwc';

export default class PartnerSso extends LightningElement {
    handleLogin() {
        const loginUrl = 'https://mindful-unicorn-1qzzep-dev-ed.my.site.com/services/auth/sso/loginwithsalesforce';
        window.location.href = loginUrl;
    }
}

.login-container{
    text-align: center;
}

 

SSO 버튼 컴포넌트 추가하기

컴포넌트를 추가하였으면 Publish를 눌러줍시다.

 

로그인 테스트

위 이미지는 글 작성 후 이해를 돕고자 나중에 추가되었습니다. 위의 유저 이름과 하단의 유저 이름이 다르니 참고부탁드립니다.

 

반영해준 사이트에 접속하여 로그인 페이지로 이동합니다.
로그인 페이지로 이동하면 방금전에 반영한 SSO 컴포넌트가 보입니다. 클릭 후 로그인 진행해보도록 하겠습니다.

혹은 제가 만들어둔 사이트로 테스트 해보실 수도 있습니다 (여기).

 

로그인 하실때는 Org B의 계정으로 진행해주시면 됩니다.

 

위의 메인으로 이동하고 우측 상단에 유저가 보인다면 성공한것입니다.

 

생성된 유저 확인

Org B의 유저로 Org A로 성공적으로 등록된걸 확인할 수 있습니다.

 

SAME ORG SSO 에러

혹시 위의 화면이 뜨나요?
여러분은 이미 Org A에 Admin의 계정으로 로그인한 상태로 Org ASSO를 시도하여 위 오류가 발생하였습니다.
간단히 로그아웃을 한 후 다시 시도해보거나 시크릿 모드를 열어 다시 시도해보시면 됩니다.

 

 

마무리

개발 오그에서는 무난하게 위의 설정만으로도 손쉽게 SSO가 되지만 운영 오그나 그 외 알 수 없는 이유로 SSO가 되지 않고 에러 페이지로 이동하는 경우가 있습니다. 오류들은 일반적으로 Expired authorization code, Remote Access Error, Invalid Grant 이런 경우가 많습니다.

 

위의 오류가 발생하는 경우 해결하기 위해 좀 더 복잡한 설정을 요구하고 있습니다. 
이 내용은 다음 포스트를 통해서 다루도록 하겠습니다.

참조

https://help.salesforce.com/s/articleView?id=sf.sso_about.htm&type=5

https://medium.com/twolinecode/sso%EB%9E%80-by-%EA%B9%80%EC%A0%95%EC%84%9D%EB%8B%98-62b5cc0da90d
https://help.salesforce.com/s/articleView?id=sf.sso_sfdc_sp_rp_parent.htm&type=5