En muchos casos tendrás la necesidad de cambiar la contraseña del usuario identificado con Cognito. En esta entrada vamos a ver cómo hacerlo utilizando Vuejs 2 y Amplify de 2 formas distintas, la primera será haciendo uso de Vuex y la otra será utilizando una función que nos retorne el usuario actual de Cognito.
Modificar la contraseña del usuario con Vuex
Para este caso lo único que deberíamos hacer es previamente tener el usuario que obtenemos en la autenticación con Cognito en el almacén de Vuex, a continuación simplemente deberíamos escribir el siguiente componente y quedaría toda la lógica resuelta:
<template>
<slot-form title="Actualiza tu cuenta" :vuelidate="$v">
<v-layout row wrap>
<v-flex xs12>
<v-alert block type="error" :value="samePassword">
¡La contraseña anterior y la nueva no pueden ser la misma!
</v-alert>
</v-flex>
<v-flex xs12>
<form-group name="email">
<template slot-scope="{ attrs }">
<v-text-field
v-bind="attrs"
:value="form.email"
label="Correo electrónico"
type="email"
disabled
></v-text-field>
</template>
</form-group>
</v-flex>
<v-flex xs12 mb-2>
<form-group name="password">
<template slot-scope="{ attrs }">
<v-text-field
v-bind="attrs"
v-model="form.password"
name="password"
label="Contraseña actual"
@blur="$v.form.password.$touch()"
></v-text-field>
</template>
</form-group>
</v-flex>
<v-flex xs12 mb-2>
<form-group name="newPassword">
<template slot-scope="{ attrs }">
<v-text-field
v-bind="attrs"
v-model="form.newPassword"
name="newPassword"
label="Nueva contraseña"
@blur="$v.form.newPassword.$touch()"
></v-text-field>
</template>
</form-group>
</v-flex>
<v-flex xs12 lg6 md6 pl-1 pr-1>
<v-btn block color="primary" @click="submit">{{
Actualizar contraseña
}}</v-btn>
</v-flex>
</v-layout>
<hr class="mt-4 mb-2" />
<legal-buttons />
</slot-form>
</template>
<script>
import { Auth } from "aws-amplify";
import { required, minLength } from "vuelidate/lib/validators";
import SlotForm from "../components/slots/Form";
export default {
name: "ChangePassword",
components: { SlotForm },
mounted() {
if (this.$store.state.auth.user) {
this.form = {
email: this.$store.state.auth.user.attributes.email,
password: "",
newPassword: ""
};
}
},
data() {
return {
valid: false,
samePassword: false,
form: {
email: "",
password: "",
newPassword: ""
},
passwordVisible: false,
newPasswordVisible: false
};
},
computed: {
newPasswordIsEqualThatOldPassword() {
return this.form.password === this.form.newPassword;
}
},
validations: {
form: {
email: { required, email },
password: { required, minLength: minLength(6) },
newPassword: {
required,
minLength: minLength(6)
}
}
},
methods: {
async submit() {
this.$v.$touch();
if (this.$v.$anyError) return;
if (this.newPasswordIsEqualThatOldPassword) {
this.samePassword = true;
return;
}
try {
await Auth.changePassword(
this.$store.state.auth.user,
this.form.password,
this.form.newPassword
);
// contraseña actualizada
this.form.password = "";
this.form.newPassword = "";
this.$v.$reset();
} catch (e) {
// error actualizando la contraseña, revisa e.code y e.message
}
}
}
};
</script>La principal diferencia es que aquí debemos utilizar el usuario de Vuex, veamos cómo es utilizando el usuario que nos retorna Cognito.
Modificar la contraseña del usuario accediendo al usuario de Cognito
Lo que debemos hacer en este caso es obtener el usuario que está identificado actualmente en Cognito, y eso lo conseguimos con el siguiente código (recuerda que este tema lo vemos de forma completa en este curso).
import { Auth } from "aws-amplify";
export async function getUser() {
try {
const user = await Auth.currentAuthenticatedUser();
return user;
} catch (e) {
console.log(e);
}
}Una vez sabemos cómo recuperar al usuario identificado, entonces el proceso sería similar:
<template>
<slot-form title="Actualiza tu cuenta" :vuelidate="$v">
<v-layout row wrap>
<v-flex xs12>
<v-alert block type="error" :value="samePassword">
¡La contraseña anterior y la nueva no pueden ser la misma!
</v-alert>
</v-flex>
<v-flex xs12>
<form-group name="email">
<template slot-scope="{ attrs }">
<v-text-field
v-bind="attrs"
:value="form.email"
label="Correo electrónico"
type="email"
disabled
></v-text-field>
</template>
</form-group>
</v-flex>
<v-flex xs12 mb-2>
<form-group name="password">
<template slot-scope="{ attrs }">
<v-text-field
v-bind="attrs"
v-model="form.password"
name="password"
label="Contraseña actual"
@blur="$v.form.password.$touch()"
></v-text-field>
</template>
</form-group>
</v-flex>
<v-flex xs12 mb-2>
<form-group name="newPassword">
<template slot-scope="{ attrs }">
<v-text-field
v-bind="attrs"
v-model="form.newPassword"
name="newPassword"
label="Nueva contraseña"
@blur="$v.form.newPassword.$touch()"
></v-text-field>
</template>
</form-group>
</v-flex>
<v-flex xs12 lg6 md6 pl-1 pr-1>
<v-btn block color="primary" @click="submit">{{
Actualizar contraseña
}}</v-btn>
</v-flex>
</v-layout>
<hr class="mt-4 mb-2" />
<legal-buttons />
</slot-form>
</template>
<script>
import { Auth } from "aws-amplify";
import { getUser } from "@/utils/auth";
import { required, minLength } from "vuelidate/lib/validators";
import SlotForm from "../components/slots/Form";
export default {
name: "ChangePassword",
components: { SlotForm },
mounted() {
if (this.$store.state.auth.user) {
this.form = {
email: this.$store.state.auth.user.attributes.email,
password: "",
newPassword: ""
};
}
},
data() {
return {
valid: false,
samePassword: false,
form: {
email: "",
password: "",
newPassword: ""
},
passwordVisible: false,
newPasswordVisible: false
};
},
computed: {
newPasswordIsEqualThatOldPassword() {
return this.form.password === this.form.newPassword;
}
},
validations: {
form: {
email: { required, email },
password: { required, minLength: minLength(6) },
newPassword: {
required,
minLength: minLength(6)
}
}
},
methods: {
async submit() {
this.$v.$touch();
if (this.$v.$anyError) return;
if (this.newPasswordIsEqualThatOldPassword) {
this.samePassword = true;
return;
}
try {
const user = await getUser(); // obtenemos el usuario
await Auth.changePassword(
user, // ¡aquí le pasamos el usuario de Cognito!
this.form.password,
this.form.newPassword
);
// contraseña actualizada
this.form.password = "";
this.form.newPassword = "";
this.$v.$reset();
} catch (e) {
// error actualizando la contraseña, revisa e.code y e.message
}
}
}
};
</script>Y eso es todo, puedes ver que es un proceso sencillo, únicamente debemos utilizar el método changePassword pasando el usuario, antigua contraseña y nueva contraseña, nada más.
Sigue aprendiendo
Rutas de aprendizaje
