Crear una nueva app Ionic basada en la plantilla corporativa

Última modificación por Administrator el 2020/01/23 16:12

El Gobierno de Cantabria proporciona una "starter template" con configuración básica y capacidad de obtener el token de autenticación del SSO corporativo y utilizarlo para presentar las credenciales contra la API Rest también conectada al SSO.

Crear una copia funcional de la plantilla Ionic corporativa.

ionic start miApp https://gitlab.com/gobcan/MiApp.git

Modificar los datos básicos del proyecto

Los datos básicos como el nombre de la aplicación y la versión hay que configurarlos a mano modificando el fichero package.json localizado en la carpeta raíz.

packagejson.png

Modificar los datos de configuración del entorno de cada proyecto

Los datos de configuración (urls, constantes generales, etc) estarán centralizados en el fichero src/environments/environment.<entorno>.ts.

Fichero /src/environments/environment.<entorno>.ts

En el fichero /src/app/config.ts se configuran las siguientes propiedades:

  • KeycloakConfig.url: Url del SSO donde obtener el token. Está Url será la proporciona el Gobierno de Cantabria.
  • KeycloakConfig.realm: Nombre del realm donde se ha definido el cliente móvil dentro del SSO. Este valor será proporcionado por el Gobierno de Cantabria.
  • KeycloakConfig.clientId: nombre que identifica a la App dentro del SSO. Este valor será proporcionado por el Gobierno de Cantabria.
  • KeycloakConfig.url: URL del SSO donde obtener el token. Está Url será la proporciona el Gobierno de Cantabria.
  • environment.apiURL: URL raíz de los servicios web.
    Ejemplo de configuración:
import { KeycloakConfig } from 'keycloak-angular';

// Add here your keycloak setup infos
const keycloakConfig: KeycloakConfig = {
  url: 'http://<IP>:<PUERTO>/auth',
  realm: '<REALM>',
  clientId: '<ID_CLIENTE>'
};

export const environment = {
  production: true,
  apiUrl: 'http://<url>:<puerto>/<ID_CLIENTE>/<RUTA>',
  keycloakConfig
};

Una vez configurados los ficheros para cada entorno bastará con añadir el parámetro <entorno> para la generación de distribuibles correspondientes. Por ejemplo:

ionic cordova build android --prod

Páginas públicas y páginas privadas

Por defecto todas las páginas de la aplicación serán privadas. Para que una página sea pública, habrá que especificarlo explícitamente en el fichero src/app/app-init.ts añadiéndo su ruta al array bearerExcludedUrls.

excluded.png

También hay que asegurarse de que se elimina la propiedad canActivate del fichero de rutas.

rutas.png

Si se quisiera acotar los accesos a las páginas en función del ROL, además de la propiedad canActivate con valor a CanAuthenticationGuard, sería necesario añadir la propiedad data con el array de roles permitidos.

roles.png

© 2014 GOBIERNO DE CANTABRIA - AVISO LEGAL Y PROTECCIÓN DE DATOS