[聚合文章] 在VUE中使用keycloak完成用户登录认证

由于只是测试keycloak的登录，故以下的VUE代码仅供参考

在正式开始前，请先移步官方文档：http://www.keycloak.org/docs/...

笔者的keycloak服务器地址：http://192.168.10.9:8080/auth
所以下载了http://192.168.10.9:8080/auth/js/keycloak.js的js文件，可以直接用，强迫症患者也可以改来用。

使用vue-cli创建项目，然后把keycloak.js放进去

我是把代码加到了HelloWorld.vue里了，这个很HelloWorld

  import './keycloak'

  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
      }
    },
    mounted() {
      console.info(this.$route.query)
      let keycloak = null;
      keycloak = Keycloak({
        url: 'http://192.168.10.9:8080/auth',
        realm: 'jhipster',
        clientId: 'web_app'
      });

      keycloak.init({onLoad: 'login-required'}).success(function (authenticated) {
        //alert(authenticated ? 'authenticated' : 'not authenticated');
        if (!authenticated) {
          alert('not authenticated')
        } else {

          keycloak.loadUserProfile().success(data => {
            console.info(data)
          })
        }
        console.info(keycloak)
      }).error(function () {
        alert('failed to initialize');
      });
   }
}

然后build, run，直接踫出来了登录画面（吓到不要怪我）。当然如果没能踫出这个画面，或者出了错误，就要改keycloak设置的，主要为了安全对于client所使用的域有限制（这个搞过微信公众号的都知道）：

输入用户名，密码，登录后自动返回HelloWorld画面，控制台应该已经得到用户信息了。

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。