使用 Angular 2 (RC5)、Webpack 和 CLI 的 Auth0-js

Question

我正在尝试将 auth0 实现到我的 Angular 2 项目中，我不想使用锁定小部件，而是自定义我自己的登录表单和社交登录按钮。所以我想自己使用 auth0-library。而且我希望它被捆绑，所以不要在 index.html 中导入它。

我使用 CLI 搭建了我的项目 (1.0.0-beta.11-webpack.2) 并使用 NPM 安装了 auth0-js。我可以在我的 node_modules 中找到“auth0-js”文件夹，现在我只需要以某种方式将它连接到我的应用程序。

// login.component

import { Component } from '@angular/core';
import * as Auth0 from "auth0-js";

@Component({
  selector: 'app-login',
  templateUrl: 'login.component.html',
  styleUrls: ['login.component.css']
})
export class LoginComponent implements OnInit {

  auth0: any;

  constructor() {
    this.auth0 = new Auth0({
      domain: 'myDomain',
      clientID: 'myClientId',
      callbackURL: '{http://localhost:4000/}', // in dev-mode
      callbackOnLocationHash: true
    });
  }

  loginWithGoogle(connection) {
    this.auth0.login({
      connection: 'google-oauth2'
    });
  }
}

但我从 Webpack 收到这条控制台消息：

[默认] 中的错误 ........./node_modules/@types/auth0-js/index.d.ts' 不是模块。

看起来该应用程序正在运行，尽管打字不起作用。我已经安装了npm i @types/auth0-js --save，它按预期将类型安装到我的节点模块。

似乎打字有问题，但是什么？是我自己可以解决的问题，还是我必须等到有人将类型更新为模块化？

谢谢！！

Answer 1

我没有使用过 Auth0。但我认为这应该可行。

ma​​in.ts

import 'auth0-js/standalone'; 

// Add this to test it.
var auth0 = new Auth0({
  domain:       'mine.auth0.com',
  clientID:     'dsa7d77dsa7d7',
  callbackURL:  'http://my-app.com/callback',
  responseType: 'token'
});

快速打字工作围绕 src/typings.d.ts

declare var Auth0: any;

更好的打字方式：

• 安装auth0类型https://www.npmjs.com/package/@types/auth0
• 更新您的 tsconfig "types": ["auth0"]