uni-app app端discord登录

在uni-app中实现Discord登录功能，你需要集成Discord的OAuth 2.0授权流程。以下是一个基本的代码案例，展示了如何在uni-app中处理Discord登录。

首先，你需要在Discord开发者门户创建一个应用并获取Client ID和Client Secret。

1. 创建Discord OAuth URL

在你的uni-app项目中，创建一个页面用于启动Discord登录流程。

// pages/login/login.vue
<template>
  <view>
    <button @click="loginWithDiscord">Login with Discord</button>
  </view>
</template>

<script>
export default {
  methods: {
    loginWithDiscord() {
      const clientId = 'YOUR_CLIENT_ID'; // 替换为你的Client ID
      const redirectUri = encodeURIComponent('YOUR_REDIRECT_URI'); // 替换为你的回调URI
      const scope = 'identify email guilds'; // 根据需要选择scope

      const authUrl = `https://discord.com/api/oauth2/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}`;

      // 在app端，通常使用plus.webview打开外部链接
      const webview = plus.webview.create(authUrl, 'discordAuth');
      webview.show();
    }
  }
}
</script>

2. 处理OAuth回调

在manifest.json中配置你的重定向URI，并确保你已经在Discord开发者门户中配置了这个URI。

然后，在你的项目中创建一个页面用于处理Discord的回调。

// pages/callback/callback.vue
<template>
  <view>
    <text>Processing...</text>
  </view>
</template>

<script>
export default {
  onLoad(options) {
    const code = options.code; // 从URL参数中获取code

    // 使用code向Discord换取access_token
    const clientId = 'YOUR_CLIENT_ID';
    const clientSecret = 'YOUR_CLIENT_SECRET'; // 替换为你的Client Secret
    const redirectUri = 'YOUR_REDIRECT_URI';

    const tokenUrl = `https://discord.com/api/oauth2/token?grant_type=authorization_code&client_id=${clientId}&client_secret=${clientSecret}&redirect_uri=${redirectUri}&code=${code}`;

    uni.request({
      url: tokenUrl,
      method: 'POST',
      success: (res) => {
        const { access_token } = res.data;

        // 使用access_token获取用户信息
        const userInfoUrl = `https://discord.com/api/users/@me?access_token=${access_token}`;

        uni.request({
          url: userInfoUrl,
          method: 'GET',
          success: (userInfoRes) => {
            console.log('User Info:', userInfoRes.data);
            // 在此处处理用户信息，例如保存到本地或跳转到其他页面
          },
          fail: (err) => {
            console.error('Failed to fetch user info:', err);
          }
        });
      },
      fail: (err) => {
        console.error('Failed to fetch token:', err);
      }
    });
  }
}
</script>

注意事项

1. 安全性：不要在客户端代码中硬编码Client Secret。考虑使用后端服务来处理token交换。
2. 用户体验：在app端，使用plus.webview可以更好地处理OAuth流程，但注意处理webview的关闭和回调。
3. 错误处理：添加更多的错误处理逻辑以处理OAuth流程中的各种可能错误。

这个案例提供了一个基本的Discord登录实现，你可能需要根据实际需求进行进一步的调整和优化。