hcaptcha
This commit is contained in:
lemuel
parent
55478a0b3f
commit
633c7a1528
47
components/Hcaptcha.vue
Normal file
47
components/Hcaptcha.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="has-text-centered">
|
||||
<vue-hcaptcha
|
||||
:sitekey="sitekey"
|
||||
@error="onError"
|
||||
@expired="onExpired"
|
||||
@rendered="onRendered"
|
||||
@verify="onVerify"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueHcaptcha from '@hcaptcha/vue-hcaptcha'
|
||||
|
||||
export default {
|
||||
components: { VueHcaptcha },
|
||||
data() {
|
||||
return { token: '', widgetId: null, hcaptcha: null }
|
||||
},
|
||||
methods: {
|
||||
onError(error) {
|
||||
console.log(error)
|
||||
},
|
||||
onExpired() {
|
||||
this.token = ''
|
||||
},
|
||||
onRendered() {
|
||||
this.hcaptcha = window.hcaptcha
|
||||
},
|
||||
onVerify(token, eKey) {
|
||||
this.token = token
|
||||
this.widgetId = eKey
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
token() {
|
||||
this.$emit('token', this.token)
|
||||
},
|
||||
},
|
||||
beforeCreate() {
|
||||
this.sitekey = process.env.hcaptchakey
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -23,13 +23,14 @@
|
||||
/>
|
||||
</b-field>
|
||||
|
||||
<div class="is-flex is-justify-content-center my-3">
|
||||
<recaptcha />
|
||||
</div>
|
||||
<Hcaptcha
|
||||
@token="(nuevoToken) => (token = nuevoToken)"
|
||||
v-show="usuario && password"
|
||||
/>
|
||||
|
||||
<BotonIniciarSesion
|
||||
:login="login"
|
||||
:disabled="error || !usuario || !password ? true : false"
|
||||
:disabled="error || !usuario || !password || !token ? true : false"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
@ -37,61 +38,52 @@
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import Hcaptcha from '@/components/Hcaptcha'
|
||||
import jwt_decode from 'jwt-decode'
|
||||
import BotonIniciarSesion from '@/components/botones/BotonIniciarSesion'
|
||||
|
||||
export default {
|
||||
components: { BotonIniciarSesion },
|
||||
components: { BotonIniciarSesion, Hcaptcha },
|
||||
props: {
|
||||
updateIsLoading: { type: Function, required: true, default: () => {} },
|
||||
},
|
||||
data() {
|
||||
return { error: '', usuario: '', password: '' }
|
||||
return { error: '', usuario: '', password: '', token: '' }
|
||||
},
|
||||
methods: {
|
||||
async login() {
|
||||
if (this.usuario && this.password && !this.error) {
|
||||
const token = await this.$recaptcha.getResponse().catch((err) => {
|
||||
this.$alertsGenericos.imprimirError(this.$buefy, this.$router, {
|
||||
message: 'Favor de completar el recaptcha.',
|
||||
})
|
||||
})
|
||||
|
||||
if (token) {
|
||||
const data = {
|
||||
operador: this.usuario,
|
||||
password: this.password,
|
||||
}
|
||||
|
||||
this.updateIsLoading(true)
|
||||
return axios
|
||||
.post(`${process.env.api}/auth/login-admin`, data, {
|
||||
headers: { recaptcha: token },
|
||||
})
|
||||
.then(async (res) => {
|
||||
const token = res.data.token
|
||||
const operador = jwt_decode(token).Operador
|
||||
|
||||
localStorage.setItem('token', token)
|
||||
await this.$recaptcha.reset()
|
||||
this.updateIsLoading(false)
|
||||
if (operador.tipoUsuario.id_tipo_usuario === 2)
|
||||
this.$router.push(
|
||||
'/admin/configuracion/instituciones/buscar_institucion'
|
||||
)
|
||||
else this.$router.push('/prestamo_devolucion')
|
||||
})
|
||||
.catch(async (err) => {
|
||||
this.error = 'is-danger'
|
||||
await this.$recaptcha.reset()
|
||||
this.updateIsLoading(false)
|
||||
this.$alertsGenericos.imprimirError(
|
||||
this.$buefy,
|
||||
this.$router,
|
||||
err.response.data
|
||||
)
|
||||
})
|
||||
if (this.usuario && this.password && this.token && !this.error) {
|
||||
const data = {
|
||||
operador: this.usuario,
|
||||
password: this.password,
|
||||
}
|
||||
|
||||
this.updateIsLoading(true)
|
||||
return axios
|
||||
.post(`${process.env.api}/auth/login-admin`, data, {
|
||||
headers: { hcaptcha: this.token },
|
||||
})
|
||||
.then(async (res) => {
|
||||
const token = res.data.token
|
||||
const operador = jwt_decode(token).Operador
|
||||
|
||||
localStorage.setItem('token', token)
|
||||
this.updateIsLoading(false)
|
||||
if (operador.tipoUsuario.id_tipo_usuario === 2)
|
||||
this.$router.push(
|
||||
'/admin/configuracion/instituciones/buscar_institucion'
|
||||
)
|
||||
else this.$router.push('/prestamo_devolucion')
|
||||
})
|
||||
.catch(async (err) => {
|
||||
this.error = 'is-danger'
|
||||
this.updateIsLoading(false)
|
||||
this.$alertsGenericos.imprimirError(
|
||||
this.$buefy,
|
||||
this.$router,
|
||||
err.response.data
|
||||
)
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
@ -103,9 +95,6 @@ export default {
|
||||
if (this.error) this.error = ''
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$recaptcha.destroy()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -48,13 +48,14 @@
|
||||
|
||||
<InputRecordar nombreVariable="idModulo" :variablePadre="idModulo" />
|
||||
|
||||
<div class="is-flex is-justify-content-center my-3">
|
||||
<recaptcha v-show="idModulo && usuario && password" />
|
||||
</div>
|
||||
<Hcaptcha
|
||||
@token="(nuevoToken) => (token = nuevoToken)"
|
||||
v-show="idModulo && usuario && password"
|
||||
/>
|
||||
|
||||
<BotonIniciarSesion
|
||||
:login="login"
|
||||
:disabled="error != '' || !usuario || !password || !idModulo"
|
||||
:disabled="error != '' || !usuario || !password || !idModulo || !token"
|
||||
/>
|
||||
</form>
|
||||
</section>
|
||||
@ -62,6 +63,7 @@
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import Hcaptcha from '@/components/Hcaptcha'
|
||||
import BotonIniciarSesion from '@/components/botones/BotonIniciarSesion'
|
||||
import InputRecordar from '@/components/inputs/InputRecordar'
|
||||
import SelectInstitucion from '@/components/selects/SelectInstitucion'
|
||||
@ -70,6 +72,7 @@ import SelectModulo from '@/components/selects/SelectModulo'
|
||||
export default {
|
||||
components: {
|
||||
BotonIniciarSesion,
|
||||
Hcaptcha,
|
||||
InputRecordar,
|
||||
SelectInstitucion,
|
||||
SelectModulo,
|
||||
@ -82,48 +85,44 @@ export default {
|
||||
idModulo: { type: Number, required: true, default: 0 },
|
||||
},
|
||||
data() {
|
||||
return { error: '', usuario: '', password: '' }
|
||||
return { error: '', usuario: '', password: '', token: '' }
|
||||
},
|
||||
methods: {
|
||||
async login() {
|
||||
if (this.usuario && this.password && this.idModulo && !this.error) {
|
||||
const token = await this.$recaptcha.getResponse().catch((err) => {
|
||||
this.$alertsGenericos.imprimirError(this.$buefy, this.$router, {
|
||||
message: 'Favor de completar el recaptcha.',
|
||||
})
|
||||
})
|
||||
|
||||
if (token) {
|
||||
const data = {
|
||||
operador: this.usuario,
|
||||
password: this.password,
|
||||
id_modulo: this.idModulo,
|
||||
}
|
||||
|
||||
this.updateIsLoading(true)
|
||||
return axios
|
||||
.post(`${process.env.api}/auth/login-operador`, data, {
|
||||
headers: { recaptcha: token },
|
||||
})
|
||||
.then(async (res) => {
|
||||
const token = res.data.token
|
||||
|
||||
localStorage.setItem('token', token)
|
||||
await this.$recaptcha.reset()
|
||||
this.updateIsLoading(false)
|
||||
this.$router.push('/prestamo_devolucion')
|
||||
})
|
||||
.catch(async (err) => {
|
||||
this.error = 'is-danger'
|
||||
await this.$recaptcha.reset()
|
||||
this.updateIsLoading(false)
|
||||
this.$alertsGenericos.imprimirError(
|
||||
this.$buefy,
|
||||
this.$router,
|
||||
err.response.data
|
||||
)
|
||||
})
|
||||
if (
|
||||
this.usuario &&
|
||||
this.password &&
|
||||
this.idModulo &&
|
||||
this.token &&
|
||||
!this.error
|
||||
) {
|
||||
const data = {
|
||||
operador: this.usuario,
|
||||
password: this.password,
|
||||
id_modulo: this.idModulo,
|
||||
}
|
||||
|
||||
this.updateIsLoading(true)
|
||||
return axios
|
||||
.post(`${process.env.api}/auth/login-operador`, data, {
|
||||
headers: { hcaptcha: this.token },
|
||||
})
|
||||
.then(async (res) => {
|
||||
const token = res.data.token
|
||||
|
||||
localStorage.setItem('token', token)
|
||||
this.updateIsLoading(false)
|
||||
this.$router.push('/prestamo_devolucion')
|
||||
})
|
||||
.catch(async (err) => {
|
||||
this.error = 'is-danger'
|
||||
this.updateIsLoading(false)
|
||||
this.$alertsGenericos.imprimirError(
|
||||
this.$buefy,
|
||||
this.$router,
|
||||
err.response.data
|
||||
)
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
@ -135,9 +134,6 @@ export default {
|
||||
if (this.error) this.error = ''
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$recaptcha.destroy()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -18,27 +18,8 @@ export default {
|
||||
plugins: ['~/plugins/inject.js'],
|
||||
components: true,
|
||||
buildModules: [],
|
||||
modules: [
|
||||
'@nuxtjs/axios',
|
||||
'nuxt-buefy',
|
||||
'@nuxtjs/pwa',
|
||||
'@nuxtjs/recaptcha',
|
||||
'nuxt-socket-io',
|
||||
],
|
||||
modules: ['@nuxtjs/axios', 'nuxt-buefy', '@nuxtjs/pwa', 'nuxt-socket-io'],
|
||||
axios: {},
|
||||
recaptcha: {
|
||||
// hideBadge: Boolean, // Hide badge element (v3 & v2 via size=invisible)
|
||||
language: 'v2',
|
||||
mode: 'base',
|
||||
siteKey: process.env.GOOGLE_RECAPTCHA_KEY,
|
||||
version: 2,
|
||||
size: 'normal',
|
||||
},
|
||||
publicRuntimeConfig: {
|
||||
recaptcha: {
|
||||
siteKey: process.env.GOOGLE_RECAPTCHA_KEY,
|
||||
},
|
||||
},
|
||||
build: {},
|
||||
pwa: {
|
||||
manifest: {
|
||||
@ -53,5 +34,6 @@ export default {
|
||||
env: {
|
||||
api: process.env.API_URL,
|
||||
path: process.env.PATH_URL,
|
||||
hcaptchakey: process.env.HCAPTCHA_KEY,
|
||||
},
|
||||
}
|
||||
|
||||
3964
package-lock.json
generated
3964
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -9,9 +9,9 @@
|
||||
"generate": "nuxt generate"
|
||||
},
|
||||
"dependencies": {
|
||||
"@hcaptcha/vue-hcaptcha": "^0.3.2",
|
||||
"@nuxtjs/axios": "^5.13.6",
|
||||
"@nuxtjs/pwa": "^3.3.5",
|
||||
"@nuxtjs/recaptcha": "^1.1.1",
|
||||
"convert-array-to-csv": "^2.0.0",
|
||||
"core-js": "^3.24.1",
|
||||
"js-file-download": "^0.4.12",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user