UWP应用集成Google Picker API的可行性与实现问题咨询

1. UWP中使用Google Picker API的可行性 #

完全可行，但Google Picker本身是Web端API，UWP无官方原生SDK支持，只能通过WebView类容器集成。只要处理好OAuth2授权与WebView的交互逻辑，就能实现文件选择、下载的核心功能。

2. UWP中配置Google OAuth2授权步骤 #

• 创建并配置Google Cloud项目：在Google Cloud控制台新建项目，启用Google Drive API和Google Picker API。
• 生成OAuth客户端ID：选择「桌面应用」类型（UWP归为桌面类客户端），获取客户端ID和密钥，不要选Web应用类型，否则授权回调会异常。
• 设置权限范围：按需选择最小权限，比如仅访问用户通过Picker选择的文件用https://www.googleapis.com/auth/drive.file，只读访问所有Drive文件用https://www.googleapis.com/auth/drive.readonly。
• UWP内实现授权流程：
  1. 用WebAuthenticationBroker发起授权请求：

     string clientId = "你的客户端ID";
     string redirectUri = "urn:ietf:wg:oauth:2.0:oob";
     string scope = "https://www.googleapis.com/auth/drive.file";
     string authUrl = $"https://accounts.google.com/o/oauth2/v2/auth?client_id={clientId}&redirect_uri={redirectUri}&response_type=code&scope={Uri.EscapeDataString(scope)}&access_type=offline&prompt=select_account";
     
     var result = await WebAuthenticationBroker.AuthenticateAsync(
         WebAuthenticationOptions.None,
         new Uri(authUrl),
         new Uri(redirectUri));
     

  2. 用授权码换取Access Token和Refresh Token：

     HttpClient client = new HttpClient();
     var content = new FormUrlEncodedContent(new[]
     {
         new KeyValuePair<string, string>("code", result.ResponseData.Split('=')[1]),
         new KeyValuePair<string, string>("client_id", clientId),
         new KeyValuePair<string, string>("client_secret", "你的客户端密钥"),
         new KeyValuePair<string, string>("redirect_uri", redirectUri),
         new KeyValuePair<string, string>("grant_type", "authorization_code")
     });
     var response = await client.PostAsync("https://oauth2.googleapis.com/token", content);
     var tokenData = await response.Content.ReadAsStringAsync();
     // 解析tokenData，将access_token和refresh_token保存到ApplicationData.Current.LocalSettings
     

  3. 持久化Refresh Token，用于自动刷新Access Token，避免重复登录。

3. WebView集成Picker的限制与替代方案 #

• WebView集成的可行性与限制：
  可以用WebView加载Picker页面，但需注意：
  • Cookie隔离问题：旧版WebView不共享系统浏览器Cookie，导致每次授权需重新登录，换成WebView2（基于Edge Chromium）可解决此问题，它支持共享系统Cookie容器。
  • 页面加载异常：需确保WebView启用JavaScript，且Picker加载URL包含有效OAuth Access Token；同时UWP应用需开启Internet (Client)权限，只能加载HTTPS页面。
  • 跨域交互限制：WebView内的Picker页面与UWP原生代码通信，可通过WebView2的CoreWebView2.WebMessageReceived事件和window.chrome.webview.postMessage实现双向交互。
• 替代方案：
  • 直接调用Google Drive REST API：跳过Picker，自行开发文件选择UI，通过API列出、下载文件，灵活性更高但需自己实现UI。
  • 借助Google Drive同步客户端：若用户安装了Drive同步客户端，可直接用UWP的FileOpenPicker访问本地同步文件夹，但依赖用户客户端安装，通用性差。

4. Google API+UWP场景的最佳实践 #

• 最小权限原则：仅请求必要的API权限，降低安全风险和用户顾虑。
• 安全持久化Token：用DataProtectionProvider加密存储Refresh Token，避免明文泄露。
• 优先使用WebView2：兼容性更好，支持Cookie共享，调试更便捷。
• 完善错误处理：处理授权失败、API限流、网络异常等情况，给用户明确提示。
• 遵守API配额限制：在Google Cloud控制台查看并合理控制API请求频率，避免被限流。

针对WebView授权问题的修复建议 #

你遇到的页面无法加载、重复输入凭据问题，主要是旧WebView的Cookie隔离和配置问题，按以下步骤修复：

1. 替换为WebView2控件：
   • 安装NuGet包Microsoft.Web.WebView2。
   • XAML中添加控件：

     <WebView2 x:Name="PickerWebView" Width="800" Height="600"/>
     

   • 初始化并加载Picker页面：

     private async void InitializePicker()
     {
         await PickerWebView.EnsureCoreWebView2Async();
         // 注入Picker页面逻辑，包含有效Access Token
         string pickerHtml = @"
             <script src=""https://apis.google.com/js/api.js""></script>
             <script>
                 function initPicker() {
                     gapi.load('picker', () => {
                         var picker = new google.picker.PickerBuilder()
                             .addView(google.picker.ViewId.DOCUMENTS)
                             .setOAuthToken('你的Access Token')
                             .setCallback(data => {
                                 if(data[google.picker.Response.ACTION] === google.picker.Action.PICKED) {
                                     window.chrome.webview.postMessage(data[google.picker.Response.DOCUMENTS][0].id);
                                 }
                             })
                             .build();
                         picker.setVisible(true);
                     });
                 }
                 initPicker();
             </script>
         ";
         PickerWebView.CoreWebView2.NavigateToString(pickerHtml);
         // 接收Picker返回的文件ID
         PickerWebView.CoreWebView2.WebMessageReceived += (sender, args) =>
         {
             string fileId = args.WebMessageAsString;
             // 调用Drive API下载文件
         };
     }
     

2. 检查权限与URL：确保应用开启Internet (Client)权限，所有加载的资源均为HTTPS协议。

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