Keycloak Auth Example
This is a full example demonstrating a client-side application using a back-end API that required authentication. In this case authentication is provided by Keycloak, but in reality it should be pretty simillar using any OIDC provider.
Setup Keycloak
Run in Docker
Start Keycloak
docker run -d --name keycloak -p 8081:8080 jboss/keycloak:6.0.1
Create admin user
docker exec keycloak/bin/add-auth-keycloak.sh -u admin -p keycloak
docker restart keycloak
Setup client config
- Add new realm "Vue Test Realm"
- Add new client
- name: Vue Test Client id: vue-test root url: http://localhost:8080
- Add "admin" client role
- Add new user:
- username: testuser email: testuser@email.com first: Test last: User
- Click "Email Verified"
- Add new Role Mapping for client vue-test admin role
- Set password on "Credentials tab"
- Make sure it's not temporary
Setup Vue OIDC App
This app uses vuex-oidc rather than the built in Keycloak adapter because it's a bit more batteries-included. I may end up adding an additional example app that uses the built in adapter in the future.
cd vue-auth-oidc
npm install
npm run serve
Setup API
The API is a very simple Pyramid app that uses
pyramid_jwt to verify the JWT access
token. It has only a single route /api/items
that returns a list of items
for GET
requests and creates an item for POST
that requires authentication.
cd api
virtualenv env
source ./env/bin/activate
pip install -e .
pserve --reload development.ini