Zum Inhalt

Authorisierung

Die API des Contentfly CMS basiert auf einer Token-Authentifizierung. Dieser Token kann entweder manuell gesetzt, oder über ein Login (Benutzername und Passwort) dynamisch geladeb werden.

Login

Seiten anlegen

  • ionic generate page loading
  • ionic generate page login
  • ionic generate page start

SDK initialisieren

app/app.component.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = 'LoadingPage';

  constructor(..., private contentflySdk : ContentflySdk) {

    platform.ready().then(() => {

      this.contentflySdk.setDebug(true);

      return this.contentflySdk.ready();
    }).then(() => {
      if(this.contentflySdk.user.exists()){
        this.rootPage = 'StartPage';
      }else{
        this.rootPage = 'LoginPage';
      }
      statusBar.styleDefault();
      splashScreen.hide();
    })
  }
}

Login

pages/login/login.html

 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
<ion-header>
  <ion-navbar>
    <ion-title>Login</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>

    <ion-item>
      <ion-label color="primary"  floating>Benutzername</ion-label>
      <ion-input type="text" [(ngModel)]="username" [disabled]="doLogin"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label color="primary"  floating>Passwort</ion-label>
      <ion-input type="password" [(ngModel)]="password" [disabled]="doLogin"></ion-input>
    </ion-item>

  </ion-list>

  <button ion-button full (click)="login()" [disabled]="!username || !password || doLogin">
    <ion-spinner [hidden]="!doLogin" name="ios-small"></ion-spinner> Einloggen
  </button>
</ion-content>

pages/login/login.ts

 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
export class LoginPage {

  doLogin : boolean = false;
  password : string = '';
  username : string = '';

  constructor(private contentflySdk : ContentflySdk, public navCtrl: NavController, public navParams: NavParams, private toastCtrl : ToastController) {
  }

  login(){
    this.doLogin = true;

    this.contentflySdk.login(this.username, this.password).then(() => {

      this.navCtrl.setRoot('StartPage');

    }).catch((message) => {
      this.doLogin = false;

      let toast = this.toastCtrl.create({
        message: message.error ? message.error.message : 'Der Server ist derzeit leider nicht erreichbar.',
        duration: 5000,
        position: 'center'
      });

      toast.present();
    });
  }  


}

Logout

pages/start/start.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<ion-header>
  <ion-navbar>
    <ion-title>Startseite</ion-title>
    <ion-buttons end>
      <button ion-button (click)="logout()">
        Ausloggen
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

pages/start/start.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
export class StartPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, private contentflySdk : ContentflySdk) {
  }

  logout(){
    this.contentflySdk.logout();
    this.navCtrl.setRoot('LoginPage');
  }

}

Statischer Token

app/app.component.ts

 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
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = 'LoadingPage';

  constructor(..., private contentflySdk : ContentflySdk) {
    this.contentflySdk.setStaticToken(CONTENTFLY_TOKEN);

    platform.ready().then(() => {

      return this.contentflySdk.ready();

    }).then(() => {
      if(this.contentflySdk.lastSyncDate()){
        this.rootPage = 'StartPage';
      }else{
        this.rootPage = 'SyncPage';
      }

      statusBar.styleDefault();
      splashScreen.hide();
    });

  }
}

Im obigen Beispiel wird die Synchronisierung des Contentfly SDK verwendet und beim Starg der App abgefragt, ob bereits Daten vorhanden sind. Wenn nicht und die App zum ersten Mal gestartet wird, wird die Synchronisierungs-Seite aufgerufen.

Statischer Token vs Login

Da beim statischen Token dieser fest in der App hinterlegt werden
und bei Token-Änderungen (z.B. wegen Missbrauch) ein App-Update veröffentlicht werden muss, empfehlen wir wenn möglich immer die Login-Variante.