将 Auth0 与 Angular 一起使用时，获取哈希 url 参数以重定向到请求 url 2

Question

Auth0 要求您在身份验证后将回调 URL 列入白名单，这样您就不能仅使用 URL 登录应用程序中的任何页面，例如 /thing/1、/thing/1001 因为无法通配事物 ID。

这个 Github conversation 指向我在 Angular 2 中解释为的简洁解决方案：

在我的 auth.service.ts:

lock = new Auth0Lock('Client_ID', 'Domain', {
        auth: {
            redirectUrl: window.location.origin + '/login',
            responseType: 'token',
            params: {
                scope: 'openid name email',
                state: JSON.stringify({pathname: window.location.pathname})
            }
        }
    });

然后我可以在 Angular 中将我的 /login 路由列入白名单 2. 我尝试让我的 login.component.ts 读取然后导航到 Auth0 在回调中返回的路径名，如下所示：

this.route
    .queryParams
    .subscribe(params => {
         this.state = params['state'];
         this.router.navigate(this.state, {preserveQueryParams: true});
     });

...但是params似乎总是空的。据我所知，这是因为回调 URL 是这种形式：

http://localhost:5555/login#access_token=...&id_token=...&token_type=Bearer&state=%7B%22pathname%22%3A%22%2Flogin%22%7D

...和 Angular 2 路由会在到达 LoginComponent 之前自动剥离 # 参数。

然后我发现 lock.authenticated 上的 authResult 仍然包含我在 auth.service.ts 中的状态参数，因此尝试按如下方式导航到它：

this.lock.on("authenticated", (authResult:any) => {
    localStorage.setItem('id_token', authResult.idToken);
    let state: string = JSON.parse(authResult.state);
    this.router.navigate([state.pathname], {});

这最初似乎有效，但事实证明，它并不可靠......它似乎无法预测地从

的任何地方重定向我

/thing/1001 to 
/things or even 
/

...我不知道为什么。非常感谢任何帮助。

编辑回应@shusson 的回答：

基于@shusson 回答的工作代码在auth.service.ts:

export class Auth {
    // Configure Auth0
    lock = new Auth0Lock('Client_ID', 'Domain',{
        auth: {
            redirectUrl: location.origin + '/login',
            responseType: 'token',
        }
    });

    constructor(private router: Router, route: ActivatedRoute) {

        // Add callback for lock `authenticated` event
        this.lock.on("authenticated", (authResult:any) => {
            localStorage.setItem('id_token', authResult.idToken);
            let state: any = JSON.parse(authResult.state);
            this.router.navigate([state.pathname], {});
        ...
     }

    public login() {
        // Call the show method to display the widget.
        this.lock.show({
            auth: {
                params: {
                    scope: 'openid name email',
                    state: JSON.stringify({pathname: this.router.url})
                }
            }
        });
    };

编辑：基于this comment回复：回调中的传递路径是一个 CSRF 漏洞：

我的 auth.service.ts 中的最终工作代码是：

import { Injectable }      from '@angular/core';
import { tokenNotExpired } from 'angular2-jwt/angular2-jwt';
import { Router, ActivatedRoute } from '@angular/router';
import { UUID } from 'angular2-uuid/index';

// Avoid name not found warnings
declare var Auth0Lock: any;

@Injectable()
export class Auth {
    // Configure Auth0
    lock = new Auth0Lock('Client_ID', 'Domain',{
        auth: {
            redirectUrl: location.origin + '/login',
            responseType: 'token',
        }
    });
    //Store profile object in auth class
    userProfile: Object;

    constructor(private router: Router, route: ActivatedRoute) {

        // Set userProfile attribute of already saved profile
        this.userProfile = JSON.parse(localStorage.getItem('profile'));

        // Add callback for lock `authenticated` event
        this.lock.on("authenticated", (authResult:any) => {
            localStorage.setItem('id_token', authResult.idToken);
            let pathname_object: any = JSON.parse(authResult.state);
            let pathname: any = localStorage.getItem(pathname_object.pathname_key);
            //get rid of localStorage of url
            localStorage.removeItem(pathname_object.pathname_key);
            //navigate to original url
            this.router.navigate([pathname], {});

        // Fetch profile information
        this.lock.getProfile(authResult.idToken, (error:any, profile:any) => {
            if (error) {
                // Handle error
                alert(error);
                return;
            }

            localStorage.setItem('profile', JSON.stringify(profile));
                this.userProfile = profile;
            });
        });
    }

    public login() {
        //generate UUID against which to store path
        let uuid = UUID.UUID();
        localStorage.setItem(uuid, this.router.url);
        // Call the show method to display the widget.
        this.lock.show({
            auth: {
                params: {
                    scope: 'openid name email',
                    state: JSON.stringify({pathname_key: uuid})
                }
            }
        });
    };
...
}

Answer 1

在我们的身份验证服务中，我们会做类似的事情：

const options: any = {
    auth: {
        redirectUrl: location.origin,
        responseType: 'token'
    },
};

constructor(private router: Router) {
    new Auth0Lock(environment.auth0ClientId, environment.auth0Domain, options);
    ...
    this.lock.on('authenticated', (authResult: any) => {
        ...
        this.router.navigateByUrl(authResult.state);
    });
}

public login() {
    this.lock.show({
        auth: {
            params: {state: this.router.url},
        }
    });
};

将 Auth0 与 Angular 一起使用时，获取哈希 url 参数以重定向到请求 url 2

Get hash url parameters to redirect to requesting url when using Auth0 with Angular 2

auth0

angular