로그인 연동
게스트가 채팅·쿠폰 등 로그인이 필요한 기능에 접근할 때, 플레이어가 전송하는 sauceflexMoveLogin 이벤트를 수신하여 자사몰의 로그인 흐름으로 연결합니다.
언제 이벤트가 발생하나요?
소스라이브 플레이어에서 아래 기능은 로그인한 회원만 사용할 수 있습니다. 게스트가 접근 시 로그인 유도 UI가 표시되고, sauceflexMoveLogin 이벤트가 자사몰로 전송됩니다.
로그인 하시겠습니까?
취소
로그인
▲ 게스트가 로그인 필요 기능 클릭 시 표시되는 플레이어 UI
로그인이 필요한 기능: 채팅 참여, 쿠폰 다운로드, 리워드 신청 등
동작 흐름
이벤트 수신 후 자사몰의 로그인 페이지로 이동시키고, 로그인 완료 후 returnUrl을 통해 플레이어로 다시 돌아오게 합니다.
🔐 로그인 버튼 클릭
→
📨 sauceflexMoveLogin 수신
→
🔀 로그인 페이지 이동
→
✅ returnUrl로 복귀
구현 방법
실행 환경에 맞는 탭을 선택하세요. sauceflexMoveLogin은 라이브 ID·상점 정보를 params로 함께 전달합니다. 로그인 페이지로 이동만 시킬 경우 params를 사용하지 않아도 되지만, 여러 상점을 운영하거나 복귀 URL을 직접 조립해야 한다면 활용하세요.
JavaScript — 리다이렉트 방식
window.addEventListener('message', (e) => { if (typeof e.data !== 'string') return const { key, params } = JSON.parse(e.data) switch (key) { case 'sauceflexMoveLogin': { // params: { broadcastId, shopId, shopName } — 로그인 요청 출처 const { shopId } = params ?? {} // 현재 플레이어 URL을 returnUrl로 저장 후 로그인 페이지로 이동 const returnUrl = window.location.href window.location.href = `/signin?returnUrl=${encodeURIComponent(returnUrl)}&shopId=${shopId ?? ''}` break } } })
⚡ returnUrl 활용: 로그인 완료 후
returnUrl에 담긴 플레이어 페이지로 리다이렉트하면 사용자가 라이브를 끊김 없이 이어서 시청할 수 있습니다. params.broadcastId로 복귀 URL을 직접 조립해도 됩니다.
Kotlin — @JavascriptInterface
// params가 JSON 문자열로 전달됨 — payload 인자를 반드시 선언 @JavascriptInterface fun sauceflexMoveLogin(payload: String?) { val params = JSONObject(payload ?: "{}") val broadcastId = params.optString("broadcastId", "") val shopId = params.optString("shopId", "") val returnUrl = webView.url ?: "" activity?.runOnUiThread { // 로그인 액티비티로 이동, returnUrl 전달 val intent = Intent(context, LoginActivity::class.java) intent.putExtra("returnUrl", returnUrl) intent.putExtra("broadcastId", broadcastId) intent.putExtra("shopId", shopId) context.startActivity(intent) } }
⚠️
payload 인자 선언 필수: 이 이벤트는 JSON 문자열 인자와 함께 호출됩니다. fun sauceflexMoveLogin()처럼 인자 없이 정의하면 시그니처가 맞지 않아 호출되지 않습니다. WebView의 현재 URL(webView.url)은 returnUrl로 그대로 활용할 수 있습니다.
Swift — WKScriptMessageHandler
// 1. handler 등록 (WKWebView 설정 시) contentController.add(self, name: "sauceflexMoveLogin") // 2. 이벤트 수신 — message.body에 params JSON 문자열이 담김 func userContentController( _ userContentController: WKUserContentController, didReceive message: WKScriptMessage ) { switch message.name { case "sauceflexMoveLogin": var broadcastId = "", shopId = "" if let body = message.body as? String, let data = body.data(using: .utf8), let params = try? JSONSerialization.jsonObject(with: data) as? [String: Any] { broadcastId = params["broadcastId"] as? String ?? "" shopId = params["shopId"] as? String ?? "" } let returnUrl = webView.url?.absoluteString ?? "" DispatchQueue.main.async { // 로그인 화면으로 이동, returnUrl 전달 let loginVC = LoginViewController() loginVC.returnUrl = returnUrl loginVC.broadcastId = broadcastId loginVC.shopId = shopId self.navigationController?.pushViewController(loginVC, animated: true) } default: break } }
⚠️
message.body는 null이 아닙니다: params JSON 문자열이 담기므로, body가 null인지로 이벤트를 분기하면 이 이벤트를 놓칩니다. 위 예시처럼 message.name으로 분기하고 body는 있을 때만 파싱하세요. webView.url은 returnUrl로 그대로 활용할 수 있습니다.
이벤트 데이터
sauceflexMoveLogin는 로그인 요청이 발생한 라이브와 상점 정보를 params로 전달합니다.
전달되는 데이터 구조
{
"key": "sauceflexMoveLogin",
"params": {
"broadcastId": "lkSHOP-12d3892e16c94c1282a7821d17de6c77",
"shopId": "SHOP001",
"shopName": "소스라이브 스토어"
}
}
| 필드 | 타입 | 설명 |
|---|---|---|
| key | String | "sauceflexMoveLogin" 고정값 |
| params.broadcastId | String | 로그인이 요청된 라이브 ID. 복귀 URL을 직접 조립할 때 활용합니다. |
| params.shopId | String | 라이브를 진행 중인 상점 ID. 여러 상점을 운영할 때 로그인 경로 분기에 활용합니다. |
| params.shopName | String | 상점 이름. 로그인 화면 안내 문구 등 표시용으로 활용합니다. |
💡 로그인 완료 후 회원 정보를 플레이어에 전달하는 방법은 연동 방식에 따라 다릅니다.
라이브러리 방식 — 사용자 인증 가이드를 참고하여
URL 방식 — 로그인 완료 후
라이브러리 방식 — 사용자 인증 가이드를 참고하여
setMemberObject() 또는 setMemberToken()을 호출하세요.URL 방식 — 로그인 완료 후
accessToken 쿼리 파라미터를 포함한 플레이어 URL로 리다이렉트하세요. (URL 연동 가이드 참고)
Updated about 1 hour ago
Did this page help you?