로그인 연동

로그인 연동 — 소스라이브 플레이어

게스트가 채팅·쿠폰 등 로그인이 필요한 기능에 접근할 때, 플레이어가 전송하는 sauceflexMoveLogin 이벤트를 수신하여 자사몰의 로그인 흐름으로 연결합니다.

⏱ 예상 소요 시간: 15분

📋 사전 조건: 브릿지 이벤트 연동 완료

언제 이벤트가 발생하나요?

소스라이브 플레이어에서 아래 기능은 로그인한 회원만 사용할 수 있습니다. 게스트가 접근 시 로그인 유도 UI가 표시되고, sauceflexMoveLogin 이벤트가 자사몰로 전송됩니다.

▲ 게스트가 로그인 필요 기능 클릭 시 표시되는 플레이어 UI

로그인이 필요한 기능: 채팅 참여, 쿠폰 다운로드, 리워드 신청 등

동작 흐름

이벤트 수신 후 자사몰의 로그인 페이지로 이동시키고, 로그인 완료 후 returnUrl을 통해 플레이어로 다시 돌아오게 합니다.

🔐 로그인 버튼 클릭

→

📨 sauceflexMoveLogin 수신

→

🔀 로그인 페이지 이동

→

✅ returnUrl로 복귀

구현 방법

실행 환경에 맞는 탭을 선택하세요. sauceflexMoveLogin은 params 없이 이벤트 수신 자체가 트리거입니다.

웹 (JavaScript) Android (Kotlin) iOS (Swift)

JavaScript — 리다이렉트 방식

window.addEventListener('message', (e) => {
  if (typeof e.data !== 'string') return
  const { key } = JSON.parse(e.data)

  switch (key) {
    case 'sauceflexMoveLogin': {
      // 현재 플레이어 URL을 returnUrl로 저장 후 로그인 페이지로 이동
      const returnUrl = window.location.href
      window.location.href = `/signin?returnUrl=${returnUrl}`
      break
    }
  }
})

⚡ returnUrl 활용: 로그인 완료 후 returnUrl에 담긴 플레이어 페이지로 리다이렉트하면 사용자가 라이브를 끊김 없이 이어서 시청할 수 있습니다.

Kotlin — @JavascriptInterface

// params 없는 이벤트 — 인자 없이 호출됨
@JavascriptInterface
fun sauceflexMoveLogin() {
    val returnUrl = webView.url ?: ""
    activity?.runOnUiThread {
        // 로그인 액티비티로 이동, returnUrl 전달
        val intent = Intent(context, LoginActivity::class.java)
        intent.putExtra("returnUrl", returnUrl)
        context.startActivity(intent)
    }
}

💡 params 없는 이벤트는 인자가 없는 메서드로 정의합니다. WebView의 현재 URL(webView.url)을 returnUrl로 활용하세요.

Swift — WKScriptMessageHandler

// 1. handler 등록 (WKWebView 설정 시)
contentController.add(self, name: "sauceflexMoveLogin")

// 2. 이벤트 수신 — params 없음, message.body는 null
func userContentController(
    _ userContentController: WKUserContentController,
    didReceive message: WKScriptMessage
) {
    switch message.name {
    case "sauceflexMoveLogin":
        let returnUrl = webView.url?.absoluteString ?? ""
        DispatchQueue.main.async {
            // 로그인 화면으로 이동, returnUrl 전달
            let loginVC = LoginViewController()
            loginVC.returnUrl = returnUrl
            self.navigationController?.pushViewController(loginVC, animated: true)
        }
    default: break
    }
}

💡 params 없는 이벤트는 message.body가 null입니다. message.name으로 이벤트를 구분하고, webView.url을 returnUrl로 활용하세요.

이벤트 데이터

sauceflexMoveLogin는 별도의 데이터를 전송하지 않습니다. 이벤트 수신 자체가 트리거입니다.

필드	타입	설명
key	String	`"sauceflexMoveLogin"` 고정값
params	null	전달되는 파라미터 없음 (Void)

💡 로그인 완료 후 회원 정보를 플레이어에 전달하는 방법은 연동 방식에 따라 다릅니다.

라이브러리 방식 — 사용자 인증 가이드를 참고하여 setMemberObject() 또는 setMemberToken()을 호출하세요.
URL 방식 — 로그인 완료 후 accessToken 쿼리 파라미터를 포함한 플레이어 URL로 리다이렉트하세요. (URL 연동 가이드 참고)

다음 단계

🛍️ 상품 클릭 연동 — 플레이어 상품 클릭 시 자사몰 이동 방식 설정하기

→