mirror of
https://github.com/zitadel/zitadel.git
synced 2025-02-28 21:37:24 +00:00
docs: add guide for Vue (#7215)
* docs: add guide for Vue * describe authz * add vue to sdks --------- Co-authored-by: Max Peintner <max@caos.ch>
This commit is contained in:
Elio Bischof
GitHub
parent
57f40a3c50
commit
492d7da37e
129
docs/docs/examples/login/vue.md
Normal file
129
docs/docs/examples/login/vue.md
Normal file
@ -0,0 +1,129 @@
|
||||
---
|
||||
title: ZITADEL with Vue
|
||||
sidebar_label: Vue
|
||||
---
|
||||
|
||||
This integration guide demonstrates the recommended way to incorporate ZITADEL into your Vue application.
|
||||
It explains how to enable user login in your application and how to fetch data from the user info endpoint.
|
||||
|
||||
By the end of this guide, your application will have login functionality and will be able to access the current user's profile.
|
||||
|
||||
:::tip
|
||||
This documentation references our [example](https://github.com/zitadel/zitadel-vue) on GitHub.
|
||||
It also uses the @zitadel/vue package with its default configuration.
|
||||
:::
|
||||
|
||||
## Set up application and obtain keys
|
||||
|
||||
Before we begin developing our application, we need to perform a few configuration steps in the ZITADEL Console.
|
||||
You'll need to provide some information about your app.
|
||||
We recommend creating a new app to start from scratch.
|
||||
Navigate to your project, then add a new application at the top of the page.
|
||||
Select the **User Agent** application type and continue.
|
||||
We recommend that you use [Proof Key for Code Exchange (PKCE)](/apis/openidoauth/grant-types#proof-key-for-code-exchange) for all single page applications.
|
||||
|
||||
|
||||
|
||||
### Redirect URIs
|
||||
|
||||
The redirect URIs field tells ZITADEL where it's allowed to redirect users after authentication. For development, you can set dev mode to `true` to enable insecure HTTP and redirect to a `localhost` URI.
|
||||
The post logout redirect sends your users back to a public route on your application after they have logged out.
|
||||
|
||||
:::tip
|
||||
If you are following along with the [example](https://github.com/zitadel/zitadel-vue), set the dev mode switch to `true`.
|
||||
Configure a redirect URIs to *http:/<span></span>/localhost:5173/auth/signinwin/zitadel* and a post redirect URI to *http:/<span></span>/localhost:5173/*.
|
||||
:::
|
||||
|
||||
Continue and create the application.
|
||||
|
||||
### Refresh Token and Client ID
|
||||
|
||||
After successful creation of the app, make sure you tick the checkbox to enable refresh tokens.
|
||||
Also copy the client ID, as you will need it to configure your Vue client.
|
||||
|
||||
|
||||
|
||||
## Create a project role "admin" and assign it to your user
|
||||
|
||||
Also note the projects resource ID, as you will need it to configure your Vue client.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Vue setup
|
||||
|
||||
Now that you have configured your web application on the ZITADEL side, you can proceed with the integration of your Vue client.
|
||||
|
||||
### Install Vue dependencies
|
||||
|
||||
npm install --save @zitadel/vue
|
||||
To conveniently connect with ZITADEL, you can install the [@zitadel/vue NPM package](https://www.npmjs.com/package/@zitadel/vue). Run the following command:
|
||||
|
||||
```bash
|
||||
```
|
||||
|
||||
### Create and configure the auth service
|
||||
|
||||
The @zitadel/vue package provides a `createZITADELAuth()` function which sets some defaults and calls the underlying [vue-oidc-client packages](https://github.com/soukoku/vue-oidc-client) `createOidcAuth()` function.
|
||||
You can overwrite all the defaults with the aguments you pass to `createZITADELAuth()`.
|
||||
|
||||
Export the object returned from `createZITADELAuth()`
|
||||
|
||||
```ts reference
|
||||
https://github.com/zitadel/zitadel-vue/blob/main/src/services/zitadelAuth.ts
|
||||
```
|
||||
|
||||
### Register the auth service in your global variables when bootstrapping Vue
|
||||
|
||||
```ts reference
|
||||
https://github.com/zitadel/zitadel-vue/blob/main/src/main.ts
|
||||
```
|
||||
|
||||
### Add three new views to your application
|
||||
|
||||
The restricted admin view will only be shown if the user is authenticated and has the role "admin" in the apps project in ZITADEL.
|
||||
|
||||
```ts reference
|
||||
https://github.com/zitadel/zitadel-vue/blob/main/src/views/Admin.vue
|
||||
```
|
||||
|
||||
The restricted login view is shown to all authenticated users.
|
||||
It prints all the information it gets from the token and from the user info endpoint.
|
||||
|
||||
```ts reference
|
||||
https://github.com/zitadel/zitadel-vue/blob/main/src/views/Login.vue
|
||||
```
|
||||
|
||||
The public no access view is shown to authenticated users who navigate to a page they don't have access to based on their roles.
|
||||
|
||||
```ts reference
|
||||
https://github.com/zitadel/zitadel-vue/blob/main/src/views/NoAccess.vue
|
||||
```
|
||||
|
||||
### Add protected routes to your new pages as well as a Signout link
|
||||
|
||||
Note that we conditionally render the admin view or the no access view based on the user's roles.
|
||||
|
||||
```ts reference
|
||||
https://github.com/zitadel/zitadel-vue/blob/main/src/router/index.ts
|
||||
```
|
||||
|
||||
## Completion
|
||||
|
||||
Congratulations! You have successfully integrated your Vue application with ZITADEL!
|
||||
|
||||
If you get stuck, consider checking out the [ZITADEL Vue example application](https://github.com/zitadel/zitadel-vue).
|
||||
This application includes all the functionalities mentioned in this quickstart.
|
||||
You can start by cloning the repository and change the arguments to createZITADELAuth so they fit your requirements.
|
||||
If you face issues, contact us or [raise an issue on GitHub](https://github.com/zitadel/zitadel-vue/issues).
|
||||
|
||||
|
||||
|
||||
### What's next?
|
||||
|
||||
Now that you have enabled authentication, you are ready to call add authorization to your application using ZITADEL APIs.
|
||||
To do this, [refer to the API docs](/apis/introduction) or check out [the ZITADEL Console code on GitHub](https://github.com/zitadel/zitadel) which uses gRPC to access data.
|
||||
|
||||
For more information on how to create an Vue application, you can refer to [Vue](https://vuejs.org/guide/quick-start.html).
|
||||
If you want to learn more about the libraries wrapped by [@zitadel/vue](https://www.npmjs.com/package/@zitadel/vue), [read the docs for vue-oidc-client](https://github.com/soukoku/vue-oidc-client/wiki/V1-Docs).
|
||||
@ -9,16 +9,17 @@ Management for resources.
|
||||
|
||||
## ZITADEL SDKs
|
||||
|
||||
| Language / Framework | Link Github | User Authentication | Manage resources | Notes |
|
||||
|----------------------|---------------------------------------------------------------|-----------------------------------------------------------|------------------|-------------|
|
||||
| .NET | [zitadel-net](https://github.com/smartive/zitadel-net) | ✔️ | ✔️ | `community` |
|
||||
| Elixir | [zitadel_api](https://github.com/jshmrtn/zitadel_api) | ✔️ | ✔️ | `community` |
|
||||
| Go | [zitadel-go](https://github.com/zitadel/zitadel-go) | 🚧 [WIP](https://github.com/zitadel/zitadel-go/tree/next) | ✔️ | `official` |
|
||||
| JVM | 🚧 [WIP](https://github.com/zitadel/zitadel/discussions/3650) | ❓ | ❓ | TBD |
|
||||
| Python | 🚧 [WIP](https://github.com/zitadel/zitadel/issues/3675) | ❓ | ❓ | TBD |
|
||||
| NodeJS | [@zitadel/node](https://www.npmjs.com/package/@zitadel/node) | ❌ | ✔️ | `community` |
|
||||
| Dart | [zitadel-dart](https://github.com/smartive/zitadel-dart) | ❌ | ✔️ | `community` |
|
||||
| Rust | [zitadel-rust](https://github.com/smartive/zitadel-rust) | ✔️ | ✔️ | `community` |
|
||||
| Language / Framework | Link Github | User Authentication | Manage resources | Notes |
|
||||
|----------------------|---------------------------------------------------------------|-----------------------------------------------------------|------------------|-------------------|
|
||||
| Go | [zitadel-go](https://github.com/zitadel/zitadel-go) | 🚧 [WIP](https://github.com/zitadel/zitadel-go/tree/next) | ✔️ | `official` |
|
||||
| Vue | [zitadel-vue](https://github.com/zitadel/zitadel-vue) | ✔️ | ❌ | `official` |
|
||||
| .NET | [zitadel-net](https://github.com/smartive/zitadel-net) | ✔️ | ✔️ | `community` |
|
||||
| Elixir | [zitadel_api](https://github.com/jshmrtn/zitadel_api) | ✔️ | ✔️ | `community` |
|
||||
| NodeJS | [@zitadel/node](https://www.npmjs.com/package/@zitadel/node) | ❌ | ✔️ | `community` |
|
||||
| Dart | [zitadel-dart](https://github.com/smartive/zitadel-dart) | ❌ | ✔️ | `community` |
|
||||
| Rust | [zitadel-rust](https://github.com/smartive/zitadel-rust) | ✔️ | ✔️ | `community` |
|
||||
| JVM | 🚧 [WIP](https://github.com/zitadel/zitadel/discussions/3650) | ❓ | ❓ | TBD |
|
||||
| Python | 🚧 [WIP](https://github.com/zitadel/zitadel/issues/3675) | ❓ | ❓ | TBD |
|
||||
|
||||
## Missing SDK
|
||||
|
||||
|
||||
@ -11,8 +11,9 @@ module.exports = {
|
||||
type: "category",
|
||||
label: "Frontend",
|
||||
items: [
|
||||
"examples/login/angular",
|
||||
"examples/login/react",
|
||||
"examples/login/vue",
|
||||
"examples/login/angular",
|
||||
"examples/login/flutter",
|
||||
"examples/login/nextjs",
|
||||
"examples/login/go",
|
||||
|
||||
BIN
docs/static/img/vue/app-create.png
vendored
Normal file
BIN
docs/static/img/vue/app-create.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
BIN
docs/static/img/vue/app-screen.png
vendored
Normal file
BIN
docs/static/img/vue/app-screen.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
docs/static/img/vue/project-authz.png
vendored
Normal file
BIN
docs/static/img/vue/project-authz.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
docs/static/img/vue/project-role.png
vendored
Normal file
BIN
docs/static/img/vue/project-role.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
docs/static/img/vue/tick-refresh-token.png
vendored
Normal file
BIN
docs/static/img/vue/tick-refresh-token.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Loading…
x
Reference in New Issue
Block a user