如何在.NET MAUI中加载Disqus登录账户的头像与名称？

可以实现，核心是通过Disqus OAuth 2.0授权获取用户令牌，再调用Disqus官方API拉取用户信息，最后在MAUI界面展示。以下是具体步骤：

1. 准备Disqus开发者应用 #

• 登录Disqus开发者平台，创建新应用，获取client_id和client_secret。
• 设置应用的回调URL（比如myapp://disqus-auth-callback），授权成功后会跳转到该地址。

2. 在.NET MAUI中实现OAuth授权流程 #

要获取用户访问令牌，需引导用户完成Disqus授权登录：

• 在MAUI页面添加WebView控件，加载Disqus授权URL：

  var authUrl = $"https://disqus.com/api/oauth/2.0/authorize?client_id=你的client_id&response_type=code&redirect_uri=myapp://disqus-auth-callback";
  disqusWebView.Source = authUrl;
  

• 监听WebView导航事件，捕获回调URL中的授权码（code参数）：

  disqusWebView.Navigating += (s, e) =>
  {
      if (e.Url.StartsWith("myapp://disqus-auth-callback"))
      {
          e.Cancel = true;
          var queryParams = System.Web.HttpUtility.ParseQueryString(new Uri(e.Url).Query);
          var authCode = queryParams["code"];
          // 用授权码交换访问令牌
          _ = ExchangeCodeForToken(authCode);
      }
  };
  

• 实现ExchangeCodeForToken方法，通过POST请求换取访问令牌：

  private async Task ExchangeCodeForToken(string authCode)
  {
      using var client = new HttpClient();
      var formData = new FormUrlEncodedContent(new[]
      {
          new KeyValuePair<string, string>("client_id", "你的client_id"),
          new KeyValuePair<string, string>("client_secret", "你的client_secret"),
          new KeyValuePair<string, string>("grant_type", "authorization_code"),
          new KeyValuePair<string, string>("code", authCode),
          new KeyValuePair<string, string>("redirect_uri", "myapp://disqus-auth-callback")
      });
      var response = await client.PostAsync("https://disqus.com/api/oauth/2.0/access_token", formData);
      var tokenData = await response.Content.ReadFromJsonAsync<DisqusToken>();
      // 保存access_token用于后续API调用
      var accessToken = tokenData.access_token;
      // 获取用户信息
      _ = GetCurrentUserInfo(accessToken);
  }
  
  // 令牌模型
  public class DisqusToken
  {
      public string access_token { get; set; }
      public string token_type { get; set; }
      public int expires_in { get; set; }
  }
  

3. 调用Disqus API获取用户信息 #

使用access_token调用/users/details端点，获取当前用户的头像和名称：

private async Task GetCurrentUserInfo(string accessToken)
{
    using var client = new HttpClient();
    client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", accessToken);
    var response = await client.GetAsync("https://disqus.com/api/3.0/users/details.json");
    var userData = await response.Content.ReadFromJsonAsync<DisqusUser>();
    // 更新UI显示
    MainThread.BeginInvokeOnMainThread(() =>
    {
        userNameLabel.Text = userData.response.name;
        userAvatarImage.Source = ImageSource.FromUri(new Uri(userData.response.avatar.large.permalink));
    });
}

// 用户信息模型
public class DisqusUser
{
    public DisqusUserResponse response { get; set; }
}

public class DisqusUserResponse
{
    public string name { get; set; }
    public DisqusAvatar avatar { get; set; }
}

public class DisqusAvatar
{
    public DisqusAvatarSize large { get; set; }
}

public class DisqusAvatarSize
{
    public string permalink { get; set; }
}

4. 在MAUI界面中展示信息 #

在XAML页面添加对应控件：

<StackLayout>
    <Image x:Name="userAvatarImage" WidthRequest="100" HeightRequest="100" />
    <Label x:Name="userNameLabel" FontSize="Large" />
    <WebView x:Name="disqusWebView" HeightRequest="400" />
</StackLayout>

注意事项 #

• 需在MAUI各平台配置文件中注册自定义URL scheme（如myapp://），比如Android的AndroidManifest.xml、iOS的Info.plist。
• 处理API调用中的异常，比如网络错误、令牌过期等情况。

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