使用 dart 中的 googleapis 库更新日历并将其显示在网页上

Question

我是 dart 新手，我一直在尝试弄清楚如何使用 googleapis 库来更新日历事件，然后在网页上显示日历/事件。

到目前为止，我有这段代码，我希望只是将#text id 的文本更改为所选日历 ID 中的事件列表：

import 'dart:html';
import 'package:googleapis/calendar/v3.dart';
import 'package:googleapis_auth/auth_io.dart';

final _credentials = new ServiceAccountCredentials.fromJson(r'''
{
  "private_key_id": "myprivatekeyid",
  "private_key": "myprivatekey",
  "client_email": "myclientemail",
  "client_id": "myclientid",
  "type": "service_account"
}
''');

const _SCOPES = const [CalendarApi.CalendarScope];

void main() {
  clientViaServiceAccount(_credentials, _SCOPES).then((http_client) {
    var calendar = new CalendarApi(http_client);

    String adminPanelCalendarId = 'mycalendarID';

    var event = calendar.events;

    var events = event.list(adminPanelCalendarId);

    events.then((showEvents) {
      querySelector("#text2").text = showEvents.toString();
    });

  });
}

但网页上没有显示任何内容。我想我误解了如何在 dart 中使用客户端和服务器端代码......我是否将文件分成多个文件？我将如何使用 dart 更新日历并将其显示在网页上？

我熟悉 browser 包，但这是我第一次使用服务器端库编写任何东西（googleapis 使用 dart:io 所以我假设它是服务器端的？我无法运行代码在 dartium 中）。

如果有人能指出我正确的方向，或者提供如何实现这一点的示例，我将不胜感激！

Answer 1

您可能正在寻找的是hybrid flow。这会产生两个项目

• 访问凭据（用于客户端 API 访问）
• 授权码（用于使用用户凭据的服务器端 API 访问）

来自文档：

用例：Web 应用程序可能希望获得代表用户访问数据的同意。客户端部分是一个动态 web 应用程序，它想要打开一个请求用户同意的弹出窗口。 Web 应用可能希望使用凭据进行 API 调用，但服务器也可能希望离线访问用户数据。

Google+ Sign-In for server-side apps 页面描述了此流程的工作原理。

Answer 2

使用以下代码，您可以显示与登录帐户关联的日历事件。在此示例中，我使用了 createImplicitBrowserFlow（请参阅https://pub.dartlang.org/packages/googleapis_auth 的文档）以及来自 Google Cloud Console 项目的 ID 和密钥。

import 'dart:html';
import 'package:googleapis/calendar/v3.dart';
import 'package:googleapis_auth/auth_browser.dart' as auth;

var id = new auth.ClientId("<yourID>", "<yourKey>");
var scopes = [CalendarApi.CalendarScope];

  void main() {

  auth.createImplicitBrowserFlow(id, scopes).then((auth.BrowserOAuth2Flow flow) {
        flow.clientViaUserConsent().then((auth.AuthClient client) {

          var calendar = new CalendarApi(client);

              String adminPanelCalendarId = 'primary';

              var event = calendar.events;

              var events = event.list(adminPanelCalendarId);

              events.then((showEvents) {
                showEvents.items.forEach((Event ev) { print(ev.summary); });
                querySelector("#text2").text = showEvents.toString();
              });      


          client.close();
          flow.close();
        });
      });

}