2

Estoy haciendo un sistema de login inicial en Angular 2 que busca el usuario y la contraseña en una API. Estoy tratando de usar un sistema de autenticación por token, y he partido del modelo que se encuentra en la siguiente web para no partir de cero: http://jasonwatmore.com/post/2016/09/29/angular-2-user-registration-and-login-example-tutorial.

El problema es que no lo llego a comprender, ya que en cada web me pone una forma distinta de llevarla a cabo y ninguna funciona. Creo que el fichero "authentication.service.ts" hay que establecer la ruta de la API que se va a consumir, pero esto deriva en que se quede en modo carga y no haga nada.

Adjunto el código del fichero:

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map'

@Injectable()

export class AuthenticationService {
public token: string;

constructor(private http: Http) {
    // set token if saved in local storage
    var currentUser = JSON.parse(localStorage.getItem('currentUser'));
    this.token = currentUser && currentUser.token;
}


login(username: string, password: string): Observable<boolean> {
    return this.http.post('RUTA API', JSON.stringify({ username: username, password: password }))
        .map((response: Response) => {
            // login successful if there's a jwt token in the response
            let token = response.json() && response.json().token;
            if (token) {
                // set token property
                this.token = token;

                // store username and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify({ username: username, token: token }));

                // return true to indicate successful login
                return true;
            } else {
                // return false to indicate failed login
                return false;
            }
        });
}

logout(): void {
    // clear token remove user from local storage to log user out
    this.token = null;
    localStorage.removeItem('currentUser');
}
}

Si alguien pudiera arrojarme luz sobre este asunto le estaría muy agradecido. Y también si conociera de algun sitio con una buena documentación en español, ya que mi dominio del ingles no es muy bueno.

2
  • Buenas, tengo este mismo código funcionando en una de mis aplicaciones, que error te está dando? Por otro lado que quieres decir con: "pero esto deriva en que se quede en modo carga y no haga nada"? Gracias
    – KN_
    Commented el 27 may. 2017 a las 19:50
  • @KN_ con carga me refiero a que cuando hago login con un usuario que se encuentra en la API no hace nada, solamente se queda el gif de carga dando vueltas (seguramente por que lo tengo mal configurado). Si tu lo tienes funcionando, me podrias decir como hacer que el formulario haga login a una API? En el tutorial del creador lo explica pero no me queda del todo claro (la parte de mock back end me confunde bastante y no se por donde meterle mano). Muchas gracias por adelantado Commented el 29 may. 2017 a las 7:37

3 respuestas 3

0

Encontré este tutorial no es en español pero puedes traducir la pagina.

http://jasonwatmore.com/post/2017/02/22/mean-with-angular-2-user-registration-and-login-example-tutorial

Te explico como lo haría yo.

  1. Primero genero el componente con ng g c (nombre del componente)
  2. Modificar el template html de mi login (agregar inputs con su ngModel) dentro del tutorial es el la sección Angular 2/4 Login Component Template, yo declararía las variables en el componente para asignarles el valor desde el ngModel.
  3. sección Angular 2/4 Login Component, dentro de mi component.ts importo el authenticate.service para aquí poder accesar el método creado dentro de el enviando de aquí mis parámetros, en este caso username y password
  4. y por ultimo, Angular 2/4 Authentication Service, este seria el service de autenticación.

En tu component.ts podrás ver el log de la respuesta.

-1

Te copio mi ejemplo funcional, está tomado del mismo lugar y tiene solo unas pequeñas modificaciones en cuanto al ts, también te voy a agregar un ejemplo de php y otro en plunker, para que lo puedas ver implementado:

authentication.service.ts

import {Injectable} from '@angular/core';
import {Http, Headers, Response, RequestOptions} from '@angular/http';
import {Observable} from "rxjs/Rx";


@Injectable()
export class AuthenticationService {
    public token: string;
    constructor(private http: Http) {
        // Si ya tengo token, lo recupero del localStorage
        var currentUser = JSON.parse(localStorage.getItem('currentUser'));
        this.token = currentUser && currentUser.token;
    }

    login(username: string, password: string): Observable<boolean> {

        let headers = new Headers({'Content-Type': 'application/json'});
        let options = new RequestOptions({headers: headers});


        return this.http.post('http://192.185.67.199/~arielces/playground/login.php', JSON.stringify({
            mail: username,
            password: password
        }), options)
            .map((response: Response) => {
                // Aquí agrega un:
                console.log(response);
                // para verificar la respuesta desde el servidor
                // En mi caso, desde el servidor, devuelvo un usuario además del toke

                let token = response.json() && response.json().token;
                let user = response.json() && response.json().user;
                if (token) {
                    // set token property
                    this.token = token;

                    // store username and jwt token in local storage to keep user logged in between page refreshes
                    localStorage.setItem('currentUser', JSON.stringify({user: user, token: token}));

                    // return true to indicate successful login
                    return response;
                } else {
                    // return false to indicate failed login
                    return false;
                }
            }).catch((err: Response, caught: Observable<any>)=> {
                console.log(err);
                return Observable.throw(err);
            });
    }

    logout(): void {
        // clear token remove user from local storage to log user out
        this.token = null;
        localStorage.removeItem('currentUser');
    }
}

login.php // En mi caso, utilizo este tipo de archivo, no necesariamente tiene que ser así

<?php
session_start();

$data = file_get_contents("php://input");

// Decode data from js
$decoded = json_decode($data);

if ($decoded != null) {
    if ($decoded->function == 'login') {
        login($decoded->mail, $decoded->password);
    }
}

function login($mail, $password)
{

  // LOGICA DE LOGIN ACÁ


    header('HTTP/1.0 200 Ok');
    echo json_encode(array('token' => 'valor-del-token','user' => '{username:'.$mail.', rol:1}'));
}  

Te dejo un ejemplo en plunk: http://plnkr.co/edit/FvKJeFCL4DTu9ppwBtuj?p=preview

Te va a dar un error por tratar de acceder a un sitio externo, para que te funcione, debes instalar esta extensión de Chrome: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related?hl=en

El ejemplo no valida ningún dato, esto es un ejemplo de angular 2, la api que valida tu usuario, deberías desarrollarla de acuerdo a tus necesidades.

Espero que te sirva el ejemplo, y cualquier cosa, vuelves a preguntar.

-1

Puedes mapear la respuesta en el servicio y guardar en memoria y localStorage los datos que necesites (token y user) antes de suscriberte al observable.

Servicio

@Injectable()
export class AuthService {

  private baseUrl: string = environment.baseUrl;

  token = null;
  user = null;

  constructor(private http: Http) {}

  public login(email: string, password: string): Observable<any> {
    const url = `${this.baseUrl}/v1/auth/signin`;
    const body = { email, password };
    const headers = new Headers({ 'Content-Type': 'application/json', 'Accept': 'application/json' });
    return this.http.post(url, body, { headers })
        .map((res: Response) => res.json())
        .map(data => {
            localStorage.setItem('token', JSON.stringify(this.token = data.token));
            localStorage.setItem('user', JSON.stringify(this.user = data.user));
            return data;
        })
        .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
  }

  public logout(): void {
    this.token = null;
    this.user = null;
    localStorage.clear();
  }

}

Consumidor

@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.css']
})
export class AuthComponent {

    constructor(private authService: AuthService) {}

    login(email: string, password: string): void {
        this.authService.login(email, password).subscribe(
            (data) => {
                // Manejar datos si la respuesta es exitosa.
            },
            (err) => {
                // Notificar de que ha habido un error al autenticarse.
            },
            () => {
                // Aquí estás seguro que el usuario ha sido autenticado.
            }
        );
    }
}

Extra: Interceptor HTTP para las demás peticiones autenticadas (Sólo Angular 4.3+)

// En tu app.module.ts

{ provide: HTTP_INTERCEPTORS, useClass: JWTInterceptor, multi: true }

@Injectable()
export class JWTInterceptor implements HttpInterceptor {

  constructor(private authService: AuthService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone({
      setHeaders: {
        Authorization: this.authService.token
      }
    });
    return next.handle(req).catch(err => {
      if (err instanceof HttpErrorResponse) {
          if (err.status === 401 || err.status === 403) {
            this.authService.logout();
          }
          return Observable.throw(err);
      }
      return Observable.throw({ message: 'Unknown error.'});
    });
  }
}

Consumidor con interceptor

@Injectable()
export class MessageService {

  private baseUrl: string = environment.baseUrl;

  constructor(private http: HttpClient) {}

  public getAll(): Observable<Message[]> {
    // Por defecto es JSON y ya tienes incorporado tu authorización en la req.
    return this.http.get<Message[]>(`${this.baseUrl}/v1/messages`);
  }

}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.