ami/tl-vikunja
1
0
Fork 0
Code Activity

Authentication with OpenID Connect providers (#305)

Browse Source 
Fix setting auth config from api in state

Verify auth state before authenticating

Add showing openid providers on login

Parse auth config from /info

Add authentication through openid

Add openid auth component

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/305
Co-Authored-By: konrad <konrad@kola-entertainments.de>
Co-Committed-By: konrad <konrad@kola-entertainments.de>
This commit is contained in:
konrad
2020-11-21 16:38:40 +00:00
parent 1517f989d3
commit c536707f3a
6 changed files with 148 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/views/user/Login.vue
View File

@ -6,7 +6,7 @@
You successfully confirmed your email! You can log in now.
</div>
<api-config/>
<form @submit.prevent="submit" id="loginform">
<form @submit.prevent="submit" id="loginform" v-if="localAuthEnabled">
<div class="field">
<label class="label" for="username">Username</label>
<div class="control">
@ -54,15 +54,16 @@
<div class="field is-grouped login-buttons">
<div class="control is-expanded">
<button class="button is-primary" type="submit" v-bind:class="{ 'is-loading': loading}">Login
<button class="button is-primary" type="submit" v-bind:class="{ 'is-loading': loading}">
Login
</button>
<router-link :to="{ name: 'user.register' }" class="button" v-if="registrationEnabled">Register
<router-link :to="{ name: 'user.register' }" class="button" v-if="registrationEnabled">
Register
</router-link>
</div>
<div class="control">
<router-link :to="{ name: 'user.password-reset.request' }" class="reset-password-link">Reset
your
password
<router-link :to="{ name: 'user.password-reset.request' }" class="reset-password-link">
Reset your password
</router-link>
</div>
</div>
@ -70,6 +71,13 @@
{{ errorMessage }}
</div>
</form>
<div v-if="openidConnect.enabled && openidConnect.providers.length > 0" class="mt-4">
<a @click="redirectToProvider(p)" v-for="(p, k) in openidConnect.providers" :key="k" class="button is-fullwidth">
Log in with {{ p.name }}
</a>
</div>
<legal/>
</div>
</div>
@ -128,6 +136,8 @@ export default {
errorMessage: ERROR_MESSAGE,
needsTotpPasscode: state => state.auth.needsTotpPasscode,
authenticated: state => state.auth.authenticated,
localAuthEnabled: state => state.config.auth.local.enabled,
openidConnect: state => state.config.auth.openidConnect,
}),
methods: {
submit() {
@ -151,6 +161,12 @@ export default {
.catch(() => {
})
},
redirectToProvider(provider) {
const state = Math.random().toString(36).substring(2, 24)
localStorage.setItem('state', state)
window.location.href = `${provider.authUrl}?client_id=${provider.clientId}&redirect_uri=${this.openidConnect.redirectUrl}${provider.key}&response_type=code&scope=&state=${state}`
},
},
}
</script>

66
src/views/user/OpenIdAuth.vue Normal file
View File

@ -0,0 +1,66 @@
<template>
<div>
<div class="notification is-danger" v-if="errorMessage">
{{ errorMessage }}
</div>
<div class="notification is-info" v-if="loading">
Authenticating...
</div>
</div>
</template>
<script>
import {mapState} from 'vuex'
import {ERROR_MESSAGE, LOADING} from '@/store/mutation-types'
export default {
name: 'Auth',
computed: mapState({
errorMessage: ERROR_MESSAGE,
loading: LOADING,
}),
mounted() {
this.authenticateWithCode()
},
methods: {
authenticateWithCode() {
// This component gets mounted twice: The first time when the actual auth request hits the frontend,
// the second time after that auth request succeeded and the outer component "content-no-auth" isn't used
// but instead the "content-auth" component is used. Because this component is just a route and thus
// gets mounted as part of a <router-view/> which both the content-auth and content-no-auth components have,
// this re-mounts the component, even if the user is already authenticated.
// To make sure we only try to authenticate the user once, we set this "authenticating" lock in localStorage
// which ensures only one auth request is done at a time. We don't simply check if the user is already
// authenticated to not prevent the whole authentication if some user is already logged in.
if (localStorage.getItem('authenticating')) {
return
}
localStorage.setItem('authenticating', true)
const state = localStorage.getItem('state')
if(typeof this.$route.query.state === 'undefined' || this.$route.query.state !== state) {
localStorage.removeItem('authenticating')
this.$store.commit(ERROR_MESSAGE, 'State does not match, refusing to continue!')
return
}
this.$store.commit(ERROR_MESSAGE, '')
this.$store.dispatch('auth/openIdAuth', {
provider: this.$route.params.provider,
code: this.$route.query.code,
})
.then(() => {
this.$router.push({name: 'home'})
})
.catch(() => {
// Handled through global state
})
.finally(() => {
localStorage.removeItem('authenticating')
})
},
},
}
</script>