在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画面，控制台应该已经获得用户信息了。