(기존) 새로 고침 없이 로그인 및 로그아웃 tefresh-less-login-and-logout

개요 overview

웹 애플리케이션의 경우 사용자 인증 및 로그아웃을 위해 가능한 몇 가지 시나리오를 고려해야 합니다. MVPD를 인증하려면 사용자가 MVPD 웹 페이지에 로그인해야 하며, 다음과 같은 추가 요소가 작용합니다.

Adobe Pass 인증 2.7 이전에는 이러한 모든 사용자 인증 시나리오에 프로그래머 페이지의 전체 페이지 새로 고침이 포함되었습니다.2.7 및 이후 릴리스의 경우 Adobe Pass 인증 팀은 이러한 흐름을 개선하여 사용자가 로그인 및 로그아웃 중에 앱에서 페이지 새로 고침을 경험할 필요가 없도록 했습니다.

자세한 설명 detailed_description

원래 인증 및 로그아웃 흐름에 대한 요약으로 시작한 다음 개선된 인증 및 로그아웃 흐름에 따라 설명하겠습니다. 처음 네 개의 섹션은 일반적인 MVPD(비 TempPass)를 처리하는 반면, 마지막 섹션은 TempPass에 적용해야 하는 특수 구현을 설명합니다.

원래 인증/로그아웃 흐름 orig_authn

인증

Adobe Pass 인증 웹 클라이언트에는 MVPD의 요구 사항에 따라 두 가지 인증 방법이 있습니다.

displayProviderDialog 콜백(getAuthentication/getAuthorization에 의해 트리거됨)은 MVPD 목록과 해당 설정을 반환합니다. MVPD의 iFrameRequired 속성을 사용하면 프로그래머가 흐름 1을 활성화해야 하는지 흐름 2를 활성화해야 하는지 알 수 있습니다. 프로그래머는 흐름 2에 대해서만 추가 작업(iFrame/팝업 생성)을 수행해야 합니다.

인증 취소

사용자가 로그인 페이지를 닫아 인증 흐름을 명시적으로 취소하는 상황도 있다. 다음은 프로그래머에게 제안된 시나리오와 솔루션입니다.

원래 로그아웃 흐름 orig_logout

AccessEnabler의 로그아웃 API는 라이브러리의 로컬 상태를 지우고 현재 탭/창에 MVPD의 로그아웃 URL을 로드합니다. 브라우저는 MVPD의 로그아웃 끝점으로 이동하고 프로세스가 완료되면 사용자는 프로그래머 웹 사이트로 다시 리디렉션됩니다. 사용자를 대신하여 필요한 유일한 작업은 로그아웃 단추/링크를 누르고 흐름을 시작하는 것입니다. MVPD의 로그아웃 끝점에는 사용자 상호 작용이 필요하지 않습니다.

페이지를 새로 고치는 원래 인증/로그아웃 흐름

향상된(새로 고침 불필요) 인증 improved_authn

위에서 설명한 인증(로그인) 및 로그아웃 흐름 모두 각 흐름이 완료된 후 기본 페이지를 다시 로드하여 유사한 사용자 경험을 제공합니다. 현재 기능은 새로 고침 없는(백그라운드) 로그인 및 로그아웃을 제공하여 사용자 경험을 개선하는 것을 목표로 합니다. 프로그래머는 두 개의 부울 플래그(backgroundLogin 및 backgroundLogout)를 configInfo API의 setRequestor 매개 변수에 전달하여 백그라운드 로그인 및 로그아웃을 활성화/비활성화할 수 있습니다. 기본적으로 백그라운드 로그인/로그아웃은 비활성화됩니다(이전 구현과의 호환성을 제공).

예:

    var configInfo = {
        callSetConfig: true,
        backgroundLogin: true,
        backgroundLogout: true
    };
    accessEnabler.setRequestor(REQUESTOR_ID, null, configInfo);

인증

다음은 원래 인증 흐름과 향상된 흐름 간의 전환을 설명하는 지점입니다.

인증 취소

다음은 인증을 취소하기 위한 흐름입니다.

로그아웃 플로우 개선 improved_logout

새 로그아웃 흐름은 숨겨진 iFrame에서 수행되므로 전체 페이지 리디렉션을 제거합니다. 이는 사용자가 MVPD의 로그아웃 페이지에서 특정 작업을 수행할 필요가 없기 때문에 가능한 것입니다.

로그아웃 흐름이 완료되면 iFrame을 사용자 지정 Adobe Pass 인증 끝점으로 리디렉션합니다. 이렇게 하면 부모에 대해 window.postMessage을(를) 수행하는 JS 코드 조각이 제공되어 AccessEnabler에 로그아웃이 완료되었음을 알립니다. setAuthenticationStatus() 및 sendTrackingData(AUTHENTICATION_DETECTION ...) 콜백이 트리거되어 사용자가 더 이상 인증되지 않음을 나타냅니다.

아래 그림은 사용자가 애플리케이션의 기본 페이지를 새로 고치지 않고 MVPD에 로그인할 수 있도록 하는 새로 고침 없는 흐름을 보여 줍니다.

향상된(새로 고침 안 함) 인증/로그아웃 흐름

TempPass 흐름 improved_temppas

새로 고침 없는 로그인은 TempPass 유형의 MVPD에 대해 다른 접근 방식을 따릅니다.

TempPass 흐름에서는 명시적인 사용자 상호 작용 없이 창을 자동으로 만들고 닫아야 하므로 일부 브라우저(팝업 차단기)에 문제가 발생할 수 있습니다. 따라서 AccessEnabler는 프로그래머가 생성한 웹 컨테이너를 필요로 하지 않고 백그라운드에서 로그인 단계를 구현합니다.

새로 고침 없는 로그인 및 로그아웃을 위해 TempPass를 구현할 때 프로그래머가 알아야 하는 측면은 다음과 같습니다.

다음 코드 샘플은 프로그래머 웹 사이트에서 MVPD 창을 처리하는 방법을 보여 줍니다(일반 MVPD와 TempPass의 경우 모두).

    var aeHostname = "https://entitlement.auth.adobe.com";
    var mvpdWindow = null;
    var mvpd = <mvpd_object_from_displayProviderDialog>;
    var useIframeLogin = <boolean_depending_on_browser_or_Programmer_preferences>;
    var backgroundLogin = <boolean_depending_on_Programmer_preferences>;

    // Do not create any windows for refreshless and temp pass
    if (!(backgroundLogin && mvpd.tempPass)) {
        if (backgroundLogin && !mvpd.popup) {
            mvpdWindow = window.open(aeHostname, "mvpdwindow");
        } else if (mvpd.popup && !useIframeLogin) {
            var width = mvpd.width;
            var height = mvpd.height;
            // Center on screen
            var top = (document.all) ? window.screenTop : window.screenY + 100;
            var left = (document.all) ? window.screenLeft : window.screenX + window.innerWidth / 2 - width / 2;

            mvpdWindow = window.open(aeHostname, "mvpdframe",
                           "width=" + width + ",height=" + height + ",top=" + top + ",left=" + left);
            // Monitor the mvpd popup for close
            if (!backgroundLogin) {
                clearInterval(cancelTimer);
                cancelTimer = setInterval(function () {
                    if (mvpdWindow && mvpdWindow.closed) {
                        clearInterval(cancelTimer);
                        $('#mvpddiv').hide();
                        accessEnablerAPI.setSelectedProvider(null);
                    }
                }, 200);
            }
        }
    }