Question

我的网站有这个要求。该网站将是一个使用Angular 2构建的SPA。我想要的是用户可以使用Google，Facebook，Twitter oauth登录。

我可以在节点服务器上设置oauth，但问题是我如何允许通过angular 2 app登录。

在angular 2应用程序中，如果用户点击facebook登录选项，我无法重定向用户，因为我失去了我的应用程序状态。

我不知道这是否是一个非常初学的问题。任何人都可以帮助我解决角度2 +节点oauth中发生的事情

Answer 1

您将要在angular应用程序中设置路径以处理应用程序的前端。然后创建一个服务来处理应用程序的auth0身份验证，

这是在您的应用中设置一组安全路线和一组公共路线的概述。一旦有人使用oauth登录，他们将被转发到安全路线。

所以从这里开始是路线。我们将在app.routing.ts文件中指定安全和公开

路线

const APP_ROUTES: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full', },
    { path: '', component: PublicComponent, data: { title: 'Public Views' }, children: PUBLIC_ROUTES },
    { path: '', component: SecureComponent, canActivate: [Guard], data: { title: 'Secure Views' }, children: SECURE_ROUTES }
];

好的，现在你已经拥有了。您可以创建模板目录。在里面创建secure.component和public.component。然后我创建了一个名为secure的目录和一个名为public的目录，我将所有组件都依赖于身份验证级别来访问它们。我还将他们的路由添加到这些目录中的文件，以保持一切。

请注意，在上面的路线中，我在安全上设置了[Guard]。这将阻止任何人在没有身份验证的情况下进入安全路由。

以下是该警卫的样子。

import { Injectable }                      from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Auth }                 from './auth.service';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class Guard implements CanActivate {

    constructor(protected router: Router, protected auth: Auth ) {}

     canActivate() {
        if (localStorage.getItem('access_token')) {
            // logged in so return true
            return true;
        }
        // not logged in so redirect to login page
        this.router.navigate(['/home']);
        return false;
    }
}

现在我们已经拥有了使用Guard保护的路线。我们可以设置auth0客户端。

使用您从auth0

获得的凭据创建配置文件

interface AuthConfiguration {
    clientID: string,
    domain: string,
    callbackURL: string
}

export const myConfig: AuthConfiguration = {
    clientID: 'clietnifherefromauth0',
    domain: 'username.auth0.com',
    // You may need to change this!
    callbackURL: 'http://localhost:3000/endpoint/'
};

然后实际验证某人。接收数据并将令牌及其数据保存到本地存储。还提供注销功能和检查以确保他们已登录。

import { Injectable }                      from '@angular/core';
import { tokenNotExpired, JwtHelper }      from 'angular2-jwt';
import { Router }                          from '@angular/router';
import { myConfig }                        from './auth.config';

declare var Auth0Lock: any;

var options = {
    theme: {
    logo: '/img/logo.png',
    primaryColor: '#779476'
    },
    languageDictionary: {
    emailInputPlaceholder: "email@example.com",
    title: "Login or SignUp"
  }, 
 };

@Injectable()
export class Auth {
  lock = new Auth0Lock(myConfig.clientID, myConfig.domain, options, {});
  userProfile: Object;
  constructor(private router: Router) {
    this.userProfile = JSON.parse(localStorage.getItem('profile'));
    this.lock.on('authenticated', (authResult: any) => {
      localStorage.setItem('access_token', authResult.idToken);
      this.lock.getProfile(authResult.idToken, (error: any, profile: any) => {
        if (error) {
          console.log(error);
          return;
        }
        localStorage.setItem('profile', JSON.stringify(profile));
        this.userProfile = profile;
        this.router.navigateByUrl('/CHANGETHISTOYOURROUTE');
      });
      this.lock.hide();
    });
  }

  public login() {
    this.lock.show();
  }

  private get accessToken(): string {
        return localStorage.getItem('access_token');
    }

  public authenticated(): boolean {
    try {
        var jwtHelper: JwtHelper = new JwtHelper();
        var token = this.accessToken;
        if (jwtHelper.isTokenExpired(token))
            return false;
        return true;
    }
    catch (err) {
        return false;
    }
  }

  public logout() {
    localStorage.removeItem('profile');
    localStorage.removeItem('access_token');
    this.userProfile = undefined;
    this.router.navigateByUrl('/home');
  };
}

确保进入auth0信息中心并选择所需的社交链接。在你的情况下facebook twitter和Google。然后当有人激活小部件时，会出现这三个小部件。

所以我们现在要做的就是在有人点击登录时显示小部件，

html将显示登录链接。但如果他们登录，它将显示一些关于他们的信息。

<ul class="nav navbar-nav pull-right">
                <li class="nav-item">
                    <a class="nav-link" (click)="auth.login()" *ngIf="!auth.authenticated()">Login / SignUp</a>
                    <a class="aside-toggle" href="#" role="button" aria-haspopup="true" aria-expanded="false" *ngIf="auth.authenticated()">
                    <span *ngIf="auth.authenticated() && auth.userProfile" class="profile-name">{{auth.userProfile.nickname}}</span>
                    <span *ngIf="!auth.authenticated() && !auth.userProfile" class="profile-name">Account</span>
                    <i class="icon-bell"></i><span class="tag tag-pill tag-danger profile-alerts">5</span>
                    <img *ngIf="auth.authenticated() && auth.userProfile" [src]="auth.userProfile.picture" class="img-avatar profile-picture" alt="User profile picture">
                    <img *ngIf="!auth.authenticated() && !auth.userProfile" src="/img/avatars/gravatar-default.png" alt="Default profile-picture">
                    </a>
                </li>
        </ul>

如果有什么不清楚，请告诉我。我很乐意帮忙。

如何使用oauth节点js

1 个答案: