Ruanm OAuth 配置

OAuth 集成示例

1. 基础参数配置

客户端 ID

重定向 URI

系统将在OAuth流程中自动处理权限范围和用户授权，您只需配置以上基础参数。

集成示例代码：

// 在页面加载时检查OAuth回调参数
window.addEventListener('load', function() {
    // 获取URL查询参数
    const urlParams = new URLSearchParams(window.location.search);
    
    // 提取OAuth回调参数
    const userInfo = urlParams.get('user_info');
    const accessToken = urlParams.get('access_token');
    const expiresIn = urlParams.get('expires_in');
    
    // 检查是否存在OAuth回调参数
    if (userInfo && accessToken) {
        try {
            // 解析用户信息（注意：需要先解码再解析JSON）
            const userInfoObj = JSON.parse(decodeURIComponent(userInfo));
            
            // 现在您可以使用这些信息了
            console.log('用户信息:', userInfoObj);
            console.log('访问令牌:', accessToken);
            console.log('有效期:', expiresIn, '秒');
            
            // 示例：显示用户姓名
            console.log('欢迎,', userInfoObj.name);
            
            // 示例：将访问令牌存储到localStorage供后续API调用使用
            localStorage.setItem('oauth_access_token', accessToken);
            
            // 示例：在页面上显示用户信息
            document.getElementById('username').textContent = userInfoObj.name;
            
        } catch (error) {
            console.error('解析OAuth回调参数时出错:', error);
        }
    }
});

2. 启动OAuth流程

点击下面的按钮启动 OAuth 流程。系统将自动处理用户授权和参数传递。

说明:

系统会自动构造授权URL并重定向用户。用户登录后，系统将自动完成令牌交换并传递用户信息到您的应用。

3. 自动处理

系统将自动处理令牌交换过程，您无需手动获取或输入授权码。

自动处理流程:

用户授权后，系统自动接收授权码
系统自动使用授权码交换访问令牌
系统自动获取用户信息
系统将用户信息自动发送到您的应用

4. 应用集成

在您的应用中接收用户信息，请确保您的重定向URI能够处理以下参数：

回调参数:

user_info: 包含用户基本信息的JSON对象
access_token: 访问令牌，有效期1小时
expires_in: 令牌过期时间（秒）

系统将在用户登录成功后自动将这些参数发送到您的重定向URI。

1. 简化流程

本系统采用简化的OAuth流程，您只需配置基础参数，其余步骤均由系统自动完成。

2. 自动处理

系统将自动处理授权码获取、令牌交换和用户信息获取，并将结果直接发送到您的应用。

3. 客户端凭证

在生产环境中，您需要向 Ruanm 开发者中心注册您的应用以获取客户端 ID 和密钥。