사용자 계정 연결 (클라이언트 측 JavaScript)

참고: 간행물에서 Google을 통한 구독의 다른 기능을 사용하는 경우 swg.js 클라이언트 측에서는 게시가 이미 구성되었고 Google을 통한 구독 개발자 사이트에 나와 있는 것처럼 라이브러리를 초기화했습니다. 구독 연결을 통해 Google을 통한 구독을 사용하는 것은 선택사항입니다.

구독 연결을 사용하면 클라이언트 측 JavaScript만 PPID와 독자의 Google 계정 간에 새 연결을 만들 수 있습니다. 구성된 페이지에서 구독을 연결하라는 대화상자가 독자에게 표시됩니다. 독자가 'Google 계정으로 계속' 버튼을 클릭하면 연결할 계정을 선택할 수 있으며 완료되면 구성된 페이지로 다시 이동합니다.

PPID를 리더의 계정과 연결하는 작업은 swg.js의 linkSubscription 메서드를 사용하여 실행됩니다. 이전 계정과 비슷한 용도입니다. 연결 기능 (예) 프로미스를 전달하는 대신 이 메서드는 PPID입니다.

코드 예시

다음 클라이언트 측 코드 예에서는 링크를 시작하는 방법, 유효한 응답의 모양, 선택적으로 swg.js eventManager를 사용하여 애널리틱스 이벤트를 리슨하고 적절하게 라우팅하는 방법을 보여줍니다.

구독 연결 대화상자 시작

const result = await subscriptions.linkSubscription({publisherProvidedId:6789})

참고: 사용자에게 무조건 메시지를 표시하지 마세요. 이전에 사이트를 방문한 사용자에게 이미 구독을 연결했으므로 사용자에게 다시 메시지를 표시하는 것을 최근에 구독 연결을 거부했습니다.

샘플 응답

성공적으로 연결된 계정의 유효한 응답에는 사용된 PPID이(가) 모두 포함됩니다. 부울 success 상태를 반환합니다.

console.log(result) //{publisherProvidedId: 6789, success: true}

구독 연결에는 활성 Google 세션 또는 서드 파티 쿠키. 이를 유연하게 를 사용하면 독자의 브라우저에서 언제든지 연결 환경을 시작할 수 있습니다. 구매 후뿐 아니라 경험을 개선하는 것입니다. 독자가 Google 계정을 통해 로그인하는 경우 절차의 일부로 등록할 수 있는 기회가 주어집니다.

전체 클라이언트 측 예시

<script
  async
  type="application/javascript"
  subscriptions-control="manual"
  src="https://news.google.com/swg/js/v1/swg.js">
</script>

<script>

  function linkSubscription(ppid) {
    self.SWG.push(async (subscriptions) => {
      try {
        const result = await subscriptions.linkSubscription({
          publisherProvidedId: ppid,
        })
        console.log(result)
      } catch(e) {
        console.log(e)
      }
    })
  }

  document.addEventListener('DOMContentLoaded', function () {
    (self.SWG = self.SWG || []).push(subscriptions => {
      subscriptions.init("PUBLICATION_ID");

      //Configure the event manager for analytics integration
      subscriptions.getEventManager().then(manager => {
        manager.registerEventListener((event) => {
            // Add code here to send the event to your analytics
            // sendToAnalytics(event);
          console.log(event);
        });
      });
    });

    document
      .querySelector("SELECTOR")
      .addEventListener('click', function(){
        linkSubscription(PPID)
      })
  });
</script>

OAuth 클라이언트 ID 만들기

구독 연결에 OAuth 클라이언트는 필요하지 않지만 OAuth 클라이언트는 프로젝트의 승인된 도메인 허용 목록을 작성하는 데 사용할 수 있습니다. 승인된 도메인은 클라이언트 측 JavaScript가 포함된 도메인 목록입니다. 전화를 걸 수 있는 국가입니다. 간행물에 이미 OAuth가 있을 수 있습니다. 게시자 센터에서 구성된 클라이언트 ID로, swg.js에서 사용할 수 있습니다.

• 구독 연결 클라이언트 측 자바스크립트 호출이 이전에 확인된 도메인 이름이 있는 경우 별도의 조치가 필요하지 않습니다.
• JavaScript가 새 도메인 이름에서 실행되는 경우 SwG OAuth 클라이언트 ID 구성 안내

를 통해 개인정보처리방침을 정의할 수 있습니다.

참고: OAuth 클라이언트 생성 및 사용은 Google을 통한 구독을 출시한 후 구독을 출시합니다.

테스트

정기 결제 연결의 클라이언트 측 구현을 테스트하려면 코드를 승인된 JavaScript 출처가 있는 서버에서 실행해야 합니다.

1. 프로덕션 사용의 경우 승인된 출처는 구성된 OAuth 클라이언트 또는 게시자 센터 내 게시 설정의 확인된 도메인 목록에서 가져올 수 있습니다.
2. 확인할 수 없는 도메인(예: localhost 또는 비공개 서버)을 사용하는 개발 또는 스테이징의 경우 구성된 OAuth 클라이언트에 도메인이 나열되어야 합니다.

참고: OAuth 클라이언트의 허용된 출처 목록에 도메인을 추가하면 30분이 지나야 사용할 수 있습니다.

핵심사항: 동일한 정기 결제 계정으로 계속 테스트하려면 Google의 내 계정 페이지를 사용하여 계정의 연결을 수동으로 해제할 수 있습니다.

오류 문제 해결하기

클라이언트 측 자바스크립트를 테스트할 때 가장 일반적인 문제는 JavaScript를 실행할 때 403 - Not Authorized 오류가 발생합니다. 해결 방법 자바스크립트가 유효한지 확인하기 위해 게시자 센터 또는 연결된 OAuth 클라이언트의 승인된 js 출처에 있어야 합니다.

다음 단계

클라이언트 측 JavaScript 통합을 완료하신 것을 축하합니다. 이제 서버 측 통합으로 이동할 수 있습니다. 이는 독자의 할 수 있습니다 필요한 서버 측 UpdateReaderEntitlements 함수를 구현하고 사용합니다. 뉴스가 제대로 표시되도록 있습니다.