Discussion :

[rickjason]

Bonjour Chers tous,

Merci à tous ceux qui voudront bien prendre de leur temps, pour m'aider a la résolution de ce problème.
En effet j'ai crée une application mobile avec ionic/angular. Et le souci se trouve au niveau l'authentification.
Je souhaiterai garder en mémoire, les paramètres de connexion de l'utilisateur lors de sa première connexion pour ne plus qu'il ait à se connecter encore les prochaines fois a moins qu'il ait envie de renseigner d'autre paramètre la prochaine fois.

Le principe:
homepage.html (la page d'accueil lors du lancement de l'application) voir image ci-dessous.
l'utilisateur, clique sur le bouton " MON SOLDE"


il est dirigé vers la page de connexion:
loginpage.html(la page d'authentification) voir image ci dessous


et une fois les paramètres validés, elle sont stockés dans le native Storage, pour pouvoir naviguer entre les pages.

script:
loginpage.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
loginUser() { 
   if (this.form.value) {
    this.authService.login(this.form.value);
   }
   else{
    console.log('Please enter badge/telephone or password.');
   }
  }

autService.ts:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
login(user) {
    //console.log(user);
 
    let urlToGet = "http://www.tchek.com/test/?action=GTD&badge=" + user.badge;
    this.http.get<any[]>(urlToGet)
    .subscribe(
        async (res: any[]) => 
          {
            this.badge = res
            this.dataBadge = this.badge.PAYLOAD.SUBSCRIPTIONS.TAGS.TAG_ID;
            this.dataTel = this.badge.PAYLOAD.PHONE_1;
            if(this.dataBadge == user.badge && this.dataTel == user.telephone)
            {
              this.LocalServ.loadingPresent();
              this.response = res;
 
              this.LocalServ.storeUserInformations(this.response);
              this.router.navigate(["/profile"]);
              this.authState.next(true);
            }
            else {
              console.log('incorrect password.');
              this.toastService.presentToast('Badge et/ou Telephone incorrect.');
              }
            },
            (error: any) => {
            console.log('Network Issue.');
            this.toastService.presentToast('Verifiez votre connexion.');
            }
        );
  }

LocalService.ts:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
async storeUserInformations(user){
    this.storage.setItem("USER_INFO", user)
    .then((response) => 
      {this.loadingDismiss()},
      catchError(this.handleError)
    );
 
  }

Alors ma préoccupation c'est comment éviter l'utilisateur de toujours renseigner ces paramètres d'authentification pour consulter son solde.
L'idée serait lors de sa toute première connexion, que le téléphone garde ces info en mémoires et afin de lui permettre de directement accéder a la page (profilpage.html) sans être obligé entrer ces paramètres.

[krakatoa]

tu as dit que les données sont stockés dans le native Storage
donc tu les recupères de là ?

est ce que c'est un systeme JWT ?

[rickjason]

les données proviennent de mon API, l'utilisateur saisi ces paramètres de connexion, c'est avec ces informations que l'Api est interrogé pour pointer vers la page demandé.

[krakatoa]

** tu enregistres user dans le local storage

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
async storeUserInformations(user){
    this.storage.setItem("USER_INFO", user)
    .then((response) => 
      {this.loadingDismiss()},
      catchError(this.handleError)
    );
 
  }

si tu enregistres, tu peux lire !




** sinon, tu peux mettre les données dans un service :

this.authService

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
credentials = { identifiant: '', password: ''};
 
getCredentials() {
  return this.credentials;
}
 
setCredentials(id, pwd) {
  this.credentials.identifiant = id;
  this.credentials.password= pwd;
}

tant que tu navigues entre les pages les données du service sont conservés.
par contre, avec un rafraichissement de la page F5, le service est reinitialisé !



** normalement on utilise un système JWT
pour des raisons de sécurité, on n'enregistre pas le password comme ça dans un service ou un local storage

[rickjason]

Merci pour votre aide, j'ai suivi les conseils de krakatoa, en adaptant a mon projet:
sur ma page démarrage:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
  getUserParam() {
    this.nativeStorage.getItem("USER_INFO")
      .then(
        async response => {
          // console.log(response);
          this.router.navigate(["/profile"]);
        },
        error => {
          // console.error(error);
          this.router.navigate(["/login"]);
        }
      );
  }

donc il va vérifier s'il y'a bien des données dans le nativestorage, si c'est le cas il pointe vers profile, sinon vers login.

Et dans la page de profile, le bouton de déconnexion, appelle cette fonction:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
async logout() {
  const alert = await this.alertCtrl.create({
    header: 'Quitter l\'application',
    message: 'Voulez-vous quitter l\'application?',
    buttons: [
      {
        text: 'Non',
        role: 'cancel',
        cssClass: 'success',
        handler: (blah) => {
          console.log('Confirm Cancel: blah');
        }
      }, {
        text: 'Oui',
        cssClass: 'danger',
        handler: () => {
          console.log('Confirm Okay');
          navigator['app'].exitApp();
        }
      }
    ]
  });
  await alert.present();
  }