用vue 写一个 集成keyclock 的登录页面
时间: 2023-05-18 15:07:16 浏览: 237
可以参考以下代码:
<template>
<div>
<h1>登录页面</h1>
<form>
<div>
<label for="username">用户名:</label>
<input type="text" id="username" v-model="username">
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" v-model="password">
</div>
<button type="submit" @click.prevent="login">登录</button>
</form>
</div>
</template>
<script>
import Keycloak from 'keycloak-js'
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
async login() {
const keycloak = Keycloak('/path/to/keycloak.json')
await keycloak.init({
onLoad: 'login-required'
})
const authenticated = await keycloak.login({
username: this.username,
password: this.password
})
if (authenticated) {
// 登录成功后的操作
}
}
}
}
</script>
阅读全文