Makina Blog

Le blog Makina-corpus

Authentification OAuth 2.0 avec Ionic 2


Souvent, pour pouvoir utiliser des API de services tiers, on s'authentifie avec le protocole OAuth.

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.

Actualités en lien

Image
mobile visuel
05/01/2023

Comment choisir sa technologie mobile ?

Une multitude de solutions pour développer une application mobile existent. Il est donc important de comprendre laquelle est la plus adaptée selon son besoin. Ces solutions peuvent être classées en trois catégories : Natif, Web cross-platform et Natif cross-platform.

Voir l'article
Image
Mobile 3D
29/03/2017

PWA : Atteindre un score élevé dans Google Lighthouse avec Ionic 2

Quelques astuces pour créer une Progressive Web App de qualité avec Ionic 2.

Voir l'article
12/07/2016

Tout savoir avant de créer son application mobile

Entre app native, précompilée, hybride et PWA, le choix est large.

Voir l'article

Inscription à la newsletter

Nous vous avons convaincus