使用 js.dart 公开 auth0 API

Question

我正在编写一个 Dart Angular2 应用程序，但它与手头的问题无关。

我正在尝试通过使用 1https://pub.dartlang.org/packages/js.

公开它的 API 来将 Auth0Lock 与 dart 一起使用

我正在使用 Dartium 调试应用程序。

所以我使用以下 auth0lock.dart 文件公开 Auth0Lock API：

import 'package:js/js.dart';

@JS()
class Auth0Lock {
 external factory Auth0Lock(String token, String domain, Object options);
  external on(String event, Function func);
  external show();
}

我只暴露了我需要的基本内容。

然后我在名为 auth0_service.dart 的文件中创建了一个 Angular2 服务，该文件具有以下代码：

进口'package:angular2/core.dart'；导入 'auth0lock.dart'；导入 'app.config.dart';

@Injectable()
class Auth {
Auth0Lock lock;

Auth() {
    this.lock = new Auth0Lock(configObj.auth0.apiKey, configObj.auth0.domain,{});
}
updateProfileName(data) {
  var profile = data['profile'] != null ? data['profile'] : data;
  print(profile['name']);
}

authenticated() {
  return false;
}

login() {
    this.lock.show().then(this.updateProfileName);
}


}

我还会显示我的 index.html 我在哪里加载 auth0:

<!DOCTYPE html>
<html>
<head>
    <title>Demo App</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="www/styles.css">
    <script src="https://cdn.auth0.com/js/lock/10.0.0/lock.min.js"></script>
    <script defer src="/web/main.dart" type="application/dart"></script>
    <script defer src="/packages/browser/dart.js"></script>
</head>
<body>
    <my-app></my-app>
</body>
</html>

当我运行我的应用程序出现以下错误时：

EXCEPTION: No static method 'Auth0Lock.' declared in class 'Auth0Lock'.

所以 Auth0Lock 不是静态方法，它是 class 的构造函数。所以我必须以某种方式使用 JS api 错误。

Answer 1

我需要在 auth0lock.dart 前面添加以下内容：

@JS()
library test;

实际上我可以将 test 重命名为我想要的任何名称...我只需要添加带有名称的 js 标记和库。就解决了。

使用 js.dart 公开 auth0 API

using js.dart to expose auth0 API

dart

auth0