Uso de SuperTokens en una aplicación VueJS con su propia interfaz de usuario

Esta publicación lo guiará sobre cómo agregar autenticación a una aplicación VueJS con SuperTokens usando su propia interfaz de usuario. Construiremos nuestros propios formularios de autenticación y para que esos formularios funcionen. supertokens-web-js ¿Qué es SuperTokens? SuperTokens es un proyecto de código abierto que le permite agregar autenticación a su aplicación rápidamente. Ofrece varios métodos de autenticación (llamados recetas). Junto con una interfaz de usuario preconstruida, también ofrece un SDK de JS estándar llamado que puede usar para crear su propia interfaz de usuario. En este tutorial, aprenderemos cómo usar para agregar autenticación a una aplicación VueJS. Nos centraremos en la contraseña del correo electrónico y el flujo de inicio de sesión social, pero también puede . supertokens-web-js supertokens-web-js elegir otro método de autenticación Arquitectura SuperTokens está construido a partir de tres componentes: SDK de interfaz SDK de servidor Un microservicio que se comunica con una base de datos (llamada SuperTokens Core). Crearemos nuestros propios formularios de inicio de sesión, registro y restablecimiento de contraseña. Luego, usaremos el en nuestra aplicación Vue para hacer que estos formularios sean funcionales al invocar las funciones relevantes para cada acción. Estas funciones interactuarán con las API expuestas a través del SDK de SuperTokens que está integrado en su capa de back-end. supertokens-web-js Para el backend, usaremos el SDK . Las API expuestas por este SDK seguirán hablando con SuperTokens Core para leer/escribir información en la base de datos. supertokens-node El servicio central de SuperTokens puede ser autohospedado (y conectado a su propia base de datos), o ser alojado por el equipo detrás de SuperTokens (regístrese en ). En el blog, usaremos una versión de demostración gratuita del núcleo alojado en supertokens.com https://try.supertokens.com Interfaz Comience creando una nueva aplicación Vue: npm init vue@latest Habilitaremos Vue Router y Typescript para el proyecto. Elija sí para ellos en el aviso: ✔ Project name: … ... ✔ Add TypeScript? … Yes ✔ Add Vue Router for Single Page Application development? … Yes ... Scaffolding project in ./ ... Done. Una vez hecho esto, dirígete al proyecto e instala las siguientes dependencias: npm i supertokens-node supertokens-web-js cors dotenv express npm-run-all La se usará en el frontend para agregar funciones de autenticación y restablecimiento de contraseña a su interfaz de usuario personalizada y la se usará en el backend para exponer las rutas API de autenticación. supertokens-web-js supertokens-node Llame a la función de init supertokens-web-js Inicializaremos el en el archivo raíz de nuestra aplicación Vue, es decir, : supertokens-web-js /src/main.ts import ThirdPartyEmailPassword from "supertokens-web-js/recipe/thirdpartyemailpassword"; import Session from "supertokens-web-js/recipe/session"; SuperTokens.init({ appInfo: { appName: "SuperTokens Vue ThirdPartyEmailPassword Example", apiDomain: "http://localhost:3001", }, recipeList: [ThirdPartyEmailPassword.init(), Session.init()], }); En el código anterior, la función inicializa en la interfaz. Llamamos a esta función en el archivo raíz de nuestra aplicación, para que podamos usar la función de administración de sesiones en toda la aplicación. También indica el tipo de autenticación que queremos usar; en nuestro caso, es inicio de sesión social + contraseña de correo electrónico (receta ). init supertokens-web-js ThirdPartyEmailPassword Crear plantilla HTML de AuthView Ahora comenzaremos por crear la plantilla HTML que representa la interfaz de usuario de registro e inicio de sesión. Como ejemplo, puede consultar . esta plantilla HTML El archivo de plantilla llama a las siguientes funciones para manejar el inicio de sesión social y el registro/inicio de sesión con correo electrónico y contraseña: : esta función permite a los usuarios autenticarse a través de su cuenta de Github onGithubPressed : esta función permite a los usuarios autenticarse a través de su cuenta de Google onGooglePressed : esta función se activa cuando el usuario ingresa su correo electrónico y contraseña para registrarse o iniciar sesión. onSubmitPressed Crear funciones de plantilla y estado de AuthView Presentaremos esta plantilla HTML en un componente dentro que también contendrá las implementaciones de las funciones anteriores: AuthView /src/views/AuthView.vue Comenzaremos creando estados para almacenar los datos para la autenticación, como el correo electrónico, la contraseña y los mensajes de error de nuestra plantilla: // ... data() { return { // we allow the user to switch between sign in and sign up view isSignIn: true, // this will store the email and password entered by the user. email: "", password: "", // any generic error states error: false, errorMessage: "Something went wrong", // any error states specific to the input fields. emailError: "", passwordError: "", }; } Luego, crearemos una función de inicio de que usará el . Pasaremos el correo electrónico y la contraseña a este método y redirigiremos al usuario a la ruta si la autenticación es exitosa. Esta función se llamará desde la función si el estado es . signIn supertokens-web-js "/" signIn onSubmitPressed isSignIn true signIn: async function (_: Event) { const response = await ThirdPartyEmailPassword.emailPasswordSignIn({ formFields: [ { id: "email", value: this.email, }, { id: "password", value: this.password, }, ], }); if (response.status === "WRONG_CREDENTIALS_ERROR") { // the input email / password combination did not match, // so we show an appropriate error message to the user this.errorMessage = "Invalid credentials"; this.error = true; return; } if (response.status === "FIELD_ERROR") { response.formFields.forEach((item) => { if (item.id === "email") { // this means that something was wrong with the entered email. // probably that it's not a valid email (from a syntax point of view) this.emailError = item.error; } else if (item.id === "password") { this.passwordError = item.error; } }); return; } // login is successful, and we redirect the user to the home page. // Note that session cookies are added automatically and nothing needs to be // done here about them. window.location.assign("/"); } Si el campo de en el cuerpo de la respuesta es y la es , implica que el usuario ingresó una cadena que falló en la validación del correo electrónico en el backend (probablemente porque no es un correo electrónico válido). Así que almacenamos el estado de error y mostramos el mensaje de error en la interfaz de usuario para el usuario. Este es un ejemplo de cómo puede hacer que aparezca el mensaje de error debajo del campo de correo electrónico: status "FIELD_ERROR" id "email" Similarmente, donde invocamos la función de para manejar el flujo de . podemos implementar el signUp emailPasswordSignUp supertokens-web-js emailPasswordSignUp Para el inicio de sesión social, usamos los proveedores de autenticación de Google y Github. Cuando se llama a las funciones o , llamamos al método y pasamos el nombre del proveedor en los parámetros. También proporcionamos una URL de devolución de llamada como parámetro de URL de a la que los proveedores redirigirán una vez que se complete el proceso de autenticación. En nuestro ejemplo, usamos para Google y para GitHub. onGithubPressed onGooglePressed getAuthorisationURLWithQueryParamsAndSetState authorisationURL http://localhost:3000/auth/callback/google http://localhost:3000/auth/callback/github Estas URL también deben configurarse en el tablero del proveedor. Aquí están las funciones para Github y Google respectivamente: onGithubPressed: async function () { const authUrl = await ThirdPartyEmailPassword.getAuthorisationURLWithQueryParamsAndSetState({ providerId: "github", // This is where github should redirect the user back after login or error. // This URL goes on the github dashboard as well. authorisationURL: "http://localhost:3000/auth/callback/github", }); window.location.assign(authUrl); }, onGooglePressed: async function () { const authUrl = await ThirdPartyEmailPassword.getAuthorisationURLWithQueryParamsAndSetState({ providerId: "google", // This is where google should redirect the user back after login or error. // This URL goes on the google dashboard as well. authorisationURL: "http://localhost:3000/auth/callback/google", }); window.location.assign(authUrl); } Una vez que el usuario finaliza la autenticación en el sitio web del proveedor, se le redirige a la ruta . Aquí llamamos a la función de que consume el código de autorización (que se envía de vuelta desde el proveedor) para iniciar la sesión del usuario. http://localhost:3000/auth/callback/ thirdPartySignInAndUp supertokens-web-js Esta es la función que maneja el flujo anterior en el componente dentro del archivo : AuthCallbackView /src/views/AuthCallbackView.vue mounted: async function () { try { const response = await ThirdPartyEmailPassword.thirdPartySignInAndUp(); if (response.status !== "OK") { // either the user did not complete the login process, or something else went wrong. return window.location.assign("/auth?error=signin"); } // sign in successful. // The session tokens are handled automatically via our SDK. window.location.assign("/"); } catch (_) { window.location.assign("/auth?error=signin"); } } Configuración de enrutamiento para mostrar los formularios de registro/inicio de sesión Vue CLI ya genera el enrutamiento inicial para nuestra aplicación dentro . /src/router.index.ts Actualizaremos este archivo para que la ruta cargue el componente y la ruta cargue el componente que creamos anteriormente: /auth AuthView /auth/callback/:provider AuthCallbackView import { createRouter, createWebHistory } from "vue-router"; import AuthView from "../views/AuthView.vue"; const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: "/auth", name: "auth", component: () => AuthView, }, { path: "/auth/callback/:provider", name: "authcallback", component: () => AuthCallbackView, } ], }); export default router; Integración de back-end Puede ver la sección de configuración rápida del backend , o incluso copiar el código de . Como un resumen: en nuestros documentos en supertokens.com nuestra aplicación de ejemplo Debe inicializar el y proporcionarle la lista de (similar a como lo hizo en la interfaz). supertokens-node recipeList Luego, debe configurar y agregar el y el controlador de errores a su aplicación. El SuperTokens expone todas las rutas API relacionadas con la autenticación (como iniciar sesión, registrarse, cerrar sesión, etc.) en la interfaz. CORS middleware errorHandler middleware Finalmente, debe proporcionar el URI de (ubicación) del núcleo de SuperTokens. Para comenzar rápidamente, puede proporcionarlo (este es un núcleo que alojamos con fines de demostración). connectionURI "https://try.supertokens.com" Una vez que haya configurado correctamente su servidor, ahora puede intentar registrarse en la interfaz. Gestión de sesiones Después de la autenticación, mostraremos un componente en la página dentro de . Primero, crearemos la plantilla HTML en : HomeView /src/views/HomeView.vue /src/html/homeView.html SIGN OUT 🥳🎉 Login successful Your user ID is {{ `${userId}` }} CALL API ------------------------------------ View the code on GitHub Vue Demo app. Made with ❤️ using supertokens.com Luego, dentro de , verificaremos si el usuario está autenticado mediante el método expuesto por la receta de sesión del . /src/views/HomeView.vue doesSessionExist supertokens-web-js Para los usuarios autenticados, mostramos un botón de cierre de sesión con información sobre su sesión. Cuando un usuario hace clic en este botón, llamamos al método de que borra la sesión del usuario. signOut supertokens-web-js Para usuarios no autenticados, podemos redirigirlos a la página . /auth import { defineComponent } from "vue"; import Session from "supertokens-web-js/recipe/session"; import ThirdPartyEmailPassword from "supertokens-web-js/recipe/thirdpartyemailpassword"; const apiPort = import.meta.env.VUE_APP_API_PORT || 3001; const apiDomain = import.meta.env.VUE_APP_API_URL || `http://localhost:${apiPort}`; export default defineComponent({ data() { return { // if session is false, we show a blank screen // else we render the UI session: false, userId: "", }; }, methods: { signOut: async function () { await ThirdPartyEmailPassword.signOut(); window.location.assign("/auth"); }, checkForSession: async function () { if (!(await Session.doesSessionExist())) { // since a session does not exist, we send the user to the login page. return window.location.assign("/auth"); } const userId = await Session.getUserId(); // this will render the UI this.session = true; this.userId = userId; }, callAPI: async function () { const response = await fetch(`${apiDomain}/sessionInfo`); if (response.status === 401) { // this means that the session has expired and the // user needs to relogin. window.location.assign("/auth"); return; } const json = await response.json(); window.alert("Session Information:\n" + JSON.stringify(json, null, 2)); }, }, mounted() { // this function checks if a session exists, and if not, // it will redirect to the login screen. this.checkForSession(); }, }); Para la ruta , redirigiremos al usuario a la página de inicio si ya existe una sesión: /auth checkForSession: async function () { if (await Session.doesSessionExist()) { // since a session already exists, we redirect the user to the HomeView.vue component window.location.assign("/"); } }, Finalmente, para cargar el componente en actualizaremos el archivo : HomeView "/" /src/router/index.ts const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: "/", name: "home", component: () => HomeView, }, // ... ], }); export default router; Si ahora visita después de la autenticación, debería ver la siguiente página: http://localhost:3000 Olvidé el flujo de contraseña En la interfaz de usuario de inicio de sesión, tenemos un enlace a la página de contraseña olvidada. En esta página, el usuario puede ingresar su correo electrónico y recibir un enlace de restablecimiento de contraseña en su bandeja de entrada. Cuando visitan ese enlace, pueden ingresar su nueva contraseña en esa página para cambiar su contraseña. Primero, crearemos la plantilla HTML dentro . que puede usar. /src/html/forgotPassword.html Aquí hay un ejemplo Crearemos un componente dentro del archivo donde representaremos la plantilla anterior: /src/views/ForgotPassword.vue En la plantilla HTML, representamos condicionalmente un formulario, basado en una variable llamada , que es una variable de estado que representa si se ha generado o no un token de restablecimiento de contraseña. Esta variable se establece en función del token presente en los parámetros de consulta de la URL de la página. En el caso de que el usuario haya hecho clic en el botón de contraseña olvidada (en la página de inicio de sesión), no hay ningún token presente en los parámetros de consulta de la URL de la página, por lo que la variable se establece en . tokenPresent tokenPresent tokenPresent false Dado que es , representamos el formulario donde el usuario ingresará su correo electrónico para obtener el enlace de restablecimiento de contraseña. Cuando el usuario ingresa su correo electrónico en este formulario y lo envía, llamamos al método de y pasamos su correo electrónico. Esta función interactúa con una API de back-end para enviar un enlace de restablecimiento de contraseña en el correo electrónico del usuario, si ese correo electrónico existe en SuperTokens. tokenPresent false sendPasswordResetEmail supertokens-web-js El enlace de restablecimiento de contraseña es como . Este enlace tiene la misma ruta que la página de contraseña olvidada, sin embargo, dado que la URL tiene el parámetro de consulta de , debe mostrar el formulario donde el usuario puede ingresar su nueva contraseña. http://localhost:3000/auth/reset-password?token=....&rid=thirdpartyemailpassword token Cuando ingresan su nueva contraseña en el formulario, llamamos a la función con la nueva contraseña. Esta función leerá automáticamente el token de la URL y llamará a la API de backend de SuperTokens para cambiar la contraseña del usuario. submitNewPassword En caso de que el token de restablecimiento de contraseña ya se haya consumido o haya caducado, la llamada de función devolverá un estado no y luego podemos mostrar un mensaje en la interfaz de usuario para solicitar al usuario que regrese a la pantalla de inicio de sesión. "OK" import ThirdPartyEmailPassword from "supertokens-web-js/recipe/thirdpartyemailpassword"; import { defineComponent } from "vue"; export default defineComponent({ data() { /** * If the URL has a token query param, it means that we should show the * "enter new password" screen, else we should ask the user for their email * to send the password reset link. */ const urlParams = new URLSearchParams(window.location.search); const token = urlParams.get("token"); return { // the email property is used for the enter email screen email: "", error: false, errorMessage: "Something Went Wrong", didSubmit: false, // if tokenPresent is true, it means that the user has clicked on the // reset password link. tokenPresent: token !== null, password: "", }; }, methods: { onSubmitClicked: async function () { if (this.tokenPresent) { // we try and change the user's password now by consuming the token try { const response = await ThirdPartyEmailPassword.submitNewPassword({ formFields: [ { id: "password", value: this.password, }, ], }); if (response.status === "FIELD_ERROR") { // this indicates that the password entered by the user // did not match the backend password validation logic. throw new Error(response.formFields[0].error); } else if (response.status === "RESET_PASSWORD_INVALID_TOKEN_ERROR") { // the password reset token was consumed already, or has expired. // in this case, the user should go back to the login screen or the // enter email screen throw new Error("Password reset token has expired, please go back to the sign in page"); } // password reset successful. window.location.assign("/auth"); } catch (e: any) { this.errorMessage = e.message; this.error = true; } } else { // the user has entered an email for whom the password reset link // will be sent. try { const response = await ThirdPartyEmailPassword.sendPasswordResetEmail({ formFields: [ { id: "email", value: this.email, }, ], }); if (response.status !== "OK") { // this means that the email validation logic failed. throw new Error(response.formFields[0].error); } // a password reset email was sent successfully. if (this.didSubmit !== true) { // we change the UI to show that the email has been sent this.didSubmit = true; } } catch (e: any) { this.errorMessage = e.message; this.error = true; } } }, }, }); Si la función tiene éxito, significa que la contraseña del usuario se ha restablecido correctamente y redirigimos al usuario a la página para que ahora pueda iniciar sesión con su nueva contraseña. submitNewPassword /auth Para cargar el componente en la ruta , realizaremos los siguientes cambios en el archivo : ForgotPassword /auth/reset-password /src/router/index.ts const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ // ... { path: "/auth/reset-password", name: "resetPassword", component: () => ForgotPasswordView, }, ], }); Una vez que haga eso, si ahora visita , deberías ver la siguiente página: http://localhost:3000/auth/reset-contraseña Si ingresa su correo electrónico y presiona el botón "Enviarme un correo electrónico", debería recibir un enlace para restablecer su contraseña en el correo electrónico ingresado: Después de hacer clic en el enlace, puede ingresar su nueva contraseña y presionar el botón "Cambiar contraseña" para actualizar su contraseña: Configuración básica de Supertokens Mientras realizamos la configuración del back-end, estamos usando como el URI de para el núcleo. Esta es una instancia central de demostración alojada por el equipo de SuperTokens. Puede usar esto durante el tiempo que desee, pero cuando se comprometa a usar SuperTokens, debe cambiar a una versión o del núcleo. "https://try.supertokens.com" connectionURI autohospedada administrada Conclusión Usamos el para agregar contraseña de correo electrónico y autenticación social junto con la funcionalidad de contraseña olvidada a una aplicación Vue. Enlaces útiles: supertokens-web-js Ejemplo de aplicación Vue Discord comunidad (para hacer preguntas) Lista de recetas/métodos de autenticación Escrito por la gente de . ¡Espero que lo hayas disfrutado! Siempre estamos disponibles en nuestro servidor Discord. Únase a nosotros si tiene alguna pregunta o necesita ayuda. SuperTokens También publicado . aquí

Uso de SuperTokens en una aplicación VueJS con su propia interfaz de usuario

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

El modelo Bitcoin UTXO, impulsando un ecosistema único

Las capas invisibles: por qué las entrevistas con los usuarios son un activo irremplazable

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

El modelo Bitcoin UTXO, impulsando un ecosistema único

Las capas invisibles: por qué las entrevistas con los usuarios son un activo irremplazable

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps