joaojosefilho / Vuejsoidcclient
Programming Languages
Labels
Projects that are alternatives of or similar to Vuejsoidcclient
vuejsoidcclient
Project vueJs with oidc-client library
Create the development environment
Npm:
https://nodejs.org/en/download/
Npm Version Control on Windows:
https://github.com/felixrieseberg/npm-windows-upgrade
Npm Version Control on Linux:
https://github.com/creationix/nvm
Technology Version
Version of npm used in the project: 6.5.0
Version of oidc-client: 1.6.1
Identity Provider
The configuration for the examples are based on running IdentityServer4 on localhost. A ready-to-go reference implementation for testing purposes can be found at IdentityServer4AndApi.
Documentation
Oidc-Client:
https://github.com/IdentityModel/oidc-client-js/wiki
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run prod
Connection with identity provider
Change the parameters of the variable mgr of the script SecurityService.js to the values of your identity provider.
var mgr = new Oidc.UserManager({
userStore: new Oidc.WebStorageStateStore(),
authority: 'https://localhost:44321',
client_id: 'vuejsclient',
redirect_uri: window.location.origin + '/static/callback.html',
response_type: 'id_token token',
scope: 'openid profile address roles identityserver4api country subscriptionlevel offline_access',
post_logout_redirect_uri: window.location.origin + '/index.html',
silent_redirect_uri: window.location.origin + '/static/silent-renew.html',
accessTokenExpiringNotificationTime: 10,
automaticSilentRenew: true,
filterProtocolClaims: true,
loadUserInfo: true
})
The script SecurityService.js contains triggers and methods from the oidc-client library.
API
The script ApiService.js is responsible for making requests to an API using the libraries oidc-client and axios
The baseUrl constant receives the static part of the API Url.
const baseUrl = 'https://localhost:44390/api/';
The defineHeaderAxios() method appends the access teken to the axios head.
async defineHeaderAxios () {
await user.getAcessToken().then(
acessToken => {
axios.defaults.headers.common['Authorization'] = 'Bearer ' + acessToken
}, err => {
console.log(err)
})
}
The getAll() method makes a get request. It receives as a parameter a string that will be concatenated with the baseUrl constant by forming the API Url.
async getAll(api){
await this.defineHeaderAxios()
return axios
.get(baseUrl + api)
.then(response => response.data)
.catch(err => {
console.log(err);
})
}
Route protection
The script index.js is responsible for managing the application routes using the vue router. Each route has a field called meta. Meta receives two parameters: requiresAuth and role.
- requiresAuth[Bollean]: Responsible for protecting the route
- role[String]: Users with this role will be allowed to access the route
{
path: '/payinguser',
name: 'PayingUser',
component: PayingUser,
meta: {
requiresAuth: true,
role: ['PayingUser']
}
},
{
path: '/freeuser',
name: 'FreeUser',
component: FreeUser,
meta: {
requiresAuth: true,
role: ['FreeUser']
}
}
At each transition of routes in the application, the router.beforeEach() method of the script index.js is called. This method checks whether the user who is logged in is allowed to access the route. It does this by comparing the role of the user and the role of the route.
router.beforeEach((to, from, next) => {
const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
if (requiresAuth) {
mgr.getRole().then(
sucess => {
if (to.meta.role == sucess){
next();
}else {
next('/accessdenied');
}
},
err => {
console.log(err);
}
);
} else {
next();
}
});