在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畫面，控制檯應該已經獲得用戶信息了。