加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angular – 使用Auth0 spa快速入门时出错

发布时间:2020-12-17 17:51:47 所属栏目:安全 来源:网络整理
导读:我目前正在开发一个Angular 2 Web应用程序,它将使用Auth0进行用户身份验证. 我在Auth0网站上关注了quickstart,但是我收到错误无法在新的AuthService(auth.service.ts:9)中读取未定义的属性’WebAuth’,即使声明了AuthService. 我错过了什么吗?很感谢任何形
我目前正在开发一个Angular 2 Web应用程序,它将使用Auth0进行用户身份验证.

我在Auth0网站上关注了quickstart,但是我收到错误无法在新的AuthService(auth.service.ts:9)中读取未定义的属性’WebAuth’,即使声明了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>

谢谢

解决方法

你试过这样导入它:

从’auth0-js’导入*为auth0;

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读