React应用中使用Dailymotion JS SDK无法登录用户问题

核心结论：必须手动处理回调页面 #

Dailymotion JS SDK不会自动完成回调后的会话绑定，你需要在回调URL对应的页面中手动执行会话处理逻辑。

具体排查与解决步骤 #

1. 确认回调URL的配置与一致性 #

• 登录Dailymotion开发者后台，检查你的应用配置中的回调URL是否和React应用中实际使用的完全一致（包括协议、域名、端口，开发环境要明确填写http://localhost:xxxx这类地址）。
• 回调URL必须对应React应用中已存在的路由（比如/dm-callback），不能指向空白或不存在的页面。

2. 在回调页面添加会话处理逻辑 #

在回调路由对应的React组件中，当SDK加载完成后调用window.DM.handleAuthentication()，完成会话的存储与验证：

import { useEffect } from 'react';
import { useScript } from './your-hooks-path';

const DmCallbackPage = () => {
  const status = useScript('https://api.dmcdn.net/all.js');

  useEffect(() => {
    if (status === 'ready') {
      window.DM.handleAuthentication((response) => {
        if (response.session) {
          // 可将会话信息存入localStorage或状态管理工具
          localStorage.setItem('dm_session', JSON.stringify(response.session));
          // 跳转回应用主页面
          window.location.href = '/';
        } else {
          console.error('登录失败:', response.error);
        }
      });
    }
  }, [status]);

  return <div>正在处理登录...</div>;
};

export default DmCallbackPage;

3. 调整response_type适配你的场景 #

你当前使用的response_type: "code"是授权码模式，需要后端服务配合交换access token。如果是纯前端应用，建议改为隐式授权模式：

window.DM.login(
  function (response) {
    if (response.session) {
      console.log('登录成功', response);
    } else {
      console.log('登录取消', response);
    }
  },
  {
    client_id: my_id,
    scope: "read write",
    response_type: "token", // 改为token
    redirect_uri: "你的回调URL" // 必须明确指定，和后台配置一致
  }
)

隐式模式下，SDK会直接通过回调URL的哈希参数获取token，配合handleAuthentication即可自动完成会话绑定。

4. 检查SDK加载与调用时机 #

• 确认你的useScript hook确实在脚本完全加载完成后才返回ready状态，避免在SDK未初始化时调用getLoginStatus或login。
• 调用getLoginStatus前，确保页面没有缓存旧的SDK状态，可在组件挂载时重新检查：

useEffect(() => {
  if (status === 'ready') {
    window.DM.getLoginStatus((response) => {
      console.log('登录状态:', response);
    });
  }
}, [status]);

5. 排查跨域与Cookie限制 #

• 现代浏览器默认阻止第三方Cookie，Dailymotion的会话Cookie可能无法正常存储。可在开发环境临时开启浏览器的第三方Cookie允许，或考虑手动存储access token，通过window.DM.setAccessToken(token)手动设置会话：

// 从localStorage取出之前存储的token
const savedToken = JSON.parse(localStorage.getItem('dm_session'))?.access_token;
if (savedToken && status === 'ready') {
  window.DM.setAccessToken(savedToken);
}

内容的提问来源于stack exchange，提问作者sqr