跨域API客户端示例

登录状态

用户信息

加载中...

使用说明

这个示例演示了如何使用跨域API获取用户信息，支持不同顶级域名环境。主要功能包括：

• 自动检查用户登录状态
• 获取用户详细信息
• 支持跨域Cookie共享
• 支持不同顶级域名间的认证（通过令牌机制）
• 提供登出功能
• 自动跳转到主站登录
• 本地存储令牌作为备份验证方式

注意：该示例需要在授权的域名下运行才能正常工作。对于非同顶级域名，系统会自动使用令牌机制来保持用户认证状态。

集成步骤

1. 在你的页面中引入客户端JS库：

<script src="https://id.rutno.com/ssoapi/client_example.js"></script>

2. 创建必要的HTML元素：

<p>当前状态: <strong id="login-status">检查中...</strong></p>
<pre id="user-info">加载中...</pre>

3. 初始化跨域认证客户端：

// 创建认证客户端实例
const authClient = new CrossDomainAuthClient({
    // 可选配置
    apiBase: 'https://id.rutno.com/ssoapi/auth', // API基础URL
    loginBase: 'https://id.rutno.com/login.php', // 登录页面URL
    autoLogin: true, // 自动检查登录状态
    
    // 回调函数
    onLogin: function(userInfo) {
        // 登录成功回调
        document.getElementById('login-status').textContent = '已登录';
        document.getElementById('user-info').textContent = JSON.stringify(userInfo, null, 2);
    },
    onLogout: function(reason) {
        // 登出回调
        document.getElementById('login-status').textContent = '未登录';
        document.getElementById('user-info').textContent = '';
    },
    onAuthError: function(error) {
        // 认证错误回调
        console.error('跨域认证错误:', error);
        // 可以在这里显示错误提示或执行恢复操作
    }
});

// 绑定登录按钮事件
document.getElementById('login-btn').addEventListener('click', function() {
    // 跳转到主站登录页面
    authClient.redirectToLogin();
});