UNIDOO Library

# Authentification (keycloak)

# Description

Plugin d'authentification qui permet d'instancier keycloak dans les SFC.

# Utilisation

Dans main.js et équivalents (ex: enhanceApp.js):

import { UnidooKeycloak } from "@sedoo/unidoo";
Vue.use(UnidooKeycloak, { axios });

NB : UnidooKeycloak a besoin de l'instance axios du projet principal

Dans le composant racine de l'appli :

created() {
  // cette fonction d'initialisation ne doit être appelée qu'une seule fois
  this.$unidooInitKeycloak({
    ssoParams: {
      authorizedDomains: [...],
      clientId: "...",
      onLoad: "check-sso",
      realm: "...",
      resource: "...",
      url: "..."
    }
  });
}

Renseigner les valeurs des paramètres en fonctions des paramètres SSO défini dans la partie admin de Keycloak.

Utilisation basique dans un composant d'authentification via bouton :

<template>
  <v-btn @click="login">login</v-btn>
  <v-btn @click="logout">logout</v-btn>
</template>

    // ...
    data() {
      return {
        localKeycloak: this.$keycloak
      };
    },
    computed: {
      authenticated() {
        return this.localKeycloak.authenticated;
      },
    },
    methods: {
      login() {
        this.$keycloak.login();
      },
      logout() {
        this.$store.dispatch("userSignOut");
        this.$keycloak.logout();
      }
    }

Si on veut récupérer les informations de l'utilisateur connecté :

    // dans le composant d'authentification
    watch: {
      authenticated(value) {
        if (value) {
          this.$store.dispatch("userSignIn", this.$keycloak);
        }
        // si on veut stocker le booléen authenticated dans le store pour l'utiliser à différents endroits de l'application
        this.$store.commit("setAuthenticated", value);
      }
    },

Actions du store :

    // dans le store de l'utilisateur
    actions: {
      async userSignIn({ commit }, keycloak) {
        await initUser(commit, keycloak);
      },
      userSignOutDispatch({ commit }) {
        commit("setUser", null);
        // remettre à null les capabilities de l'user ici si nécessaire
      },
    }
    // ...
  export async function initUser(commit, keyCloak) {
    if (keyCloak.tokenParsed) {
      keyCloak.loadUserProfile().then((userProfile) => {
        const attributes = userProfile.attributes;
        const id = keyCloak.tokenParsed.sub;
        const firstName = keyCloak.tokenParsed.given_name;
        const lastName = keyCloak.tokenParsed.family_name;
        const email = keyCloak.tokenParsed.email;
        const resourceRoles = Object.keys(keyCloak.tokenParsed.resource_access)
          .map((key) => {
            return keyCloak.tokenParsed.resource_access[key].roles;
          })
          .join(",")
          .split(",");

        const realmRoles = keyCloak.tokenParsed.realm_access.roles;
        let roles = [];
        if (realmRoles) {
          roles = roles.concat(realmRoles);
        }
        if (resourceRoles) {
          roles = roles.concat(resourceRoles);
        }

        let user = {
          id,
          email,
          roles,
          firstName,
          lastName,
          attributes
        };
        commit("setUser", user);
      });
    }
  }

# Exemple

NB : regarder l'onglet "Network" des devtools pour vérifier que le token est bien récupéré lorsqu'on est loggué.

← MapGeoFeatures →