Configurar el client
Configuremos el componente client.
El directorio client contiene:
- El archivo index.html que contiene el código HTML para la aplicación frontend
- El archivo main.css que contiene el código CSS para la aplicación frontend
- El archivo main.js que contiene el código JavaScript
- El archivo de configuración client-package.json
Codificaremos index.html y main.js. También realizaremos un cambio en el client-package.json para asegurar que la página de inicio de la aplicación sea la página autenticada.
Analizaremos el código al final de esta sección.
Copia el código a continuación y pégalo en los archivos respectivos ubicados en el directorio client/ de tu proyecto usando un IDE y guarda los archivos.
<!DOCTYPE html>
<html>
<head>
<title>Profile Information</title>
<link rel=“stylesheet” href=“https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" >
<script src=“main.js”></script>
<script src=“https://static.zohocdn.com/catalyst/sdk/js/4.0.0/catalystWebSDK.js"> </script>
<script src=”/__catalyst/sdk/init.js”></script>
<style>
.card {
max-width: 500px;
margin: auto;
text-align: center;
font-family: arial;
background-color: #a5a4a4;
}
.title {
font-size: 23px;
color: black;
}
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 50%;
font-size: 18px;
border-radius: 8px;
}
a {
text-decoration: none;
font-size: 22px;
color: black;
}
button:hover,
a:hover {
opacity: 0.7;
}
body{
background-color:#a5a4a4;
font-size: 20px;
visibility: hidden;
}
p{
font-family: ‘Trebuchet MS’, ‘Lucida Sans Unicode’, ‘Lucida Grande’, ‘Lucida Sans’, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
}
</style>
</head>
<body onload=“showProfile()">
<h1 style=“text-align:center”>User Profile Information</h1>
<div class=“card”>
<img width=“200px” height=“450px” src=“https://cdn2.iconfinder.com/data/icons/user-management/512/profile_settings-512.png" alt=“John” style=“width:80px;height: 80px;” >
<p class=“title” id=“fname”></p>
<p class=“title” id=“lname”></p>
<p class=“title"id=“mailid” ></p>
<p class=“title"id=“tzone” ></p>
<p class=“title"id=“ctime” ></p>
<p><button onclick=“logout()">Logout</button></p>
</div>
</body>
</html>
function showProfile() {
debugger;
//El método catalyst.auth.isUserAuthenticated() permite solo a los usuarios autenticados, es decir, los usuarios que han iniciado sesión, acceder a las páginas
//Puedes cargar este método en el body de tu página para permitir que solo los usuarios autenticados accedan a una página específica
catalyst.auth.isUserAuthenticated().then(result => {
//Si el usuario ha iniciado sesión, estos contenidos de la página se mostrarán al usuario
document.body.style.visibility = "visible";
const first_name = "First Name: " + result.content.first_name;
document.getElementById("fname").innerHTML = first_name;
const last_name = "Last Name: " + result.content.last_name;
document.getElementById("lname").innerHTML = last_name;
const mailid = "Email Address: " + result.content.email_id;
document.getElementById("mailid").innerHTML = mailid;
const tzone = "Time Zone: " + result.content.time_zone;
document.getElementById("tzone").innerHTML = tzone;
const created_time = " Joined On: " + result.content.created_time;
document.getElementById("ctime").innerHTML = created_time;
}).catch(err => {
//Si el usuario no ha iniciado sesión, esto se mostrará y será redirigido a la página de inicio de sesión
document.body.style.visibility = "visible";
document.body.innerHTML = 'You are not logged in. Please log in to continue. Redirecting you to the login page..';
setTimeout(function () {
window.location.href = "/__catalyst/auth/login";
}, 5000);
});
}
function logout() {
//El método signOut se usa para cerrar la sesión del usuario en la aplicación
const redirectURL = location.protocol +"//"+ location.hostname + “/__catalyst/auth/login”;
catalyst.auth.signOut(redirectURL);
}
{
"name" : "ZylkerTechnologies",
"version" : "0.0.1",
"homepage" : "/__catalyst/auth/login",
"login_redirect" : "index.html"
}
El directorio client ahora está configurado.
Repasemos cómo funcionan la función y el código del client:
- El usuario final primero verá la página de inicio de sesión que configuraste y estilizaste en la consola.
- Para crear una cuenta, hará clic en la opción Sign Up y será dirigido a la página Sign Up.
-
Una vez que se ingresa la información y hacen clic en Sign Up, o si intentan registrarse usando un Social Login de su preferencia, sus detalles se proporcionarán como entrada JSON a la función de Custom User Validation (authorization_portal_function/CustomUserValidationFunc.java).
-
La función solo autenticará a los usuarios si se cumple la condición que has codificado. Para este tutorial, los usuarios solo serán autenticados si se registraron en la aplicación usando una dirección de correo electrónico registrada en Zylker.
-
Tras una autenticación exitosa, se enviará un correo electrónico de Email Verification a la cuenta que usaron para registrarse en la aplicación.
-
Una vez que el usuario verifica su dirección de correo electrónico haciendo clic en el enlace proporcionado en el correo, quedará registrado en la aplicación. Sus detalles se pueden ver en la sección User Management del componente Authentication.
-
El usuario final ahora puede iniciar sesión en la aplicación usando sus credenciales autenticadas.
-
El usuario final también puede restablecer su contraseña haciendo clic en la opción Forgot Password. En este caso, se enviará el correo electrónico de Password Reset a su correo registrado. Siguiendo los pasos mencionados en el correo, pueden restablecer fácilmente sus credenciales.
Configuremos el componente client.
El directorio client de la aplicación web React contiene los siguientes archivos:
- El directorio raíz del client contiene un archivo client-package.json, que es un archivo de configuración que define el nombre, versión, página de inicio predeterminada y página de redirección del componente client.
- El directorio client zylkertechnologies contiene dos subcarpetas, según la estructura de proyecto predeterminada de una aplicación React:
- La carpeta public se usa generalmente para contener archivos que pueden ser accedidos abiertamente por los navegadores mediante URLs públicas, como archivos de íconos de la aplicación web, el archivo index.html y el archivo 404.html.
- La carpeta src contiene los archivos fuente de la aplicación que se incluirán en la carpeta de compilación cuando compilemos la aplicación React.
- El directorio client también contiene el archivo de dependencias package.json y un archivo oculto .gitignore.
- Los archivos presentes en la carpeta public incluyen:
- Archivos nativos de React como Tests.js, index.js, reportWebVitals.js, logo.svg y App.test.js.
- index.html - Contiene el SDK web de Catalyst que te permite acceder a los componentes de Catalyst.
- Crearemos un archivo adicional 404.html que contendrá los elementos de manejo de errores.
- Los archivos presentes en la carpeta src incluyen:
- Archivos nativos de React como setupTests.js, reportWebVitals.js, logo.svg y App.test.js.
- App.js - Contiene las rutas hash de tu aplicación
- App.css - Contiene los elementos de estilo generales de tu aplicación
- index.js - El punto de entrada de la aplicación React.
- index.css - Contiene el estilo de los elementos presentes en el archivo index.js.
- Crearás los siguientes archivos en la carpeta src:
- Button.css - Contiene los elementos de estilo para el botón Logout que estará presente en la aplicación.
- Button.js - Contiene el componente React para el botón Logout presente en la aplicación.
- Layout.js - Contiene el componente React para la lógica de la aplicación
- LoginPage.js - Contiene el componente React para las páginas de inicio de sesión que generaste en la consola de Catalyst.
- UserProfile.css - Contiene los elementos de estilo para la página de información del usuario que se mostrará una vez que inicies sesión en la aplicación.
- UserProfile.js - Contiene el componente React para renderizar los detalles del usuario después de iniciar sesión.
Codificaremos en los archivos index.html, 404.html, App.js, App.css, index.css, index.js, Button.css, Button.js, Layout.js, LoginPage.js, UserProfile.css y UserProfile.js. También realizaremos un cambio en el client-package.json para asegurar que la página de inicio de la aplicación sea la página autenticada.
Instalar paquetes adicionales de React
Es necesario instalar el paquete react-router-dom en el directorio client AuthorizationPortal/zylkertechnologies usando el comando de CLI indicado a continuación:
Este comando instalará el módulo react-router-dom, guardará las dependencias y nos permitirá realizar el enrutamiento hash requerido en nuestra aplicación.
Este es el directorio client después de haber creado los archivos necesarios y eliminado los archivos innecesarios.
Copia el código proporcionado a continuación y pégalo en index.html y 404.html, respectivamente, ubicados en el directorio client (zylkertechnologies/public/) usando un IDE y guarda el archivo.
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“utf-8” />
<meta name=“viewport” content=“width=device-width, initial-scale=1” />
<meta name=“theme-color” content="#000000" />
<meta
name=“description”
content=“Web site created using create-react-app”
/>
<link rel=“manifest” href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<script src=“https://static.zohocdn.com/catalyst/sdk/js/4.0.0/catalystWebSDK.js"> </script>
<script src=”/__catalyst/sdk/init.js"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id=“root”></div>
</body>
</html>
<!DOCTYPE html>
<html lang=“en”>
<head>
<h2>You are viewing this 404 page since you tried to access a page which does not exist.</h2>
</head>
</html>
Copia el código proporcionado a continuación y pégalo en App.css, App.js, index.js, index.css, Button.css, Button.js, Layout.js, LoginPage.js, UserProfile.css y UserProfile.js, respectivamente, ubicados en el directorio client (zylkertechnologies/src/) usando un IDE y guarda el archivo.
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.inputs {
width: 90%;
padding: 15px;
margin: 15px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
border-radius: 8px;
}
#root {
background-color: #c0c0c0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 1;
}
import “./App.css”;
import { HashRouter, Navigate, Route, Routes } from “react-router-dom”;
import Layout from “./Layout”;
function App() {
return (
<HashRouter>
<Routes>
<Route path="/" element={<Layout />} />
<Route path="" element={<Navigate to="/" replace />} />
<Route path="*" element={<Navigate to="/" replace />} />
</Routes>
</HashRouter>
);
}
export default App;
body {
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #c0c0c0;
}
import React from “react”;
import “./index.css”;
import App from “./App”;
import * as ReactDOM from “react-dom/client”;
const root = ReactDOM.createRoot(document.getElementById(“root”));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 20%;
font-size: 18px;
border-radius: 8px;
}
button:hover,
.forgetPassword-btn:hover,
a:hover {
opacity: 0.7;
}
a {
text-decoration: none;
font-size: 22px;
color: black;
}
import { useCallback } from “react”;
import “./Button.css”;
function Button({ title }) {
const logout = useCallback(() => {
const redirectURL = “/__catalyst/auth/login”;
window.catalyst.auth.signOut(redirectURL);
}, []);
return (
<div id=“logoutbtn” style={{ textAlign: “inline-block” }}>
<button onClick={logout} id=“logout” style={{ display: “inline-block” }}>
{title}
</button>
</div>
);
}
export default Button;
import UserProfile from “./UserProfile”;
import LoginPage from “./LoginPage.js”;
import { useEffect, useState } from “react”;
function Layout() {
const [isUserAuthenticated, setIsUserAuthenticated] = useState(false);
const [isFetching, setIsFetching] = useState(true);
const [userDetails, setUserDetails] = useState({
firstName: “”,
lastName: “”,
mailid: “”,
timeZone: “”,
createdTime: “”,
});
useEffect(() => {
window.catalyst.auth
.isUserAuthenticated()
.then((result) => {
let userDetails = {
firstName: result.content.first_name,
lastName: result.content.last_name,
mailid: result.content.email_id,
timeZone: result.content.time_zone,
createdTime: result.content.created_time,
};
setUserDetails(userDetails);
setIsUserAuthenticated(true);
})
.catch((err) => {})
.finally(() => {
setIsFetching(false);
});
}, []);
return (
<>
{isFetching ? (
<p>Loading ….</p>
) : isUserAuthenticated ? (
<UserProfile userDetails={userDetails} />
) : (
<LoginPage />
)}
</>
);
}
export default Layout;
import { useEffect } from “react”;
function Login() {
useEffect(() => {
window.location.href = window.origin + “/__catalyst/auth/login”;
}, []);
return null;
}
export default Login;
.card {
margin: auto;
text-align: center;
font-family: arial;
text-align: center;
font-weight: bold;
}
.title {
font-size: 23px;
color: black;
}
#userimg {
height: 20%;
width: 15%;
}
div.login {
padding-top: 10px;
height: 260px;
width: 500px;
margin: 0 auto;
}
div.signup {
display: none;
}
div.forgotpwd {
display: none;
}
/* Full-width input fields */
input[type=“text”] {
width: 90%;
padding: 15px;
margin: 15px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
border-radius: 8px;
}
/* Add a background color when the inputs get focus */
input[type=“text”]:focus,
input[type=“password”]:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for all buttons */
/* Float cancel and signup buttons and add an equal width */
.seperatebtn {
width: 10%;
padding: 8px;
border-radius: 8px;
}
.signupbtn {
width: 10%;
padding: 8px;
border-radius: 8px;
}
.signupfnbtn {
width: 20%;
padding: 8px;
border-radius: 8px;
}
.pwdfnbtn {
width: 40%;
padding: 8px;
border-radius: 8px;
}
/* The Modal (background) /
.modal {
display: none;
/ Hidden by default /
position: fixed;
/ Stay in place /
z-index: 1;
/ Sit on top /
left: 0;
top: 0;
width: 100%;
/ Full width /
height: 100%;
/ Full height /
overflow: auto;
/ Enable scroll if needed */
background-color: #474e5d;
}
/* Modal Content/Box /
.modal-content {
background-color: #c0c0c0;
margin: 5% auto 15% auto;
/ 5% from the top, 15% from the bottom and centered /
width: 25%;
/ Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: #f1f1f1;
}
.close:hover,
.close:focus {
color: #f44336;
cursor: pointer;
}
/* Clear floats */
.clearfix::after {
content: “”;
clear: both;
display: table;
}
p.homepage {
font-size: 23px;
}
/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 100px) {
.signupbtn {
width: 100%;
}
}
import Button from “./Button”;
import “./UserProfile.css”;
function UserProfile({ userDetails }) {
return (
<div className=“card”>
<br> </br>
<h1 className=“title”>User Profile Information</h1>
<img
alt=“usericon”
id=“userimg”
width=“200px”
height=“450px”
src=“https://cdn2.iconfinder.com/data/icons/user-management/512/profile_settings-512.png"
/>
<p className=“title”>First Name : {userDetails.firstName}</p>
<p className=“title”>Last Name: {userDetails.lastName}</p>
<p className=“title”>Email Address: {userDetails.mailid}</p>
<p className=“title”>Time Zone: {userDetails.timeZone}</p>
<p className=“title”>Joined On: {userDetails.createdTime}</p>
<Button title=“Logout”> </Button>
</div>
);
}
export default UserProfile;
{
"name": "zylkertechnologies",
"version": "0.0.1",
"homepage": "/__catalyst/auth/login",
"login_redirect": "index.html"
}
El directorio client ahora está configurado.
Repasemos el funcionamiento de la función y el código del client:
- El usuario final primero verá la página de inicio de sesión que configuraste y estilizaste en la consola.
- Para crear una cuenta, hará clic en la opción Sign Up y será dirigido a la página Sign Up.
-
Una vez que se ingresa la información y hacen clic en Sign Up, o si intentan registrarse usando un Social Login de su preferencia, sus detalles se proporcionarán como entrada JSON a la función de Custom User Validation (authorization_portal_function/CustomUserValidationFunc.java).
-
La función solo autenticará a los usuarios si se cumple la condición que has codificado. Para este tutorial, los usuarios solo serán autenticados si se registraron en la aplicación usando una dirección de correo electrónico registrada en Zylker.
-
Tras una autenticación exitosa, se enviará un correo electrónico de Email Verification a la cuenta que usaron para registrarse en la aplicación.
-
Una vez que el usuario verifica su dirección de correo electrónico haciendo clic en el enlace proporcionado en el correo, quedará registrado en la aplicación. Sus detalles se pueden ver en la sección User Management del componente Authentication.
-
El usuario final ahora puede iniciar sesión en la aplicación usando sus credenciales autenticadas.
-
El usuario final también puede restablecer su contraseña haciendo clic en la opción Forgot Password. En este caso, se enviará el correo electrónico de Password Reset a su correo registrado. Siguiendo los pasos mencionados en el correo, pueden restablecer fácilmente sus credenciales.
Configuremos el componente client.
El directorio client de la aplicación web Angular contiene:
- El directorio raíz del client contiene un archivo client-package.json, que es un archivo de configuración que define el nombre, versión, página de inicio predeterminada y página de redirección del componente client. Modificaremos este archivo después de haber codificado el componente client.
- Archivos nativos de Angular como angular.json, tsconfig.app.json, tsconfig.json y tsconfig.spec.json.
- El directorio raíz del client también contiene el archivo de dependencias package.json y un archivo .gitignore.
- La carpeta src contiene los siguientes archivos y directorios según la estructura de proyecto predeterminada de la aplicación Angular:
- Archivos nativos de Angular como favicon.ico, main.ts, polyfills.ts y test.ts junto con los directorios assets y environment.
- index.html: El punto de entrada predeterminado de la aplicación.
- style.css: Contendrá cualquier elemento de estilo requerido por la aplicación en general.
- Los archivos presentes en el directorio src/app/ son:
- Archivos nativos de Angular como app.component.css y app.component.spec.ts.
- app.component.html: Contiene el componente HTML que renderiza el enrutamiento que ocurre en la aplicación.
- app.component.ts: Contiene la interfaz global de la aplicación donde se declara una variable de Catalyst para usar los métodos del SDK web de Catalyst.
- app.module.ts: Contiene la lógica de enrutamiento involucrada en la aplicación
Codificaremos los archivos index.html, app.component.html, app.component.ts y app.module.ts.
Crear un componente Layout
Necesitas crear un componente layout en la ruta del directorio src/app/. Este componente contendrá los elementos de estilo, la lógica del client y la lógica de redirección para proporcionar respuestas apropiadas a usuarios autenticados y no autenticados.
Ejecuta el siguiente comando en el directorio src/app/ usando la CLI de Catalyst:
Esto creará una carpeta llamada layout en el directorio src/app/.
Esta carpeta layout contendrá:
- Un archivo nativo de Angular llamado layout.component.pec.ts.
- layout.component.html: Contendrá el componente HTML requerido durante la validación del usuario.
- layout.component.css: Contendrá los elementos de estilo necesarios.
- layout.component.ts: Contendrá la lógica de enrutamiento y redirección.
Codificaremos los archivos layout.component.html, layout.component.css y layout.component.ts.
Crear un componente Login
Necesitas crear un componente login en la ruta del directorio src/app/. Este componente contendrá la lógica de redirección para proporcionar respuestas apropiadas a usuarios autenticados y no autenticados.
Ejecuta el siguiente comando en el directorio src/app/ usando la CLI de Catalyst:
Esto creará una carpeta llamada login en el directorio src/app/.
Esta carpeta login contendrá:
- Un archivo nativo de Angular llamado login.component.pec.ts.
- login.component.html: Contendrá el componente HTML requerido durante la validación del usuario.
- login.component.css: Contendrá los elementos de estilo necesarios.
- login.component.ts: Contendrá la lógica de enrutamiento y redirección.
Codificaremos los archivos login.component.css y login.component.ts.
El directorio client debería verse como el que se muestra en la siguiente imagen.
Ahora puedes comenzar a codificar tu client.
Copia el código a continuación y pégalo en el archivo index.html presente en el directorio src/.
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“utf-8” />
<title>Zylker Technologies</title>
<base href="/app/" />
<meta name=“viewport” content=“width=device-width, initial-scale=1” />
<script src=“https://static.zohocdn.com/catalyst/sdk/js/4.2.0/catalystWebSDK.js"> </script>
<script src=”/__catalyst/sdk/init.js"> </script>
</head>
<body>
<app-root> </app-root>
</body>
</html>
Pega el siguiente código en los archivos app.component.html, app.component.ts y app.module.ts presentes en el directorio src/app/.
<router-outlet> </router-outlet>
import { Component } from ‘@angular/core’;
declare global {
interface Window {
catalyst: any; //Esta es una variable de Catalyst necesaria para acceder a los métodos del SDK web de Catalyst.
}
}
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [’./app.component.css’],
})
export class AppComponent {
}
import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { CommonModule } from ‘@angular/common’;
import { AppComponent } from ‘./app.component’;
import { FormsModule } from ‘@angular/forms’;
import { RouterModule, Routes } from ‘@angular/router’;
import { LayoutComponent } from ‘./layout/layout.component’;
import { LoginComponent } from ‘./login/login.component’;
const approutes: Routes = [
{ path: ‘’, component: LayoutComponent },
{ path: ’login’, component: LoginComponent },
{ path: ‘**’, redirectTo: ’’ },
];
@NgModule({
declarations: [AppComponent, LayoutComponent, LoginComponent],
imports: [
BrowserModule,
CommonModule,
FormsModule,
RouterModule.forRoot(approutes, { useHash: true }),
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
Copia el siguiente código y pégalo en los archivos layout.component.html, layout.component.css y layout.component.ts presentes en el directorio src/app/layout.
<div class=“card” *ngIf=“isAuthenticated”>
<div class=“titleDiv”>
<h1 class=“title”>User Profile Information</h1>
</div>
<div class=“imgDiv”>
<img
id=“userimg”
width=“200px”
height=“450px”
src=“https://cdn2.iconfinder.com/data/icons/user-management/512/profile_settings-512.png"
/>
</div>
<div class=“textDiv”>
<p class=“title” id=“fname”>First Name: {{ firstName }}</p>
<p class=“title” id=“lname”>Last Name: {{ lastName }}</p>
<p class=“title” id=“mailid”>Email ID: {{ mailID }}</p>
<p class=“title” id=“tzone”>Time Zone: {{ timezone }}</p>
<p class=“title” id=“ctime”>CreatedTime: {{ createdTime }}</p>
</div>
<div className=“logoutDiv”>
<button (click)=“logout()” id=“logoutBtn”>Logout</button>
</div>
</div>
<div *ngIf=“isFetching” class=“loading-div”>
<p class=“loading”>Loading…</p>
</div>
.card {
margin: auto;
text-align: center;
font-family: arial;
text-align: center;
font-weight: bold;
}
.title {
font-size: 23px;
color: black;
margin-top: 30px;
margin-bottom: 30px;
font-weight: bold;
}
#userimg {
height: 20%;
width: 15%;
}
#logoutBtn {
background-color: rgb(2, 136, 2);
color: white;
border: none;
border-radius: 8px;
width: 100px;
height: 40px;
margin-bottom: 30px;
cursor: pointer;
}
#logoutBtn:hover {
background-color: rgb(2, 165, 2);
color: white;
border: none;
border-radius: 8px;
width: 100px;
height: 40px;
margin-bottom: 30px;
cursor: pointer;
}
body {
width: 100%;
}
.loading-div {
margin-left: 45%;
}
.loading {
font-weight: bolder;
font-size: large;
}
#logoutBtn:active {
background-color: rgb(2, 172, 2);
color: white;
border: none;
border-radius: 8px;
width: 100px;
height: 40px;
margin-bottom: 30px;
cursor: pointer;
}
import { Component, OnInit } from ‘@angular/core’; //decorador que indica que esto es un componente
import { Router } from ‘@angular/router’;
@Component({
selector: ‘app-layout’,
templateUrl: ‘./layout.component.html’,
styleUrls: [’./layout.component.css’],
})
export class LayoutComponent implements OnInit {
constructor(private router: Router) {}
firstName: any;
lastName: any;
mailID: any;
timezone: any;
createdTime: any;
isAuthenticated: boolean = false;
isFetching: boolean = true;
ngOnInit(): void {
window.catalyst.auth
.isUserAuthenticated()
.then((result: any) => {
console.log(result);
console.log(result.content.email_id);
this.isAuthenticated = true;
this.mailID = result.content.email_id;
this.firstName = result.content.first_name;
this.lastName = result.content.last_name;
this.timezone = result.content.time_zone;
this.createdTime = result.content.created_time;
})
.catch((err: any) => {
console.log(err);
})
.finally(() => {
console.log('finally');
this.isFetching = false;
this.isAuthenticated
? this.router.navigate([''])
: this.router.navigate(['login']);
});
}
logout() {
const redirectURL = ‘/__catalyst/auth/login’;
console.log(redirectURL);
var auth = window.catalyst.auth;
auth.signOut(redirectURL);
}
}
Copia el siguiente código y pégalo en los archivos login.component.css y login.component.ts presentes en el directorio src/app/login.
h1 {
color: red;
}
import { Component, OnInit } from ‘@angular/core’; //decorador que indica que esto es un componente
@Component({
selector: ‘app-login’,
templateUrl: ‘./login.component.html’,
styleUrls: [’./login.component.css’],
})
export class LoginComponent {
ngOnInit(): void {
window.location.href = window.origin + ‘/__catalyst/auth/login’; // Gestiona las redirecciones de inicio de sesión
}
}
Ahora modificaremos el archivo client-package.json presente en el directorio raíz del client.
{
"name": "zylkertechnologies",
"version": "0.0.1",
"homepage": "/__catalyst/auth/login",
"login_redirect": "index.html"
}
El directorio client ahora está configurado.
Repasemos el funcionamiento de la función y el código del client.
-
El usuario final primero verá la página de inicio de sesión que configuraste y estilizaste en la consola.
-
Para crear una cuenta, hará clic en la opción Sign Up y será dirigido a la página Sign Up.
-
Después de ingresar la información y hacer clic en Sign Up, o si intentan registrarse usando un Social Login de su preferencia, sus detalles se completarán y proporcionarán como entrada JSON a la función de Custom User Validation: authorization_portal_function/index.js.
-
La función solo autenticará a los usuarios que se hayan registrado en la aplicación usando una dirección de correo electrónico de Zylker.
-
Tras una autenticación exitosa, se enviará un correo electrónico de Email Verification a la cuenta que usaron para registrarse en la aplicación.
-
Después de que el usuario verifica su dirección de correo electrónico haciendo clic en el enlace proporcionado en el correo, quedará registrado en la aplicación. Sus detalles se pueden ver en la sección User Management del componente Authentication.
-
El usuario final ahora puede iniciar sesión en la aplicación usando sus credenciales autenticadas.
-
El usuario final también puede restablecer su contraseña haciendo clic en la opción Forgot Password.
-
En este caso, se enviará el correo electrónico de Password Reset a su correo registrado. Siguiendo los pasos mencionados en el correo, pueden restablecer fácilmente sus credenciales.
Última actualización 2026-03-24 17:38:39 +0530 IST