Création de l'application Ionic 2

Pour illustrer cette authentification, nous allons créer une nouvelle application Ionic 2 et nous connecter avec Google OAuth.

ionic start OAuthProject blank --v2
cd OAuthProject
ionic platform add android

Pour pouvoir utiliser l’authentification OAuth, nous avons besoin d’un navigateur web. C’est pourquoi on va ajouter le plugin cordova InAppBrowser.

ionic plugin add cordova-plugin-inappbrowser

Avant d'aller plus loin, si vous voulez tester, il vous faudra créer une application depuis la console de développement de Google. Pour ensuite, demander un ID de client OAuth 2.0 pour application web dans l’onglet des identifiants, avec pour restrictions URI de redirection autorisés http://localhost/callback.

Le composant

Maintenant il ne nous reste plus qu’à écrire quelques lignes de code. D’abord on va créer notre template, dans app/pages/home/home.html.

<ion-header>
    <ion-navbar>
        <ion-title>Oauth Ionic</ion-title>
    </ion-navbar>
</ion-header>
<ion-content padding>
    <button ion-button (click)="login()">Google Login</button>
</ion-content>

Puis on va éditer notre fichier TypeScript, home.ts avec le code suivant :

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { Http} from '@angular/http'

declare var window: any;

@Component({
    templateUrl: './home.html'
})

export class HomePage {

  public constructor(
    public navCtrl: NavController,
    private platform: Platform,
    private http: Http
  ) {}

  public login() {
    this.platform.ready()
      .then(this.googleLogin)
      .then(success => {
        alert(success.access_token);
      }, (error) => {
        alert(error);
      });
  };

  public googleLogin(): Promise<any> {
    return new Promise(function(resolve, reject) {
      const clientId = "693828295623-he7m18picm1rl5e5q52lu55jh4e1clb5.apps.googleusercontent.com";
      const url = `https://accounts.google.com/o/oauth2/auth?client_id=${clientId}` + 
                "&redirect_uri=http://localhost/callback" +
                "&scope=https://www.googleapis.com/auth/youtube" +
                "&response_type=token";
      const browserRef = window.cordova.InAppBrowser.open(
            url,
            "_blank",
            "location=no, clearsessioncache=yes, clearcache=yes"
      );
      let responseParams : string;
      let parsedResponse : Object = {};
      browserRef.addEventListener("loadstart", (evt) => {
          if ((evt.url).indexOf("http://localhost/callback") === 0) {
            browserRef.removeEventListener("exit", (evt) => {});
            browserRef.close();
            responseParams = ((evt.url).split("#")[1]).split("&");
            for (var i = 0; i < responseParams.length; i++) {
              parsedResponse[responseParams[i].split("=")[0]] = responseParams[i].split("=")[1];
            }
            if (parsedResponse["access_token"] !== undefined && 
                parsedResponse["access_token"] !== null) {
              resolve(parsedResponse);
            } else {
              reject("Problème d’authentification avec Google");
            }
          }
      });
      browserRef.addEventListener("exit", function(evt) {
        reject("Une erreur est survenue lors de la tentative de connexion à Google");
      });
    });
  }
}

Analysons maintenant ce bout de code.

Tout d’abord, on demande à notre template d’appeler la fonction ‘login’ lors du click sur le bouton.

(click)="login()"

Cette fonction va alors créer une promesse qui nous affichera en alert soit la réponse positive de google, et donc notre accès à l’API avec le compte utilisateur, soit une erreur (resolve, reject).

Cette connexion a lieu lors de l’utilisation du plugin inAppBrower, et donc à l’ouverture de la page web (avec votre clientID bien sûr) :

const url = "https://accounts.google.com/o/oauth2/auth?client_id=${clientId}" + 
                    "&redirect_uri=http://localhost/callback" +
                    "&scope=https://www.googleapis.com/auth/youtube" +
                    "&response_type=token";

On demande ici à Google de rediriger sa réponse vers http://localhost/callback (redirect_uri).
Puis un accès à l’API de youtube, pour notre exemple, car on a forcément besoin d'un cadre d'utilisation d'api (scope).
Ainsi qu’un token pour réponse (response_type).
Tout en utilisant notre propre identifiant client disponible dans la console de développement de Google (client_id).

Lors de notre appel, on rajoute l'événement loadStart du plugin, afin de récupérer notre réponse grâce à l’url http://localhost/callback, il ne se passera rien tant que l’url est différente.

browserRef.addEventListener("loadstart", (event) => {
});

Testons :

ionic run android

Voilà comment utiliser rapidement et simplement l’authentification OAuth pour une application mobile hybride.