0

Estoy probando una aplicación en ionic 4 y angular 8 en el cual tengo que iniciar sesión con Google Sign-In for Websites. El index de la app es el siguiente

<!DOCTYPE html>
<html lang="es">

<head>
  <base href="/" />
  <meta charset="utf-8" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="google-signin-client_id" content="CLIENT_ID.apps.googleusercontent.com">
  <title>Auth</title>
  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
</head>

<body>
  <app-root></app-root>
  <script src="https://apis.google.com/js/platform.js" async defer></script>
</body>

</html>

El botón lo quiero poner en un la página home que viene por defecto en un proyecto en blanco.

<ion-header>
  <ion-toolbar>
    <ion-title>
      Auth
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="g-signin2" data-onsuccess="onSignIn"></div>
</ion-content>

Estoy probando la aplicación de manera local así que la ruta para llegar a la página home es http://localhost:8100/home pero cuando pongo el botón en la página index este aparece sobre la página home y por lo tanto en todas las páginas que sean creadas lo que no es correcto. ¿Como se puede solucionar el problema para que el botón aparezca en la página home?

Nota: No se requiere el plugin Google Plus

3
  • No hay errores en la consola
    – Aleex
    Commented el 11 sept. 2019 a las 15:52
  • ¿Por que motivo lo estas agregando en en index.html?
    – cjara
    Commented el 11 sept. 2019 a las 19:06
  • Como dice @cjara, no debe ir en el index, debes de crear una pagina de login.
    – Legna
    Commented el 13 sept. 2019 a las 18:20

1 respuesta 1

0

Debes crear algo asi:

Creas un archivo que se llame app.routes.ts con esta estructura:

const appRoutes: Routes = [
    {path: 'login', component: LoginComponent},
    {path: 'register', component: RegisterComponent},


    // Esto es lo que hace el lazy load
    {   
      //Cualquier ruta que no sea login, o register debe entrar 
       //aqui
        path: '',
        component: PagesComponent,
        //Este es para seguridad y que si no esta logueado no entre
        //
        canActivate: [LoginGuardGuard],
        loadChildren: './pages/pages.module#PagesModule'
    },

    // Página de error cuando no encuentra una ruta.
    {path: '**', component: NopagefoundComponent}

];

Donde el loadChildren: './pages/pages.module#PagesModule' carga tus rutas despues de comprobar con canActivate: [LoginGuardGuard] que verdaderamente estas logueado(tu servicio de login debe comprobar eso). Así tienes un login separado de tu contenido.

Este es un ejemplo que hice en StackBlitz. Espero que le sirva a alguien.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.