mirror of
https://github.com/zitadel/zitadel.git
synced 2025-08-11 22:17:32 +00:00
a065ddc706
* docs: first attempt to restructure the sdks and examples to make it better understandable * docs: first attempt to restructure the sdks and examples to make it better understandable * docs: first attempt to restructure the sdks and examples to make it better understandable * docs: first attempt to restructure the sdks and examples to make it better understandable * docs: first attempt to restructure the sdks and examples to make it better understandable * docs: first attempt to restructure the sdks and examples to make it better understandable * docs: adding more example pages * docs: adding more example pages * docs: add all sdk/examples * docs: add tile component * docs: introduction page * docs: introduction page * docs: add react * docs: remove old sdk and example pages * docs: fix broken links * docs: fix broken links * styles * Update docs/docs/sdk-examples/introduction.mdx Co-authored-by: Livio Spring <livio.a@gmail.com> * Update docs/docs/sdk-examples/java.mdx Co-authored-by: Livio Spring <livio.a@gmail.com> * Update docs/docs/sdk-examples/python.mdx Co-authored-by: Livio Spring <livio.a@gmail.com> * Update docs/docs/sdk-examples/python.mdx Co-authored-by: Livio Spring <livio.a@gmail.com> * docs: review changes * docs: smaller tiles * docs: changes from go and java review * docs: correct python description * Update docs/docs/sdk-examples/python.mdx Co-authored-by: Livio Spring <livio.a@gmail.com> * Update docs/docs/sdk-examples/introduction.mdx Co-authored-by: Tim Möhlmann <tim+github@zitadel.com> * Update docs/docs/sdk-examples/python.mdx Co-authored-by: Tim Möhlmann <tim+github@zitadel.com> * docs: flask logo * flask, rust imgs * docs: flask logo * Update go.mdx * Update java.mdx * Update docs/docs/sdk-examples/flutter.mdx Co-authored-by: Livio Spring <livio.a@gmail.com> * Update docs/src/css/tile.module.css Co-authored-by: Livio Spring <livio.a@gmail.com> * docs: sidebar alphabetic * docs: sidebar alphabetic * docs: django logo --------- Co-authored-by: peintnermax <max@caos.ch> Co-authored-by: Livio Spring <livio.a@gmail.com> Co-authored-by: Tim Möhlmann <tim+github@zitadel.com> Co-authored-by: Stefan Benz <stefan@caos.ch>
63 lines
2.4 KiB
Plaintext
63 lines
2.4 KiB
Plaintext
---
|
|
title: Vue.js
|
|
sidebar_label: Vue.js
|
|
---
|
|
|
|
<table>
|
|
<tr>
|
|
<td width="100px">
|
|
<img width="100px" src="/docs/img/tech/vue.svg" alt="vue"/>
|
|
</td>
|
|
<td>
|
|
<a href="https://vuejs.org/" target="_blank">Vue.js</a> is a JavaScript framework for building user interfaces that is simple, flexible, and versatile.
|
|
Integrate authentication to your Vue.js application easily by using the <a href="https://github.com/zitadel/zitadel-vue" target="_blank">zitadel-vue</a> SDK
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
### Resources
|
|
- [SDK with Example App](https://github.com/zitadel/zitadel-vue)
|
|
- [Step-By-Step Guide](/docs/examples/login/vue)
|
|
|
|
### Vue SDK
|
|
|
|
The [zitadel-vue](https://github.com/zitadel/zitadel-vue) SDK is a wrapper around the [vue-oidc-client](https://github.com/soukoku/vue-oidc-client) and abstracts the handling of specific configurations for ZITADEL.
|
|
|
|
The following features are covered by the SDK:
|
|
- Authenticate your user with ZITADEL using OIDC
|
|
- Requesting ZITADEL userinfo endpoint to get user data
|
|
- Refresh Token
|
|
- Requesting User Roles from userinfo
|
|
- Check if user has specified role
|
|
- Logout
|
|
|
|
The goal is to extend the SDK over the time with the following features:
|
|
- Integrate ZITADEL APIs to read and manage resources
|
|
- Build your own login UI using our Session API
|
|
|
|
### Example Application
|
|
|
|
The [zitadel-vue](https://github.com/zitadel/zitadel-vue) repository also includes an Example Application ready to start and show how a Vue application looks like with integrated ZITADEL Login.
|
|
|
|
What does the Example include:
|
|
- Home Page with Login Button
|
|
- Authenticating user with OIDC PKCE Flow
|
|
- Public Page: Accessible without authentication
|
|
- Private Page: Shows user information of authenticated user, only accessible after login
|
|
- Administrator Page: Only accessible after login and with specific administrator role for the application
|
|
- Logout
|
|
|
|
### Step-By-Step Guide
|
|
|
|
The [Step-By-Step Guide](/docs/examples/login/vue) leads you through the whole process from configuring the right application in ZITADEL to a ready application with integrated Login.
|
|
|
|
After completing the Step-By-Step Guide you will have:
|
|
1. Example Web Application with integrated ZITADEL Login
|
|
2. Example page accessible by authenticated user showing retrieved user information
|
|
3. Example administrator page accessible by user with administrator role
|
|
4. Logout
|
|
5. Correct setup for your application in ZITADEL
|
|
|
|
|
|
|