使用 Auth0 spa 快速入门时出错

Posted 2023-03-08

【中文标题】使用 Auth0 spa 快速入门时出错

【英文标题】：Error while using the Auth0 spa quickstart

【发布时间】：2017-10-24 20:18:33

【问题描述】：

我目前正在开发一个将使用 Auth0 进行用户身份验证的 Angular 2 Web 应用程序。

我在 Auth0 网站上关注了quickstart，但我收到了错误Cannot read property 'WebAuth' of undefined at new AuthService (auth.service.ts:9)，即使声明了 AuthService。

我错过了什么吗？非常感谢任何帮助。

这是我的代码

//app.component.ts

import  Component  from '@angular/core';
import  AuthService  from '../../auth/auth.service';

@Component(
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
)
export class AppComponent 

    constructor(public auth: AuthService) 
        auth.handleAuthentication();
    

//auth.service.ts

import  Injectable  from '@angular/core';
import  Router  from '@angular/router';
import 'rxjs/add/operator/filter';
import auth0 from 'auth0-js';

@Injectable()
export class AuthService 

    auth0 = new auth0.WebAuth(
        clientID: '*****',
        domain: '*****',
        responseType: 'token id_token',
        audience: '******',
        redirectUri: 'http://localhost:4200/callback',
        scope: 'openid'
    );

    constructor(public router: Router)  

    public login(): void 
        this.auth0.authorize();
    

    public handleAuthentication(): void 
        this.auth0.parseHash((err, authResult) => 
            if (authResult && authResult.accessToken && authResult.idToken) 
                window.location.hash = '';
                this.setSession(authResult);
                this.router.navigate(['/home']);
             else if (err) 
                this.router.navigate(['/home']);
                console.log(err);
            
        );
    

    private setSession(authResult): void 
        // Set the time that the access token will expire at
        const expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime());
        localStorage.setItem('access_token', authResult.accessToken);
        localStorage.setItem('id_token', authResult.idToken);
        localStorage.setItem('expires_at', expiresAt);
    

    public logout(): void 
        // Remove tokens and expiry time from localStorage
        localStorage.removeItem('access_token');
        localStorage.removeItem('id_token');
        localStorage.removeItem('expires_at');
        // Go back to the home route
        this.router.navigate(['/']);
    

    public isAuthenticated(): boolean 
        // Check whether the current time is past the
        // access token's expiry time
        const expiresAt = JSON.parse(localStorage.getItem('expires_at'));
        if (new Date().getTime() < expiresAt) 
            return true;
         else 
            return false;
        
    

//app.html

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header" *ngIf="auth" >
            <a class="navbar-brand" href="#">Auth0 - Angular</a>

            <button class="btn btn-primary btn-margin"
                    routerLink="/">
                Home
            </button>

            <button class="btn btn-primary btn-margin"
                    *ngIf="!auth.isAuthenticated()"
                    (click)="auth.login()">
                Log In
            </button>

            <button class="btn btn-primary btn-margin"
                    *ngIf="auth.isAuthenticated()"
                    (click)="auth.logout()">
                Log Out
            </button>

        </div>
    </div>
</nav>

<main class="container">
    <router-outlet></router-outlet>
</main>

谢谢

【参考方案1】：

你试过这样导入吗：

import * as auth0 from 'auth0-js';

【讨论】：

使用最后一行对我有用！非常感谢

如果这对某人有帮助 - 我还必须从 index.html 中删除脚本导入

【参考方案2】：

我看不到任何错误或错字。你做了吗

# installation with npm npm install --save auth0-js

和导入：

<script type="text/javascript" src="node_modules/auth0-js/build/auth0.js"></script>

在index.html 中或者如果您在.angular-cli.json 下["app"]["scripts"] 下使用angular-cli？

"project": "version": "1.0.0-beta.24", "name": "angular-src" , "apps": [ "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js", --> INSERT HERE <-- ],

【讨论】：

我已经使用 npm 安装了它，并使用 cdn <script src="https://cdn.auth0.com/js/auth0/8.6/auth0.min.js"></script> 在我的 index html 中导入了脚本，但现在我删除了 index.html 中的 cdn 导入并添加了 import * as auth0 from 'auth0-js';。现在，在 index.html 中没有导入，它正在工作。不过谢谢！