uniapp如何实现小红书登录并获取用户头像和昵称信息

在uniapp中如何实现小红书第三方登录功能？需要获取用户授权后的头像和昵称信息，请问具体的实现步骤是什么？是否需要引入官方SDK或调用特定API？有没有完整的代码示例可以参考？过程中可能会遇到哪些常见问题需要注意？

2 回复

使用uni-app实现小红书登录，可调用uni.login获取code，再通过后端服务调用小红书OAuth接口换取access_token，最后调用用户信息接口获取头像和昵称。需在小红书开放平台注册应用并配置授权域名。


在 UniApp 中实现小红书登录并获取用户头像和昵称信息，需通过第三方登录 SDK 或 OAuth 2.0 授权流程。以下是步骤和示例代码：

实现步骤

  1. 注册小红书开放平台应用：获取 client_id 和 redirect_uri。
  2. 集成 SDK 或使用 OAuth 2.0：推荐使用官方 SDK（如有）或 OAuth 网页授权。
  3. 处理授权回调：获取授权码后交换访问令牌。
  4. 调用用户信息接口：使用令牌获取用户基本信息。

示例代码（基于 OAuth 2.0）

假设使用网页授权方式（通过 uni.navigateTo 打开授权页）：

// 1. 跳转到小红书授权页面
const clientId = 'YOUR_CLIENT_ID';
const redirectUri = encodeURIComponent('YOUR_REDIRECT_URI');
const authUrl = `https://open.xiaohongshu.com/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code&scope=user_info`;

uni.navigateTo({
  url: `/pages/webview/webview?url=${encodeURIComponent(authUrl)}`
});

在 webview 页面监听 URL 变化，获取授权码：

// pages/webview/webview.vue
onLoad(options) {
  const url = options.url;
  // 在 webview 中加载授权页
},
methods: {
  // 监听 webview 内 URL 变化（需通过 @message 或 URL 解析获取 code）
  handleMessage(e) {
    const code = e.detail.data.code; // 假设通过消息传递获取
    this.exchangeToken(code);
  },
  // 2. 用授权码交换访问令牌
  async exchangeToken(code) {
    const res = await uni.request({
      url: 'https://open.xiaohongshu.com/oauth/access_token',
      method: 'POST',
      data: {
        client_id: 'YOUR_CLIENT_ID',
        client_secret: 'YOUR_CLIENT_SECRET',
        code: code,
        grant_type: 'authorization_code',
        redirect_uri: 'YOUR_REDIRECT_URI'
      }
    });
    const accessToken = res.data.access_token;
    this.getUserInfo(accessToken);
  },
  // 3. 获取用户信息
  async getUserInfo(accessToken) {
    const res = await uni.request({
      url: 'https://open.xiaohongshu.com/api/user/info',
      method: 'GET',
      header: {
        'Authorization': `Bearer ${accessToken}`
      }
    });
    const userInfo = res.data; // 包含昵称、头像等字段
    uni.setStorageSync('userInfo', userInfo);
    uni.navigateBack();
  }
}

注意事项

  • 权限申请：确保开放平台应用中已申请 user_info 权限。
  • 安全存储：令牌和用户信息需安全存储（如 uni.setStorageSync）。
  • 回调处理：redirect_uri 需在开放平台配置，并处理授权回调参数。

如果小红书提供 UniApp 专用 SDK，建议直接集成 SDK 简化流程。以上代码为基础示例，实际需根据开放平台文档调整参数和接口。

回到顶部