从 AngularDart 组件调用 googleapis_auth 流程

Question

我正在尝试使用来自 AngularDart 组件 (MaterialButtonComponent) 的 googleapis_auth 包来触发 OAuth 流程。

来自 googleapis_examples (here) 的示例展示了如何使用原始 ButtonElement 来避免弹出窗口被浏览器阻止。但是，当我使用使用 (trigger)="method()" 或 (click)="method()" 语法的 AngularDart 样式遵循相同的模式时，我的弹出窗口被阻止。

当前代码：

drive_component.html:

<material-button icon (trigger)="save()"
             class="icon-button">
<material-icon icon="archive"></material-icon>

drive_component.dart

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
import 'package:blue_rose_character_creator/src/character/character.dart';
import 'package:googleapis_auth/auth_browser.dart';
import 'package:googleapis/drive/v3.dart';

final identifier = new ClientId(
    "<my-client>.apps.googleusercontent.com",
    null);
const scopes = const [DriveApi.DriveScope];

@Component(
  selector: 'drive',
  templateUrl: 'drive_component.html',
  styleUrls: const ['drive_component.css'],
  directives: const [CORE_DIRECTIVES, materialDirectives],
  providers: const [materialProviders],
)
class DriveComponent {
  @Input() Character character;

  void save() {
    createImplicitBrowserFlow(identifier, scopes)
        .then((BrowserOAuth2Flow flow) {
      // Try getting credentials without user consent.
      // This will succeed if the user already gave consent for this application.
      return flow.clientViaUserConsent(immediate: true).catchError((_) {

        //I've removed the loginButton from the flow, since AngularDart
        //doesn't pass this around.
        //loginButton.text = 'Authorize';
        //return loginButton.onClick.first.then((_) {
        return flow.clientViaUserConsent(immediate: false);
      }, test: (error) => error is UserConsentException);
    });
  }

使弹出窗口畅通无阻的正确 AngularDart 样式是什么？有吗？

Answer 1

我认为问题是您在 save 调用和 clientViaUserConsent 调用之间有一个异步操作。

我会尝试在加载组件时调用 createImplicitBrowserFlow，并且在您存储 flow 对象之前不启用保存。

有道理吗？

从 AngularDart 组件调用 googleapis_auth 流程

Calling googleapis_auth flow from AngularDart component

dart

google-oauth

angular-dart