mirror of
https://github.com/zitadel/zitadel.git
synced 2025-01-05 14:37:45 +00:00
docs: Make Examples and SDK Pages easier to understand (#7291)
* 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>
This commit is contained in:
Fabi
GitHub
parent
59dcd6f498
commit
a065ddc706
@ -83,11 +83,11 @@ Learn more about the [pay-as-you-go pricing](https://zitadel.com/pricing).
|
||||
|
||||
### Example applications
|
||||
|
||||
Clone one of our [example applications](https://zitadel.com/docs/examples/introduction#clone-a-sample-project) or deploy them directly to Vercel.
|
||||
Clone one of our [example applications](https://zitadel.com/docs/sdk-examples/introduction) or deploy them directly to Vercel.
|
||||
|
||||
### SDKs
|
||||
|
||||
Use our [SDKs](https://zitadel.com/docs/examples/sdks) for your favorite language and framework.
|
||||
Use our [SDKs](https://zitadel.com/docs/sdk-examples/introduction) for your favorite language and framework.
|
||||
|
||||
## Why choose ZITADEL
|
||||
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
<span>{{ 'HOME.GETSTARTED.TITLE' | translate }}</span>
|
||||
</a>
|
||||
|
||||
<a href="https://zitadel.com/docs/examples/introduction" target="_blank" rel="noreferrer" class="grid-item">
|
||||
<a href="https://zitadel.com/docs/sdk-examples/introduction" target="_blank" rel="noreferrer" class="grid-item">
|
||||
<div
|
||||
class="icon-wrapper"
|
||||
[ngStyle]="{
|
||||
|
||||
@ -221,7 +221,7 @@ The last API (assets) is only a REST API because ZITADEL uses multipart form dat
|
||||
|
||||
### SDKs
|
||||
|
||||
ZITADEL provides some [official and community supported SDKs](/docs/examples/sdks) for multiple languages and frameworks.
|
||||
ZITADEL provides some [official and community supported SDKs](/docs/sdk-examples/introduction) for multiple languages and frameworks.
|
||||
Most languages allow you to build a client from proto definitions, which allows you to build your own client in case an SDK is missing.
|
||||
|
||||
### Proto
|
||||
|
||||
@ -125,4 +125,4 @@ This can be achieved by adding the scope `urn:zitadel:iam:org:project:id:zitadel
|
||||
|
||||
Please refer to our [guide](/guides/integrate/login-users) on how to login users.
|
||||
|
||||
OpenID Connect certified libraries should allow you to customize the parameters and define scopes for the authorization request. You can also continue by using one of our [example applications](/examples/introduction).
|
||||
OpenID Connect certified libraries should allow you to customize the parameters and define scopes for the authorization request. You can also continue by using one of our [example applications](/docs/sdk-examples/introduction).
|
||||
|
||||
@ -1,227 +0,0 @@
|
||||
---
|
||||
title: Overview of ZITADEL example applications and quickstarts
|
||||
sidebar_label: Overview
|
||||
---
|
||||
|
||||
Our examples cover a range of programming languages and frameworks, so no matter what you're into, we've got you covered.
|
||||
|
||||
## Frontend
|
||||
|
||||
### Single page application
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Language</th>
|
||||
<th>Example</th>
|
||||
<th>Quickstart</th>
|
||||
<th>SDK</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img src="/docs/img/tech/angular.svg" alt="angular"/>
|
||||
</td>
|
||||
<td>Angular</td>
|
||||
<td><a href="https://github.com/zitadel/zitadel-angular" target="_blank"><i class="lab la-github"></i></a></td>
|
||||
<td><a href="/examples/login/angular">Guide</a></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img src="/docs/img/tech/react.png" alt="react"/>
|
||||
</td>
|
||||
<td>React</td>
|
||||
<td><a href="https://github.com/zitadel/react-user-authentication" target="_blank"><i class="lab la-github"></i></a></td>
|
||||
<td><a href="/examples/login/react">Guide</a></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img src="/docs/img/tech/vue.svg" alt="vue"/>
|
||||
</td>
|
||||
<td>Vue</td>
|
||||
<td><a href="https://github.com/zitadel/zitadel-vue" target="_blank"><i class="lab la-github"></i></a></td>
|
||||
<td><a href="/examples/login/vue">Guide</a></td>
|
||||
<td><a href="https://github.com/zitadel/zitadel-vue">SDK</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
### Native/mobile app
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Language</th>
|
||||
<th>Example</th>
|
||||
<th>Quickstart</th>
|
||||
<th>SDK</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img src="/docs/img/tech/flutter.svg" alt="flutter"/>
|
||||
</td>
|
||||
<td>Flutter</td>
|
||||
<td><a href="https://github.com/zitadel/zitadel_flutter" target="_blank"><i class="lab la-github"></i></a></td>
|
||||
<td><a href="/examples/login/flutter">Guide</a></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
### Regular web app
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Language</th>
|
||||
<th>Example</th>
|
||||
<th>Quickstart</th>
|
||||
<th>SDK</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img src="/docs/img/tech/nextjs.svg" alt="nextjs"/>
|
||||
</td>
|
||||
<td>NextJS</td>
|
||||
<td><a href="https://github.com/zitadel/zitadel-nextjs" target="_blank"><i class="lab la-github"></i></a></td>
|
||||
<td><a href="/examples/login/nextjs">Guide</a></td>
|
||||
<td><a href="./sdks#more">NextAuth Provider</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img src="/docs/img/tech/golang.svg" alt="golang"/>
|
||||
</td>
|
||||
<td>Go Web</td>
|
||||
<td><a href="https://github.com/zitadel/zitadel-go/tree/next/example/app" target="_blank"><i class="lab la-github"></i></a></td>
|
||||
<td><a href="/examples/login/go">Guide</a></td>
|
||||
<td><a href="https://github.com/zitadel/zitadel-go/tree/next" target="_blank">SDK</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img src="/docs/img/tech/java.svg" alt="java"/>
|
||||
</td>
|
||||
<td>Java Spring Boot Web</td>
|
||||
<td><a href="https://github.com/zitadel/zitadel-java" target="_blank"><i class="lab la-github"></i></a></td>
|
||||
<td><a href="/examples/login/java-spring">Guide</a></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img src="/docs/img/tech/php.svg" alt="php"/>
|
||||
</td>
|
||||
<td>Symfony PHP Framework</td>
|
||||
<td><a href="https://github.com/zitadel/example-symfony-oidc" target="_blank"><i class="lab la-github"></i></a></td>
|
||||
<td><a href="/examples/login/symfony">Guide</a></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img src="/docs/img/tech/python.svg" alt="python"/>
|
||||
</td>
|
||||
<td>Python Flask Web</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img src="/docs/img/tech/python.svg" alt="python"/>
|
||||
</td>
|
||||
<td>Python Django Web</td>
|
||||
<td><a href="https://github.com/zitadel/example-python-django-oidc" target="_blank"><i class="lab la-github"></i></a></td>
|
||||
<td><a href="/examples/login/django">Guide</a></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img src="/docs/img/tech/dotnet.svg" alt="dotnet"/>
|
||||
</td>
|
||||
<td>ASP.NET Core MVC Web</td>
|
||||
<td><a href="https://github.com/smartive/zitadel-net/tree/main/examples/Zitadel.AspNet.AuthN" target="_blank"><i class="lab la-github"></i></a></td>
|
||||
<td><a href="https://github.com/smartive/zitadel-net/tree/main/src/Zitadel#authentication-in-web-apps">Guide</a></td>
|
||||
<td><a href="https://github.com/smartive/zitadel-net">SDK</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## Backend
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Language</th>
|
||||
<th>Example</th>
|
||||
<th>Quickstart</th>
|
||||
<th>SDK</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img src="/docs/img/tech/golang.svg" alt="golang"/>
|
||||
</td>
|
||||
<td>Golang</td>
|
||||
<td><a href="https://github.com/zitadel/zitadel-go/tree/next/example/api" target="_blank"><i class="lab la-github"></i></a></td>
|
||||
<td><a href="./secure-api/go">Guide</a></td>
|
||||
<td><a href="https://github.com/zitadel/zitadel-go/tree/next" target="_blank">SDK</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="/docs/img/tech/python.svg" alt="phyton"/>
|
||||
</td>
|
||||
<td>Python Flask</td>
|
||||
<td><a href="https://github.com/zitadel/example-api-python3-flask" target="_blank"><i class="lab la-github"></i></a></td>
|
||||
<td><a href="./secure-api/python-flask">Guide</a></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="/docs/img/tech/python.svg" alt="phyton"/>
|
||||
</td>
|
||||
<td>Python Django</td>
|
||||
<td><a href="https://github.com/zitadel/example-python-django-oauth" target="_blank"><i class="lab la-github"></i></a></td>
|
||||
<td><a href="./secure-api/django">Guide</a></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="/docs/img/tech/dotnet.svg" alt="dotnet"/>
|
||||
</td>
|
||||
<td>ASP.NET Core WebAPI</td>
|
||||
<td><a href="https://github.com/smartive/zitadel-net/tree/main/examples/Zitadel.WebApi" target="_blank"><i class="lab la-github"></i></a></td>
|
||||
<td><a href="https://github.com/smartive/zitadel-net/tree/main/src/Zitadel#authentication-in-web-apis">Guide</a></td>
|
||||
<td><a href="https://github.com/smartive/zitadel-net">SDK</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="/docs/img/tech/nodejs.svg" alt="node"/>
|
||||
</td>
|
||||
<td>Node.js NestJS API</td>
|
||||
<td><a href="https://github.com/ehwplus/zitadel-nodejs-nestjs" target="_blank"><i class="lab la-github"></i></a></td>
|
||||
<td><a href="./secure-api/nodejs-nestjs">Guide</a></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img src="/docs/img/tech/php.svg" alt="php"/>
|
||||
</td>
|
||||
<td>PHP API</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="/docs/img/tech/java.svg" alt="java"/>
|
||||
</td>
|
||||
<td>Java Spring Boot API</td>
|
||||
<td><a href="https://github.com/zitadel/zitadel-java" target="_blank"><i class="lab la-github"></i></a></td>
|
||||
<td><a href="/examples/login/java-spring">Guide</a></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## Other example applications
|
||||
|
||||
- [B2B customer portal](https://github.com/zitadel/zitadel-nextjs-b2b): Showcase the use of personal access tokens in a B2B environment. Uses NextJS Framework.
|
||||
- [Frontend with backend API](https://github.com/zitadel/example-quote-generator-app): A simple web application using a React front-end and a Python back-end API, both secured using ZITADEL
|
||||
- [Introspection](https://github.com/zitadel/examples-api-access-and-token-introspection): Python examples for securing an API and invoking it as a service user
|
||||
- [Fine-grained authorization](https://github.com/zitadel/example-fine-grained-authorization): Leverage actions, custom metadata, and claims for attribute-based access control
|
||||
|
||||
Search for the "example" tag in our repository to [explore all examples](https://github.com/search?q=topic%3Aexamples+org%3Azitadel&type=repositories).
|
||||
@ -1,109 +0,0 @@
|
||||
---
|
||||
title: ZITADEL SDKs
|
||||
sidebar_label: SDKs
|
||||
---
|
||||
|
||||
On this page you find our official SDKs, links to supporting frameworks and providers, and resources to help with SDKs.
|
||||
The SDKs wrap either our [gRPC or REST APIs](/docs/apis/introduction) to provide the client with User Authentication and
|
||||
Management for resources.
|
||||
|
||||
## ZITADEL SDKs
|
||||
|
||||
| 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` |
|
||||
| React | [zitadel-react](https://github.com/zitadel/zitadel-react) | ✔️ | ❌ | `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
|
||||
|
||||
Is your language/framework missing? Fear not, you can generate your gRPC API Client with ease.
|
||||
|
||||
1. Make sure to install [buf](https://buf.build/docs/installation/)
|
||||
2. Create a `buf.gen.yaml` and configure the [plugins](https://buf.build/plugins) you need
|
||||
3. Run `buf generate https://github.com/zitadel/zitadel#format=git,tag=v2.23.1` (change the versions to your needs)
|
||||
|
||||
Let us make an example with Ruby. Any other supported language by buf will work as well. Consult
|
||||
the [buf plugin registry](https://buf.build/plugins) for more ideas.
|
||||
|
||||
### Example with Ruby
|
||||
|
||||
With gRPC we usually need to generate the client stub and the messages/types. This is why we need two plugins.
|
||||
The plugin `grpc/ruby` generates the client stub and the plugin `protocolbuffers/ruby` takes care of the messages/types.
|
||||
|
||||
```yaml
|
||||
version: v1
|
||||
plugins:
|
||||
- plugin: buf.build/grpc/ruby
|
||||
out: gen
|
||||
- plugin: buf.build/protocolbuffers/ruby
|
||||
out: gen
|
||||
```
|
||||
|
||||
If you now run `buf generate https://github.com/zitadel/zitadel#format=git,tag=v2.23.1` in the folder where
|
||||
your `buf.gen.yaml` is located you should see the folder `gen` appear.
|
||||
|
||||
If you run `ls -la gen/zitadel/` you should see something like this:
|
||||
|
||||
```bash
|
||||
ffo@ffo-pc:~/git/zitadel/ruby$ ls -la gen/zitadel/
|
||||
total 704
|
||||
drwxr-xr-x 2 ffo ffo 4096 Apr 11 16:49 .
|
||||
drwxr-xr-x 3 ffo ffo 4096 Apr 11 16:49 ..
|
||||
-rw-r--r-- 1 ffo ffo 4397 Apr 11 16:49 action_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 141097 Apr 11 16:49 admin_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 25151 Apr 11 16:49 admin_services_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 6537 Apr 11 16:49 app_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 1134 Apr 11 16:49 auth_n_key_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 32881 Apr 11 16:49 auth_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 6896 Apr 11 16:49 auth_services_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 1571 Apr 11 16:49 change_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 2488 Apr 11 16:49 event_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 14782 Apr 11 16:49 idp_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 5031 Apr 11 16:49 instance_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 223348 Apr 11 16:49 management_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 44402 Apr 11 16:49 management_services_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 3020 Apr 11 16:49 member_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 855 Apr 11 16:49 message_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 1445 Apr 11 16:49 metadata_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 2370 Apr 11 16:49 object_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 621 Apr 11 16:49 options_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 4425 Apr 11 16:49 org_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 8538 Apr 11 16:49 policy_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 8223 Apr 11 16:49 project_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 1022 Apr 11 16:49 quota_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 5872 Apr 11 16:49 settings_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 20985 Apr 11 16:49 system_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 4784 Apr 11 16:49 system_services_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 28759 Apr 11 16:49 text_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 24170 Apr 11 16:49 user_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 13568 Apr 11 16:49 v1_pb.rb
|
||||
```
|
||||
|
||||
Import these files into your project to start interacting with ZITADEL's APIs.
|
||||
|
||||
## More
|
||||
|
||||
While we are not actively maintaining the following projects, it is worth checking out if you're interested in exploring
|
||||
ZITADEL in different programming languages or frameworks.
|
||||
|
||||
- [NodeJS passport](https://github.com/buehler/node-passport-zitadel) authentication helper
|
||||
- [NextAuth Provider for ZITADEL](https://next-auth.js.org/providers/zitadel)
|
||||
|
||||
If we do not provide an example, SDK or guide, we strongly recommend using existing authentication libraries for your
|
||||
language or framework instead of building your own.
|
||||
Certified libraries have undergone rigorous testing and validation to ensure high security and reliability.
|
||||
There are many recommended libraries available, this saves time and ensures that users' data is well-protected.
|
||||
|
||||
You might want to check out the following links to find a good library:
|
||||
|
||||
- [awesome-auth](https://github.com/casbin/awesome-auth)
|
||||
- [OpenID General References](https://openid.net/developers/libraries/)
|
||||
- [OpenID certified developer tools](https://openid.net/certified-open-id-developer-tools/)
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: ZITADEL with Node.js
|
||||
sidebar_label: Node.js
|
||||
sidebar_label: NestJS
|
||||
---
|
||||
|
||||
# ZITADEL with Node.js (NestJS)
|
||||
|
||||
@ -24,7 +24,7 @@ You can do so by using [Console](../console/users) or [setting user metadata](/d
|
||||
|
||||
Most of the methods below require you to login with the correct user while setting some scopes.
|
||||
Make sure you pick the right user when logging into the test application.
|
||||
Use the [OIDC authentication request playground](/docs/apis/openidoauth/authrequest) or the configuration of an [example client](/docs/examples/introduction) to set the required scopes and receive a valid access token.
|
||||
Use the [OIDC authentication request playground](/docs/apis/openidoauth/authrequest) or the configuration of an [example client](/docs/sdk-examples/introduction) to set the required scopes and receive a valid access token.
|
||||
|
||||
:::info Getting a token
|
||||
In case you want to test out different settings configure an application with code flow (PKCE).
|
||||
@ -157,7 +157,7 @@ You can use the authentication service to request and search for the user's meta
|
||||
The introspection endpoint and the token endpoint in the examples above do not require a special scope to access.
|
||||
Yet when accessing the authentication service, you need to pass the [reserved scope](/docs/apis/openidoauth/scopes#reserved-scopes) `urn:zitadel:iam:org:project:id:zitadel:aud` along with the authentication request.
|
||||
This scope allows the user to access ZITADEL's APIs, specifically the authentication API that we need for this method.
|
||||
Use the [OIDC authentication request playground](/docs/apis/openidoauth/authrequest) or the configuration of an [example client](/docs/examples/introduction) to set the required scopes and receive a valid access token.
|
||||
Use the [OIDC authentication request playground](/docs/apis/openidoauth/authrequest) or the configuration of an [example client](/docs/sdk-examples/introduction) to set the required scopes and receive a valid access token.
|
||||
|
||||
:::note Invalid audience
|
||||
If you get the error "invalid audience (APP-Zxfako)", then you need to add the reserved scope `urn:zitadel:iam:org:project:id:zitadel:aud` to your authentication request.
|
||||
|
||||
51
docs/docs/sdk-examples/angular.mdx
Normal file
51
docs/docs/sdk-examples/angular.mdx
Normal file
@ -0,0 +1,51 @@
|
||||
---
|
||||
title: Angular
|
||||
sidebar_label: Angular
|
||||
---
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img width="100px" src="/docs/img/tech/angular.svg" alt="angular logo"/>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://angular.io/" target="_blank">Angular</a> is a popular JavaScript framework for building single-page applications (SPAs) that is known for its two-way data binding, dependency injection, and modular architecture.
|
||||
Integrate authentication to your Angular application easily by using the <a href="https://github.com/zitadel/zitadel-angular" target="_blank">zitadel-angular</a> Example.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
### Resources
|
||||
- [Angular Example Application with ZITADEL Login](https://github.com/zitadel/zitadel-angular)
|
||||
- [Step-By-Step Guide](/docs/examples/login/angular)
|
||||
- [ZITADEL Console](https://github.com/zitadel/zitadel/tree/main/console) is built with Angular and can also be used as a reference
|
||||
|
||||
|
||||
### Angular SDK
|
||||
|
||||
ZITADEL does not provide an Angular specific SDK.
|
||||
But you can integrate ZITADEL to your application by using any OIDC Library such as [angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc).
|
||||
|
||||
Check out our [Example Application](/docs/sdk-examples/angular#example-application)
|
||||
|
||||
### Example Application
|
||||
|
||||
The [zitadel-angular](https://github.com/zitadel/zitadel-angular) repository includes an Example Application ready to start and show how an Angular application looks like with integrated ZITADEL Login.
|
||||
|
||||
What does the Example include:
|
||||
- Home Page with Login Button
|
||||
- Authenticating user with OIDC PKCE Flow
|
||||
- Private Page: Shows user information of authenticated user, only accessible after login
|
||||
- Logout
|
||||
|
||||
### Step-By-Step Guide
|
||||
|
||||
The [Step-By-Step Guide](/docs/examples/login/angular) 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. Logout
|
||||
4. Correct setup for your application in ZITADEL
|
||||
|
||||
|
||||
67
docs/docs/sdk-examples/flutter.mdx
Normal file
67
docs/docs/sdk-examples/flutter.mdx
Normal file
@ -0,0 +1,67 @@
|
||||
---
|
||||
title: Flutter
|
||||
sidebar_label: Flutter
|
||||
---
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img width="100px" src="/docs/img/tech/flutter.svg" alt="flutter logo"/>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://flutter.dev/" target="_blank">Flutter</a> is a cross-platform mobile app development framework that allows developers to build native iOS and Android apps using a single codebase.
|
||||
Integrate authentication to your Flutter App easily by using the <a href="https://github.com/zitadel/zitadel_flutter" target="_blank">zitadel-flutter</a> Example.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
### Resources
|
||||
- [Flutter Example Application Repository](https://github.com/zitadel/zitadel_flutter)
|
||||
- [Step-By-Step Guide](/docs/examples/login/flutter) to create your Flutter App with ZITADEL Login
|
||||
- [Dart Client Library for ZITADEL](https://github.com/smartive/zitadel-dart)
|
||||
|
||||
### Flutter SDK
|
||||
|
||||
ZITADEL doesn't provide a specific Flutter SDK for authentication in your Web/Mobile App.
|
||||
You can use any OIDC Library such as [package:oidc](https://pub.dev/packages/oidc).
|
||||
For Mobile Apps we recommend [Flutter AppAuth](https://pub.dev/packages/flutter_appauth).
|
||||
|
||||
Check out our [Example Application](/docs/sdk-examples/flutter#example-application).
|
||||
|
||||
Additionally, you can use [smartive/zitadel-dart](https://github.com/smartive/zitadel-dart) for user and resource management.
|
||||
- Manage Resources through ZITADEL APIs
|
||||
- Authenticate Service User
|
||||
- Generated gRPC Clients for integrating ZITADEL API
|
||||
- User, Organization, Project, etc. Management
|
||||
|
||||
:::note
|
||||
This library is built by our community.
|
||||
:::
|
||||
|
||||
### Example Application
|
||||
|
||||
The [zitadel-flutter](https://github.com/zitadel/zitadel_flutter) repository includes an Example Application ready to start and show how an Flutter application looks like with integrated ZITADEL Login.
|
||||
|
||||
What does the Example include:
|
||||
- Home Page with Login Button
|
||||
- Authenticating user with OIDC PKCE Flow
|
||||
- Private Page: Only accessible after login
|
||||
|
||||
### Step-By-Step Guide
|
||||
|
||||
The [Step-By-Step Guide](/docs/examples/login/flutter) 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 Mobile App with integrated ZITADEL Login
|
||||
2. Example page accessible by authenticated user
|
||||
3. Correct setup for your application in ZITADEL
|
||||
|
||||
<div style={{display: 'grid', 'gridColumnGap': '1rem', 'gridTemplateColumns': '1fr 1fr', 'maxWidth': '500px', 'margin': '0 auto'}}>
|
||||
<img src="/docs/img/flutter/not-authed.png" alt="Unauthenticated" height="500px" />
|
||||
<img src="/docs/img/flutter/authed.png" alt="Flutter Authenticated" height="500px" />
|
||||
</div>
|
||||
|
||||
<div style={{display: 'grid', 'gridColumnGap': '1rem', 'gridTemplateColumns': '1fr 1fr', 'maxWidth': '800px', 'margin': '0 auto'}}>
|
||||
<img src="/docs/img/flutter/web-not-authed.png" alt="Unauthenticated" height="500px" />
|
||||
<img src="/docs/img/flutter/web-authed.png" alt="Flutter Authenticated" height="500px" />
|
||||
</div>
|
||||
105
docs/docs/sdk-examples/go.mdx
Normal file
105
docs/docs/sdk-examples/go.mdx
Normal file
@ -0,0 +1,105 @@
|
||||
---
|
||||
title: Go
|
||||
sidebar_label: Go
|
||||
---
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img width="100px" src="/docs/img/tech/golang.svg" alt="go logo"/>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://go.dev/" target="_blank">Go</a> is an open-source, compiled programming language that is known for its simplicity, efficiency, and concurrency capabilities.
|
||||
Get started integrating authentication to your Go Application by checking out our <a href="https://github.com/zitadel/zitadel-go" target="_blank">zitadel-go</a> SDK.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
### Resources
|
||||
- [Example App Repository](https://github.com/zitadel/zitadel-go)
|
||||
- [Go SDK](https://github.com/zitadel/zitadel-go)
|
||||
- [Web APP Step-By-Step Guide](/docs/examples/login/go)
|
||||
- [API APP Step-By-Step Guide](/docs/examples/secure-api/go)
|
||||
- [Go OIDC Library](https://github.com/zitadel/oidc)
|
||||
|
||||
### Go SDK
|
||||
|
||||
The [zitadel-go](https://github.com/zitadel/zitadel-go) SDK is a wrapper around the [zitadel/oidc](https://github.com/zitadel/oidc) to integrate Login into your Web App and abstracts the handling of specific configurations for ZITADEL.
|
||||
Additionally secure your business APIs and handle permission checks for your users.
|
||||
Last part is the integration of the ZITADEL APIs to handle user and resource management.
|
||||
|
||||
The following features are covered by the SDK:
|
||||
- Authentication in your Web App
|
||||
- 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
|
||||
- Secure your APIs
|
||||
- Authorization Check using OAuth2 Introspection
|
||||
- Check User Roles on Endpoint
|
||||
- Manage Resources through ZITADEL APIs
|
||||
- Authenticate Service User
|
||||
- Generated gRPC Clients for integrating ZITADEL API
|
||||
- User, Organization, Project, etc. Management
|
||||
|
||||
The goal is to extend the SDK over the time with the following features:
|
||||
- Build your own login UI using our Session API
|
||||
|
||||
### Go Examples
|
||||
|
||||
You can find different examples for building your Go application in the following package of the repository:
|
||||
[zitadel-go/example](https://github.com/zitadel/zitadel-go/tree/next/example)
|
||||
|
||||
#### Web Application Example
|
||||
|
||||
What does the Web Application 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
|
||||
- Logout
|
||||
|
||||
[Example Web App](https://github.com/zitadel/zitadel-go/tree/next/example/app)
|
||||
|
||||
#### API Application Example
|
||||
|
||||
What does the API Application Example include:
|
||||
- REST API Application secured with Spring Security and OAuth2
|
||||
- Public Endpoint: Accessible without authentication
|
||||
- Private Endpoint: Accessible with a token
|
||||
- Administrator Endpoint: Accessible with a token of a user with admin role
|
||||
|
||||
[Example API App](https://github.com/zitadel/zitadel-go/tree/next/example/api/http)
|
||||
|
||||
### Step-By-Step Guide
|
||||
|
||||
For Go we do have two different Step-By-Step Guides.
|
||||
One to create your web application with integrated login and one to create your API with permission checks for calling users.
|
||||
The guides lead you through the whole process from configuring the right application in ZITADEL to a ready application with integrated login or authentication checks.
|
||||
|
||||
#### Web Application Guide
|
||||
|
||||
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
|
||||
4. Logout
|
||||
5. Correct setup for your application in ZITADEL
|
||||
|
||||
[Web APP Step-By-Step Guide](/docs/examples/login/go)
|
||||
|
||||
|
||||
|
||||
|
||||
#### API Application Guide
|
||||
|
||||
After completing the Step-By-Step Guide you will have:
|
||||
1. Example REST API checking tokens against ZITADEL with OAuth2
|
||||
2. Public Endpoint accessible by any user
|
||||
3. Private Endpoint accessible by authenticated user
|
||||
4. Private Endpoint accessible by user with role 'admin'
|
||||
5. Correct setup for your application in ZITADEL
|
||||
|
||||
[API APP Step-By-Step Guide](/docs/examples/secure-api/go)
|
||||
187
docs/docs/sdk-examples/introduction.mdx
Normal file
187
docs/docs/sdk-examples/introduction.mdx
Normal file
@ -0,0 +1,187 @@
|
||||
---
|
||||
title: Introduction
|
||||
sidebar_label: Introduction
|
||||
---
|
||||
|
||||
You can integrate ZITADEL quickly into your application and be up and running within minutes.
|
||||
To achieve your goals as fast as possible, we provide you with SDKs, Example Repositories and Guides.
|
||||
|
||||
The SDKs and Integration depend on the framework and language you are using.
|
||||
|
||||
import { Tile } from "../../src/components/tile";
|
||||
|
||||
### Resources
|
||||
|
||||
<div className="tile-wrapper">
|
||||
<Tile title="Angular"
|
||||
imageSource="/docs/img/tech/angular.svg"
|
||||
link="/docs/sdk-examples/angular"></Tile>
|
||||
<Tile title="Flutter"
|
||||
imageSource="/docs/img/tech/flutter.svg"
|
||||
link="/docs/sdk-examples/flutter"></Tile>
|
||||
|
||||
<Tile title="Go"
|
||||
imageSource="/docs/img/tech/golang.svg"
|
||||
link="/docs/sdk-examples/go"></Tile>
|
||||
<Tile
|
||||
title="Java"
|
||||
imageSource="/docs/img/tech/java.svg"
|
||||
link="/docs/sdk-examples/java"></Tile>
|
||||
<Tile
|
||||
title="NestJS"
|
||||
imageSource="/docs/img/tech/nestjs.svg"
|
||||
link="/docs/sdk-examples/nestjs"></Tile>
|
||||
<Tile
|
||||
title="Next.js"
|
||||
imageSource="/docs/img/tech/nextjs.svg"
|
||||
imageSourceLight="/docs/img/tech/nextjslight.svg"
|
||||
link="/docs/sdk-examples/nextjs"></Tile>
|
||||
<Tile
|
||||
title="Python Django"
|
||||
imageSource="/docs/img/tech/django.png"
|
||||
link="/docs/sdk-examples/python-django"></Tile>
|
||||
<Tile
|
||||
title="Python Flask"
|
||||
imageSource="/docs/img/tech/flask.svg"
|
||||
imageSourceLight="/docs/img/tech/flasklight.svg"
|
||||
link="/docs/sdk-examples/python-flask"></Tile>
|
||||
<Tile
|
||||
title="React"
|
||||
imageSource="/docs/img/tech/react.png"
|
||||
link="/docs/sdk-examples/react"></Tile>
|
||||
<Tile
|
||||
title="Symfony"
|
||||
imageSource="/docs/img/tech/php.svg"
|
||||
link="/docs/sdk-examples/symfony"></Tile>
|
||||
<Tile
|
||||
title="Vue.js"
|
||||
imageSource="/docs/img/tech/vue.svg"
|
||||
link="/docs/sdk-examples/vue"></Tile>
|
||||
<Tile
|
||||
title="Dart"
|
||||
imageSource="/docs/img/tech/dart.svg"
|
||||
link="https://github.com/smartive/zitadel-dart"
|
||||
external="true"></Tile>
|
||||
<Tile
|
||||
title="Elixir"
|
||||
imageSource="/docs/img/tech/elixir.svg"
|
||||
link="https://github.com/maennchen/zitadel_api"
|
||||
external="true"></Tile>
|
||||
<Tile
|
||||
title="NextAuth"
|
||||
imageSource="/docs/img/tech/nextjs.svg"
|
||||
imageSourceLight="/docs/img/tech/nextjslight.svg"
|
||||
link="https://next-auth.js.org/providers/zitadel"
|
||||
external="true"></Tile>
|
||||
<Tile
|
||||
title="Node.js"
|
||||
imageSource="/docs/img/tech/nodejs.svg"
|
||||
link="https://www.npmjs.com/package/@zitadel/node"
|
||||
external="true"></Tile>
|
||||
<Tile
|
||||
title=".Net"
|
||||
imageSource="/docs/img/tech/dotnet.svg"
|
||||
link="https://github.com/smartive/zitadel-net"
|
||||
external="true"></Tile>
|
||||
<Tile
|
||||
title="Passport.js"
|
||||
imageSource="/docs/img/tech/passportjs.svg"
|
||||
link="https://github.com/buehler/node-passport-zitadel"
|
||||
external="true"></Tile>
|
||||
<Tile
|
||||
title="Rust"
|
||||
imageSourceLight="/docs/img/tech/rust.svg"
|
||||
imageSource="/docs/img/tech/rustlight.svg"
|
||||
link="https://github.com/smartive/zitadel-rust"
|
||||
external="true"></Tile>
|
||||
</div>
|
||||
|
||||
### OIDC Libraries
|
||||
|
||||
OIDC is a standard for authentication and most languages and frameworks do provide a OIDC library which can be easily integrated to your application.
|
||||
If we do not provide an specific example, SDK or guide, we strongly recommend using existing authentication libraries for your
|
||||
language or framework instead of building your own.
|
||||
Certified libraries have undergone rigorous testing and validation to ensure high security and reliability.
|
||||
There are many recommended libraries available, this saves time and ensures that users' data is well-protected.
|
||||
|
||||
You might want to check out the following links to find a good library:
|
||||
|
||||
- [awesome-auth](https://github.com/casbin/awesome-auth)
|
||||
- [OpenID General References](https://openid.net/developers/libraries/)
|
||||
- [OpenID certified developer tools](https://openid.net/certified-open-id-developer-tools/)
|
||||
|
||||
### Other example applications
|
||||
|
||||
- [B2B customer portal](https://github.com/zitadel/zitadel-nextjs-b2b): Showcase the use of personal access tokens in a B2B environment. Uses NextJS Framework.
|
||||
- [Frontend with backend API](https://github.com/zitadel/example-quote-generator-app): A simple web application using a React front-end and a Python back-end API, both secured using ZITADEL
|
||||
- [Introspection](https://github.com/zitadel/examples-api-access-and-token-introspection): Python examples for securing an API and invoking it as a service user
|
||||
- [Fine-grained authorization](https://github.com/zitadel/example-fine-grained-authorization): Leverage actions, custom metadata, and claims for attribute-based access control
|
||||
|
||||
Search for the "example" tag in our repository to [explore all examples](https://github.com/search?q=topic%3Aexamples+org%3Azitadel&type=repositories).
|
||||
|
||||
### Missing SDK
|
||||
|
||||
Is your language/framework missing? Fear not, you can generate your gRPC API Client with ease.
|
||||
|
||||
1. Make sure to install [buf](https://buf.build/docs/installation/)
|
||||
2. Create a `buf.gen.yaml` and configure the [plugins](https://buf.build/plugins) you need
|
||||
3. Run `buf generate https://github.com/zitadel/zitadel#format=git,tag=v2.23.1` (change the versions to your needs)
|
||||
|
||||
Let us make an example with Ruby. Any other supported language by buf will work as well. Consult
|
||||
the [buf plugin registry](https://buf.build/plugins) for more ideas.
|
||||
|
||||
#### Example with Ruby
|
||||
|
||||
With gRPC we usually need to generate the client stub and the messages/types. This is why we need two plugins.
|
||||
The plugin `grpc/ruby` generates the client stub and the plugin `protocolbuffers/ruby` takes care of the messages/types.
|
||||
|
||||
```yaml
|
||||
version: v1
|
||||
plugins:
|
||||
- plugin: buf.build/grpc/ruby
|
||||
out: gen
|
||||
- plugin: buf.build/protocolbuffers/ruby
|
||||
out: gen
|
||||
```
|
||||
|
||||
If you now run `buf generate https://github.com/zitadel/zitadel#format=git,tag=v2.23.1` in the folder where
|
||||
your `buf.gen.yaml` is located you should see the folder `gen` appear.
|
||||
|
||||
If you run `ls -la gen/zitadel/` you should see something like this:
|
||||
|
||||
```bash
|
||||
ffo@ffo-pc:~/git/zitadel/ruby$ ls -la gen/zitadel/
|
||||
total 704
|
||||
drwxr-xr-x 2 ffo ffo 4096 Apr 11 16:49 .
|
||||
drwxr-xr-x 3 ffo ffo 4096 Apr 11 16:49 ..
|
||||
-rw-r--r-- 1 ffo ffo 4397 Apr 11 16:49 action_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 141097 Apr 11 16:49 admin_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 25151 Apr 11 16:49 admin_services_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 6537 Apr 11 16:49 app_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 1134 Apr 11 16:49 auth_n_key_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 32881 Apr 11 16:49 auth_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 6896 Apr 11 16:49 auth_services_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 1571 Apr 11 16:49 change_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 2488 Apr 11 16:49 event_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 14782 Apr 11 16:49 idp_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 5031 Apr 11 16:49 instance_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 223348 Apr 11 16:49 management_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 44402 Apr 11 16:49 management_services_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 3020 Apr 11 16:49 member_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 855 Apr 11 16:49 message_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 1445 Apr 11 16:49 metadata_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 2370 Apr 11 16:49 object_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 621 Apr 11 16:49 options_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 4425 Apr 11 16:49 org_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 8538 Apr 11 16:49 policy_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 8223 Apr 11 16:49 project_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 1022 Apr 11 16:49 quota_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 5872 Apr 11 16:49 settings_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 20985 Apr 11 16:49 system_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 4784 Apr 11 16:49 system_services_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 28759 Apr 11 16:49 text_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 24170 Apr 11 16:49 user_pb.rb
|
||||
-rw-r--r-- 1 ffo ffo 13568 Apr 11 16:49 v1_pb.rb
|
||||
```
|
||||
|
||||
Import these files into your project to start interacting with ZITADEL's APIs.
|
||||
101
docs/docs/sdk-examples/java.mdx
Normal file
101
docs/docs/sdk-examples/java.mdx
Normal file
@ -0,0 +1,101 @@
|
||||
---
|
||||
title: Java Spring Boot
|
||||
sidebar_label: Java Spring Boot
|
||||
---
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img width="100px" src="/docs/img/tech/java.svg" alt="java logo"/>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://www.java.com/" target="_blank">Java</a> is a general-purpose programming language designed for object-oriented programming.
|
||||
<a href="https://spring.io/projects/spring-security/" target="_blank">Spring Security</a> is used to protect your applications from unauthorized access, protect sensitive data, and enforce access control policies.
|
||||
Get started integrating authentication to your Java Web App or API by checking out our <a href="https://github.com/zitadel/zitadel-java" target="_blank">zitadel-java</a> Example
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
### Resources
|
||||
- [Example App Repository with Spring Security](https://github.com/zitadel/zitadel-java)
|
||||
- [Example Web App with Spring Security](https://github.com/zitadel/zitadel-java/tree/main/web)
|
||||
- [Example API App with Spring Security](https://github.com/zitadel/zitadel-java/tree/main/api)
|
||||
- [Web APP Step-By-Step Guide](/docs/examples/login/java-spring)
|
||||
- [API APP Step-By-Step Guide](/docs/examples/secure-api/java-spring)
|
||||
|
||||
### Java SDK
|
||||
|
||||
Java Spring Security is a widely used and common framework to integrate Authentication and Authorization into your Applications.
|
||||
As of this at the moment there is no specific ZITADEL SDK, but we do show you how to integrate ZITADEL with Java Spring Security.
|
||||
You can use this for both your Web as for your API Applications.
|
||||
|
||||
The following features are covered by Java Spring Security:
|
||||
- Authenticate your user 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 have a ZITADEL Java SDK in the future which will cover the following:
|
||||
- Wrapper around Java Spring Security
|
||||
- Authentication with OIDC
|
||||
- Authorization and checking Rolls
|
||||
- Integrate ZITADEL APIs to read and manage resources
|
||||
- Integrate ZITADEL Session API to create your own login UI
|
||||
|
||||
### Java Examples
|
||||
|
||||
#### Web Application Example
|
||||
|
||||
What does the Web Application 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
|
||||
- Task Page: Only accessible after login and uses the API example. Requires the admin role for the application for some interaction.
|
||||
- Logout
|
||||
|
||||
[Example Web App with Spring Security](https://github.com/zitadel/zitadel-java/web)
|
||||
|
||||
#### API Application Example
|
||||
|
||||
What does the API Application Example include:
|
||||
- REST API Application secured with Spring Security and OAuth2
|
||||
- Public Endpoint: Accessible without authentication
|
||||
- Private Endpoint: Accessible with a token
|
||||
- Administrator Endpoint: Accessible with a token of a user with admin role
|
||||
|
||||
[Example API App with Spring Security](https://github.com/zitadel/zitadel-java/api)
|
||||
|
||||
### Step-By-Step Guide
|
||||
|
||||
For Java Spring we do have two different Step-By-Step Guides.
|
||||
One to create your web application with integrated login and one to create your API with permission checks for calling users.
|
||||
The guides lead you through the whole process from configuring the right application in ZITADEL to a ready application with integrated login or authentication checks.
|
||||
|
||||
#### Web Application Guide
|
||||
|
||||
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 page accessible by authenticated user showing task list
|
||||
- Task list can be read by authenticated user
|
||||
- New tasks can be created by user with admin role
|
||||
4. Logout
|
||||
5. Correct setup for your application in ZITADEL
|
||||
|
||||
[Web APP Step-By-Step Guide](/docs/examples/login/java-spring)
|
||||
|
||||
|
||||
#### API Application Guide
|
||||
|
||||
After completing the Step-By-Step Guide you will have:
|
||||
1. Example REST API checking tokens against ZITADEL with OAuth2
|
||||
2. Public Endpoint accessible by any user
|
||||
3. Private Endpoint accessible by authenticated user
|
||||
4. Private Endpoint accessible by user with role 'admin'
|
||||
5. Correct setup for your application in ZITADEL
|
||||
|
||||
[API APP Step-By-Step Guide](/docs/examples/secure-api/java-spring)
|
||||
56
docs/docs/sdk-examples/nestjs.mdx
Normal file
56
docs/docs/sdk-examples/nestjs.mdx
Normal file
@ -0,0 +1,56 @@
|
||||
---
|
||||
title: NestJS
|
||||
sidebar_label: NestJS
|
||||
---
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img width="100px" src="/docs/img/tech/nestjs.svg" alt="nest js logo"/>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://nestjs.com/" target="_blank">NestJS</a> is a comprehensive and well-maintained TypeScript-based framework for building large-scale, scalable, and maintainable Node.js applications.
|
||||
Get started integrating ZITADEL to your NestJS API by checking out the <a href="https://github.com/ehwplus/zitadel-nodejs-nestjs" target="_blank">zitadel-nodejs-nestjs</a> Example.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
### Resources
|
||||
- [Example App Repository](https://github.com/ehwplus/zitadel-nodejs-nestjs)
|
||||
- [Step-By-Step Guide](/docs/examples/secure-api/nodejs-nestjs)
|
||||
- [Passport.js](https://github.com/buehler/node-passport-zitadel) for integrating authentication
|
||||
- [Node.js gRPC Client Library](https://www.npmjs.com/package/@zitadel/node) for user and resource management
|
||||
|
||||
### SDK
|
||||
|
||||
ZITADEL doesn't provide a specific Nestjs SDK. You can use [passport-zitadel](https://github.com/buehler/node-passport-zitadel) for the authentication part.
|
||||
|
||||
Check out the [Example Application](/docs/sdk-examples/nestjs#example-application).
|
||||
|
||||
Additionally, you can use [@zitadel/node](https://www.npmjs.com/package/@zitadel/node) for user and resource management.
|
||||
- Manage Resources through ZITADEL APIs
|
||||
- Authenticate Service User
|
||||
- Generated gRPC Clients for integrating ZITADEL API
|
||||
- User, Organization, Project, etc. Management
|
||||
|
||||
:::note
|
||||
This library is built by our community.
|
||||
:::
|
||||
|
||||
### Example Application
|
||||
|
||||
What does the API Application Example include:
|
||||
- REST API Application secured with Spring Security and OAuth2
|
||||
- Private Endpoint: Accessible with a token
|
||||
|
||||
[Example API Application](https://github.com/ehwplus/zitadel-nodejs-nestjs)
|
||||
|
||||
### Step-By-Step Guide
|
||||
|
||||
After completing the Step-By-Step Guide you will have:
|
||||
1. Example REST API checking tokens against ZITADEL with OAuth2
|
||||
2. Private Endpoint accessible by authenticated user
|
||||
3. Correct setup for your application in ZITADEL
|
||||
|
||||
[API APP Step-By-Step Guide](/docs/examples/secure-api/nodejs-nestjs)
|
||||
54
docs/docs/sdk-examples/nextjs.mdx
Normal file
54
docs/docs/sdk-examples/nextjs.mdx
Normal file
@ -0,0 +1,54 @@
|
||||
---
|
||||
title: Next.js
|
||||
sidebar_label: Next.js
|
||||
---
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img width="100px" src="/docs/img/tech/nextjs.svg" alt="next js logo" className="hideonlight"/>
|
||||
<img width="100px" src="/docs/img/tech/nextjslight.svg" alt="next js logo" className="hideondark"/>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://nextjs.org/" target="_blank">Next.js</a> is a React-based framework that provides a powerful and flexible set of tools for building high-performance, SEO-friendly web applications.
|
||||
Get started integrating authentication to your Next.js Application by checking out our <a href="https://github.com/zitadel/zitadel-nextjs" target="_blank">zitadel-nextjs</a> Example.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
### Resources
|
||||
- [Example App Repository](https://github.com/zitadel/zitadel-nextjs)
|
||||
- [Step-By-Step Guide](/docs/examples/login/nextjs)
|
||||
- [B2B customer portal](https://github.com/zitadel/zitadel-nextjs-b2b): Showcase the use of personal access tokens in a B2B environment built with Next.js
|
||||
|
||||
### SDK
|
||||
|
||||
ZITADEL does not provide a Next.js specific SDK.
|
||||
However, for integrating authentication into your Next.js Application you can use [NextAuth ZITADEL Provider](https://next-auth.js.org/providers/zitadel)
|
||||
|
||||
Check out our [Example Application](/docs/sdk-examples/nextjs#example-application)
|
||||
|
||||
|
||||
### Example Application
|
||||
|
||||
The [zitadel-nextjs](https://github.com/zitadel/zitadel-nextjs) repository includes an Example Application ready to start and show how a Next.js application looks like with integrated ZITADEL Login.
|
||||
|
||||
What does the Example include:
|
||||
TODO: ?? Update with correct infos
|
||||
- Home Page with Login Button
|
||||
- Authenticating user with OIDC PKCE Flow
|
||||
- Private Page: Shows user information of authenticated user, only accessible after login
|
||||
- Logout
|
||||
|
||||
### Step-By-Step Guide
|
||||
|
||||
The [Step-By-Step Guide](/docs/examples/login/nextjs) 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:
|
||||
TODO: ?? Updated with correct infos
|
||||
1. Example Web Application with integrated ZITADEL Login
|
||||
2. Example page accessible by authenticated user showing retrieved user information
|
||||
3. Logout
|
||||
4. Correct setup for your application in ZITADEL
|
||||
|
||||
71
docs/docs/sdk-examples/python-django.mdx
Normal file
71
docs/docs/sdk-examples/python-django.mdx
Normal file
@ -0,0 +1,71 @@
|
||||
---
|
||||
title: Python Django
|
||||
sidebar_label: Python Django
|
||||
---
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img width="100px" src="/docs/img/tech/django.png" alt="phyton logo"/>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://www.djangoproject.com/" target="_blank">Django</a> is a high-level <a href="https://www.python.org">Python</a> web framework that encourages rapid development and clean, pragmatic design.
|
||||
Get started integrating authentication to your Django API Application by checking out our <a href="https://github.com/zitadel/example-python-django-oauth" target="_blank">example-python-django-oauth</a> or your Django Web application by checking out our <a href="https://github.com/zitadel/example-python-django-oidc" target="_blank">example-python-django-oidc</a> Example.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
### Resources
|
||||
- [Example API App Repository](https://github.com/zitadel/example-python-django-oauth)
|
||||
- [API App Step-By-Step Guide](/docs/examples/secure-api/python-django)
|
||||
- [Example Web App Repository](https://github.com/zitadel/example-python-django-oidc)
|
||||
- [Web App Step-By-Step Guide](/docs/examples/login/python-django)
|
||||
|
||||
### Django SDK
|
||||
|
||||
ZITADEL does not provide a Python Django specific SDK.
|
||||
But you can integrate ZITADEL to your application by using any OIDC Library such as [mozilla-django-oidc](https://github.com/mozilla/mozilla-django-oidc) or [authlib](https://github.com/lepture/authlib).
|
||||
|
||||
### Examples Application
|
||||
|
||||
What does the API Application Example include:
|
||||
- REST API Application secured with OAuth2
|
||||
- Public Endpoint: Accessible without authentication
|
||||
- Private Endpoint: Accessible with a token
|
||||
- Administrator Endpoint: Accessible with a token of a user with admin role
|
||||
|
||||
[Example API App](https://github.com/zitadel/example-python-django-oauth)
|
||||
|
||||
What does the Web Application Example include:
|
||||
1. Example Web Application with integrated ZITADEL Login
|
||||
2. Example page accessible by authenticated user showing retrieved user information
|
||||
3. Example page accessible by authenticated user showing polls
|
||||
- Votes for polls can only be done if authenticated
|
||||
- New polls can be created by user with admin role
|
||||
4. Logout
|
||||
5. Correct setup for your application in ZITADEL
|
||||
|
||||
[Example Web App](https://github.com/zitadel/example-python-django-oidc)
|
||||
|
||||
### Step-By-Step Guide
|
||||
|
||||
After completing the Step-By-Step Guide for an API you will have:
|
||||
1. Example REST API checking tokens against ZITADEL with OAuth2
|
||||
2. Public Endpoint accessible by any user
|
||||
3. Private Endpoint accessible by authenticated user
|
||||
4. Private Endpoint accessible by user with role 'admin'
|
||||
5. Correct setup for your application in ZITADEL
|
||||
|
||||
[API App Step-By-Step Guide](/docs/examples/secure-api/python-django)
|
||||
|
||||
After completing the Step-By-Step Guide for an Web application you will have:
|
||||
1. Example Web Application with integrated ZITADEL Login
|
||||
2. Example page accessible by authenticated user showing retrieved user information
|
||||
3. Example page accessible by authenticated user showing polls
|
||||
- Votes for polls can only be done if authenticated
|
||||
- New polls can be created by user with admin role
|
||||
4. Logout
|
||||
5. Correct setup for your application in ZITADEL
|
||||
|
||||
[Web App Step-By-Step Guide](/docs/examples/login/python-django)
|
||||
53
docs/docs/sdk-examples/python-flask.mdx
Normal file
53
docs/docs/sdk-examples/python-flask.mdx
Normal file
@ -0,0 +1,53 @@
|
||||
---
|
||||
title: Python Flask
|
||||
sidebar_label: Python Flask
|
||||
---
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img width="100px" src="/docs/img/tech/flask.svg" alt="phyton logo" className="hideonlight"/>
|
||||
<img width="100px" src="/docs/img/tech/flasklight.svg" alt="phyton logo" className="hideondark"/>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://flask.palletsprojects.com/en/3.0.x/" target="_blank">Flask</a> is a lightweight and easy-to-use microframework for <a href="https://www.python.org">Python</a> web development.
|
||||
Get started integrating authentication to your Flask API Application by checking out our <a href="https://github.com/zitadel/example-api-python3-flask" target="_blank">example-api-python3-flask</a> Example.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
### Resources
|
||||
- [Example App Repository](https://github.com/zitadel/example-api-python3-flask)
|
||||
- [API APP Step-By-Step Guide](/docs/examples/secure-api/python-flask)
|
||||
- [Frontend with backend API](https://github.com/zitadel/example-quote-generator-app): A simple web application using a React front-end and a Python back-end API, both secured using ZITADEL
|
||||
- [Fine-grained authorization](https://github.com/zitadel/example-fine-grained-authorization): Leverage actions, custom metadata, and claims for attribute-based access control
|
||||
|
||||
### Flask SDK
|
||||
|
||||
ZITADEL does not provide a Python Flask specific SDK.
|
||||
But you can integrate ZITADEL to your application by using any OIDC Library such as [angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc).
|
||||
|
||||
Check out our [Example Application](/docs/sdk-examples/angular#example-application)
|
||||
|
||||
|
||||
### Examples Application
|
||||
|
||||
What does the API Application Example include:
|
||||
- REST API Application secured with OAuth2
|
||||
- Public Endpoint: Accessible without authentication
|
||||
- Private Endpoint: Accessible with a token
|
||||
- Administrator Endpoint: Accessible with a token of a user with admin role
|
||||
|
||||
[Example API App](https://github.com/zitadel/example-api-python3-flask)
|
||||
|
||||
### Step-By-Step Guide
|
||||
|
||||
After completing the Step-By-Step Guide you will have:
|
||||
1. Example REST API checking tokens against ZITADEL with OAuth2
|
||||
2. Public Endpoint accessible by any user
|
||||
3. Private Endpoint accessible by authenticated user
|
||||
4. Private Endpoint accessible by user with role 'admin'
|
||||
5. Correct setup for your application in ZITADEL
|
||||
|
||||
[API APP Step-By-Step Guide](/docs/examples/secure-api/python-flask)
|
||||
72
docs/docs/sdk-examples/react.mdx
Normal file
72
docs/docs/sdk-examples/react.mdx
Normal file
@ -0,0 +1,72 @@
|
||||
---
|
||||
title: React
|
||||
sidebar_label: React
|
||||
---
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img width="100px" src="/docs/img/tech/react.png" alt="react" />
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://react.dev/" target="_blank">
|
||||
React
|
||||
</a>{" "}
|
||||
is a declarative, component-based JavaScript library for building user
|
||||
interfaces. Integrate authentication to your React application easily by
|
||||
using the{" "}
|
||||
<a href="https://github.com/zitadel/zitadel-react" target="_blank">
|
||||
zitadel-react
|
||||
</a>{" "}
|
||||
SDK.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
### Resources
|
||||
|
||||
- [SDK with Example App](https://github.com/zitadel/zitadel-react)
|
||||
- [Step-By-Step Guide](/docs/examples/login/react)
|
||||
|
||||
### React SDK
|
||||
|
||||
The [zitadel-react](https://github.com/zitadel/zitadel-react) SDK is a wrapper around the [oidc-client-ts](https://www.npmjs.com/package/oidc-client-ts) 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-react](https://github.com/zitadel/zitadel-react) repository also includes an Example Application ready to start and show how a React 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/react) 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
|
||||
53
docs/docs/sdk-examples/symfony.mdx
Normal file
53
docs/docs/sdk-examples/symfony.mdx
Normal file
@ -0,0 +1,53 @@
|
||||
---
|
||||
title: Symfony PHP Framework
|
||||
sidebar_label: Symfony PHP
|
||||
---
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td width="100px">
|
||||
<img width="100px" src="/docs/img/tech/php.svg" alt="php logo"/>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://symfony.com/" target="_blank">Symfony</a> is a high-performance PHP framework that provides a solid foundation for building scalable and maintainable web applications.
|
||||
Integrate authentication to your Symfony application easily by using the <a href="https://github.com/zitadel/example-symfony-oidc" target="_blank">example-symfony-oidc</a> Example.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
### Resources
|
||||
- [Example Web App with ZITADEL Login](https://github.com/zitadel/example-symfony-oidc)
|
||||
- [Step-By-Step Guide](/docs/examples/login/symfony)
|
||||
|
||||
### PHP SDK
|
||||
|
||||
ZITADEL does not provide a Symfony specific SDK.
|
||||
But you can integrate ZITADEL to your application by using any OIDC Library such as [symfony-oidc](https://github.com/Drenso/symfony-oidc).
|
||||
|
||||
Check out our [Example Application](/docs/sdk-examples/symfony#example-application)
|
||||
|
||||
### Example Application
|
||||
|
||||
The [example-symfony-oidc](https://github.com/zitadel/example-symfony-oidc) repository includes an Example Application ready to start and show how a Symfony application looks like with integrated ZITADEL Login.
|
||||
|
||||
What does the Example include:
|
||||
- OIDC Code flow with User Info call after authentication.
|
||||
- Fully integrated with Symfony security and firewall.
|
||||
- User Role mapping
|
||||
- Persistent user data using local sqlite file. See DATABASE_URL in .env.
|
||||
- Public page at /
|
||||
- Authenticated /profile page for all users.
|
||||
- Authenticated /admin page for admin role users.
|
||||
- Logout
|
||||
|
||||
### Step-By-Step Guide
|
||||
|
||||
The [Step-By-Step Guide](/docs/examples/login/symfony) 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 without authentication
|
||||
3. Example page accessible by authenticated user showing retrieved user information
|
||||
4. Example administrator page accessible by user with administrator role
|
||||
5. Logout
|
||||
6. Correct setup for your application in ZITADEL
|
||||
62
docs/docs/sdk-examples/vue.mdx
Normal file
62
docs/docs/sdk-examples/vue.mdx
Normal file
@ -0,0 +1,62 @@
|
||||
---
|
||||
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
|
||||
|
||||
|
||||
|
||||
@ -11,14 +11,15 @@ module.exports = {
|
||||
type: "category",
|
||||
label: "Frontend",
|
||||
items: [
|
||||
"examples/login/react",
|
||||
"examples/login/vue",
|
||||
"examples/login/angular",
|
||||
"examples/login/flutter",
|
||||
"examples/login/nextjs",
|
||||
"examples/login/go",
|
||||
"examples/login/symfony",
|
||||
"examples/login/java-spring",
|
||||
"examples/login/nextjs",
|
||||
"examples/login/python-django",
|
||||
"examples/login/react",
|
||||
"examples/login/symfony",
|
||||
"examples/login/vue",
|
||||
{
|
||||
type: "link",
|
||||
label: ".Net",
|
||||
@ -32,37 +33,72 @@ module.exports = {
|
||||
label: "Backend",
|
||||
items: [
|
||||
"examples/secure-api/go",
|
||||
"examples/secure-api/java-spring",
|
||||
"examples/secure-api/python-django",
|
||||
"examples/secure-api/python-flask",
|
||||
"examples/secure-api/nodejs-nestjs",
|
||||
{
|
||||
type: "link",
|
||||
label: ".Net",
|
||||
href: "https://github.com/smartive/zitadel-net",
|
||||
},
|
||||
"examples/secure-api/nodejs-nestjs",
|
||||
"examples/secure-api/java-spring",
|
||||
],
|
||||
collapsed: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
"examples/sdks",
|
||||
{
|
||||
type: "category",
|
||||
label: "Example Applications",
|
||||
label: "Examples & SDKs",
|
||||
items: [
|
||||
"examples/introduction",
|
||||
"sdk-examples/introduction",
|
||||
"sdk-examples/angular",
|
||||
"sdk-examples/flutter",
|
||||
"sdk-examples/go",
|
||||
"sdk-examples/java",
|
||||
"sdk-examples/nestjs",
|
||||
"sdk-examples/nextjs",
|
||||
"sdk-examples/python-flask",
|
||||
"sdk-examples/python-django",
|
||||
"sdk-examples/react",
|
||||
"sdk-examples/symfony",
|
||||
"sdk-examples/vue",
|
||||
{
|
||||
type: "link",
|
||||
label: "Frontend", // The link label
|
||||
href: "/examples/introduction#frontend", // The internal path
|
||||
label: "Dart",
|
||||
href: "https://github.com/smartive/zitadel-dart",
|
||||
},
|
||||
{
|
||||
type: "link",
|
||||
label: "Backend", // The link label
|
||||
href: "/examples/introduction#backend", // The internal path
|
||||
label: "Elixir",
|
||||
href: "https://github.com/maennchen/zitadel_api",
|
||||
},
|
||||
{
|
||||
type: "link",
|
||||
label: "NextAuth",
|
||||
href: "https://next-auth.js.org/providers/zitadel",
|
||||
},
|
||||
{
|
||||
type: "link",
|
||||
label: "Node.js",
|
||||
href: "https://www.npmjs.com/package/@zitadel/node",
|
||||
},
|
||||
{
|
||||
type: "link",
|
||||
label: ".Net",
|
||||
href: "https://github.com/smartive/zitadel-net",
|
||||
},
|
||||
{
|
||||
type: "link",
|
||||
label: "Passport.js",
|
||||
href: "https://github.com/buehler/node-passport-zitadel",
|
||||
},
|
||||
{
|
||||
type: "link",
|
||||
label: "Rust",
|
||||
href: "https://github.com/smartive/zitadel-rust",
|
||||
},
|
||||
],
|
||||
collapsed: true,
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
|
||||
35
docs/src/components/tile.jsx
Normal file
35
docs/src/components/tile.jsx
Normal file
@ -0,0 +1,35 @@
|
||||
import React from "react";
|
||||
import styles from "../css/tile.module.css";
|
||||
|
||||
export function Tile({ title, imageSource, imageSourceLight, link, external }) {
|
||||
return (
|
||||
<a
|
||||
href={link}
|
||||
className={styles.tile}
|
||||
target={external ? "_blank" : "_self"}
|
||||
>
|
||||
<h4>{title}</h4>
|
||||
<img
|
||||
className={imageSourceLight ? "hideonlight" : ""}
|
||||
src={imageSource}
|
||||
alt={title}
|
||||
width={70}
|
||||
height={70}
|
||||
/>
|
||||
{imageSourceLight && (
|
||||
<img
|
||||
className={imageSourceLight ? "hideondark" : ""}
|
||||
src={imageSourceLight}
|
||||
alt={title}
|
||||
width={70}
|
||||
height={70}
|
||||
/>
|
||||
)}
|
||||
{external && (
|
||||
<div className={styles.external}>
|
||||
<i className="las la-external-link-alt"></i>
|
||||
</div>
|
||||
)}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@ -127,12 +127,20 @@
|
||||
--gigibannerforeground: black;
|
||||
--footer-border: rgba(0, 0, 0, 0.12);
|
||||
--card-border: rgba(135, 149, 161, 0.2);
|
||||
--card-border-hover: #6c8eef;
|
||||
--ifm-pagination-nav-color-hover: #000000;
|
||||
--input-border: #1a191954;
|
||||
--input-hover-border: #000000;
|
||||
--input-background: #00000004;
|
||||
}
|
||||
|
||||
.tile-wrapper {
|
||||
margin: 0 -8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
pre code {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
@ -232,11 +240,22 @@ pre code {
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.2rem;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.8rem;
|
||||
font-size: 2.5rem;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2rem;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.navbar__brand {
|
||||
@ -305,6 +324,7 @@ h2 {
|
||||
--gigibannerforeground: white;
|
||||
--footer-border: rgba(255, 255, 255, 0.12);
|
||||
--card-border: rgba(135, 149, 161, 0.2);
|
||||
--card-border-hover: #ffffff;
|
||||
--ifm-pagination-nav-color-hover: #ffffff;
|
||||
--input-border: #f9f7f775;
|
||||
--input-hover-border: #ffffff;
|
||||
@ -563,4 +583,20 @@ p strong {
|
||||
background-color: var(--ifm-color-secondary-contrast-background);
|
||||
color: var(--ifm-color-secondary-contrast-foreground);
|
||||
border-color: var(--ifm-color-secondary-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.hideondark {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .hideondark {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.hideonlight {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .hideonlight {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
69
docs/src/css/tile.module.css
Normal file
69
docs/src/css/tile.module.css
Normal file
@ -0,0 +1,69 @@
|
||||
.tile {
|
||||
position: relative;
|
||||
margin: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 230px;
|
||||
background: var(--card-background);
|
||||
padding: 0.1rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease-in-out;
|
||||
border: 1px solid var(--card-border);
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tile h4 {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tile:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
cursor: pointer;
|
||||
text-decoration: none !important;
|
||||
border-color: var(--card-border-hover);
|
||||
}
|
||||
|
||||
.tile p {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
color: var(--ifm-font-color-base);
|
||||
}
|
||||
|
||||
.tile img {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 60px;
|
||||
background-size: cover;
|
||||
object-fit: contain;
|
||||
background-position: center;
|
||||
pointer-events: none;
|
||||
box-shadow: none !important;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.external {
|
||||
position: absolute;
|
||||
top: -1rem;
|
||||
right: -1rem;
|
||||
border-radius: 50vw;
|
||||
padding: 1rem;
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--card-border);
|
||||
background: #ffffff20;
|
||||
}
|
||||
|
||||
.external i {
|
||||
margin-bottom: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
@ -38,13 +38,13 @@ const features = [
|
||||
description=""
|
||||
/>
|
||||
<ListElement
|
||||
link="/docs/examples/sdks"
|
||||
link="/docs/sdk-examples/introduction"
|
||||
type={ICONTYPE.APIS}
|
||||
title="SDKs"
|
||||
description=""
|
||||
/>
|
||||
<ListElement
|
||||
link="/docs/examples/introduction"
|
||||
link="/docs/sdk-examples/introduction"
|
||||
type={ICONTYPE.APIS}
|
||||
title="Example Apps"
|
||||
description=""
|
||||
@ -104,7 +104,7 @@ const features = [
|
||||
title: "Get Started",
|
||||
darkImageUrl: "/docs/img/index/Quickstarts-dark.svg",
|
||||
lightImageUrl: "img/index/Quickstarts-light.svg",
|
||||
link: "examples/introduction",
|
||||
link: "/docs/sdk-examples/introduction",
|
||||
description: (
|
||||
<>
|
||||
Learn how to integrate your applications and build secure workflows and
|
||||
@ -133,7 +133,7 @@ const features = [
|
||||
description=""
|
||||
/>
|
||||
<ListElement
|
||||
link="/docs/examples/introduction"
|
||||
link="/docs/sdk-examples/introduction"
|
||||
type={ICONTYPE.APIS}
|
||||
title="Examples"
|
||||
description="Clone an existing example application."
|
||||
|
||||
BIN
docs/static/img/tech/django.png
vendored
Normal file
BIN
docs/static/img/tech/django.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
1
docs/static/img/tech/elixir.svg
vendored
Normal file
1
docs/static/img/tech/elixir.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.3 KiB |
1
docs/static/img/tech/flask.svg
vendored
Normal file
1
docs/static/img/tech/flask.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
1
docs/static/img/tech/flasklight.svg
vendored
Normal file
1
docs/static/img/tech/flasklight.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
1
docs/static/img/tech/nestjs.svg
vendored
Normal file
1
docs/static/img/tech/nestjs.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 11 KiB |
2
docs/static/img/tech/nextjs.svg
vendored
2
docs/static/img/tech/nextjs.svg
vendored
@ -5,7 +5,7 @@
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Black-Next.js" transform="translate(-247.000000, -138.000000)" fill="#000000" fill-rule="nonzero">
|
||||
<g id="Black-Next.js" transform="translate(-247.000000, -138.000000)" fill="#ffffff" fill-rule="nonzero">
|
||||
<g id="next-black" transform="translate(247.000000, 138.000000)">
|
||||
<g id="EXT-+-Type-something">
|
||||
<path d="M48.9421964,32.6320058 L87.9011585,32.6320058 L87.9011585,35.7136421 L52.5134345,35.7136421 L52.5134345,58.9070103 L85.7908813,58.9070103 L85.7908813,61.9886466 L52.5134345,61.9886466 L52.5134345,87.4526941 L88.306981,87.4526941 L88.306981,90.5343303 L48.9421964,90.5343303 L48.9421964,32.6320058 Z M91.3912326,32.6320058 L95.5306221,32.6320058 L113.8738,58.0960534 L132.622801,32.6320058 L158.124498,0.286809811 L116.22757,60.7722112 L137.817329,90.5343303 L133.51561,90.5343303 L113.8738,63.4483691 L94.1508254,90.5343303 L89.9302715,90.5343303 L111.682358,60.7722112 L91.3912326,32.6320058 Z M139.359455,35.713642 L139.359455,32.6320058 L183.756439,32.6320058 L183.756439,35.7136421 L163.302983,35.7136421 L163.302983,90.5343303 L159.731745,90.5343303 L159.731745,35.7136421 L139.359455,35.713642 Z" id="EXT"></path>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
2
docs/static/img/tech/nextjslight.svg
vendored
2
docs/static/img/tech/nextjslight.svg
vendored
@ -5,7 +5,7 @@
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Black-Next.js" transform="translate(-247.000000, -138.000000)" fill="#ffffff" fill-rule="nonzero">
|
||||
<g id="Black-Next.js" transform="translate(-247.000000, -138.000000)" fill="#000000" fill-rule="nonzero">
|
||||
<g id="next-black" transform="translate(247.000000, 138.000000)">
|
||||
<g id="EXT-+-Type-something">
|
||||
<path d="M48.9421964,32.6320058 L87.9011585,32.6320058 L87.9011585,35.7136421 L52.5134345,35.7136421 L52.5134345,58.9070103 L85.7908813,58.9070103 L85.7908813,61.9886466 L52.5134345,61.9886466 L52.5134345,87.4526941 L88.306981,87.4526941 L88.306981,90.5343303 L48.9421964,90.5343303 L48.9421964,32.6320058 Z M91.3912326,32.6320058 L95.5306221,32.6320058 L113.8738,58.0960534 L132.622801,32.6320058 L158.124498,0.286809811 L116.22757,60.7722112 L137.817329,90.5343303 L133.51561,90.5343303 L113.8738,63.4483691 L94.1508254,90.5343303 L89.9302715,90.5343303 L111.682358,60.7722112 L91.3912326,32.6320058 Z M139.359455,35.713642 L139.359455,32.6320058 L183.756439,32.6320058 L183.756439,35.7136421 L163.302983,35.7136421 L163.302983,90.5343303 L159.731745,90.5343303 L159.731745,35.7136421 L139.359455,35.713642 Z" id="EXT"></path>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
9
docs/static/img/tech/passportjs.svg
vendored
Normal file
9
docs/static/img/tech/passportjs.svg
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
|
||||
<svg width="256px" height="320px" viewBox="0 0 256 320" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
|
||||
<g>
|
||||
<path d="M128,0 C57.28,0 0,57.28 0,128 L64,128 C64,92.672 92.672,64 128,64 L128,0 L128,0 Z" fill="#D6FF00"></path>
|
||||
<path d="M256,128 C256,57.28 198.72,0 128,0 L128,64 C163.328,64 192,92.672 192,128 L256,128 L256,128 Z" fill="#34E27A"></path>
|
||||
<path d="M128,256 C198.72,256 256,198.72 256,128 L192,128 C192,163.328 163.328,192 128,192 L128,256 L128,256 Z" fill="#00B9F1"></path>
|
||||
<path d="M64,256 L64,128 L0,128 L0,320 L128,320 L128,256 L64,256 L64,256 Z" fill="#FFFFFF"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 768 B |
61
docs/static/img/tech/rust.svg
vendored
Normal file
61
docs/static/img/tech/rust.svg
vendored
Normal file
@ -0,0 +1,61 @@
|
||||
<svg version="1.1" height="106" width="106" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="logo" transform="translate(53, 53)">
|
||||
<path id="r" transform="translate(0.5, 0.5)" stroke="black" stroke-width="1" stroke-linejoin="round" d="
|
||||
M -9,-15 H 4 C 12,-15 12,-7 4,-7 H -9 Z
|
||||
M -40,22 H 0 V 11 H -9 V 3 H 1 C 12,3 6,22 15,22 H 40
|
||||
V 3 H 34 V 5 C 34,13 25,12 24,7 C 23,2 19,-2 18,-2 C 33,-10 24,-26 12,-26 H -35
|
||||
V -15 H -25 V 11 H -40 Z" />
|
||||
<g id="gear" mask="url(#holes)">
|
||||
<circle r="43" fill="none" stroke="black" stroke-width="9" />
|
||||
<g id="cogs">
|
||||
<polygon id="cog" stroke="black" stroke-width="3" stroke-linejoin="round" points="46,3 51,0 46,-3" />
|
||||
<use xlink:href="#cog" transform="rotate(11.25)" />
|
||||
<use xlink:href="#cog" transform="rotate(22.50)" />
|
||||
<use xlink:href="#cog" transform="rotate(33.75)" />
|
||||
<use xlink:href="#cog" transform="rotate(45.00)" />
|
||||
<use xlink:href="#cog" transform="rotate(56.25)" />
|
||||
<use xlink:href="#cog" transform="rotate(67.50)" />
|
||||
<use xlink:href="#cog" transform="rotate(78.75)" />
|
||||
<use xlink:href="#cog" transform="rotate(90.00)" />
|
||||
<use xlink:href="#cog" transform="rotate(101.25)" />
|
||||
<use xlink:href="#cog" transform="rotate(112.50)" />
|
||||
<use xlink:href="#cog" transform="rotate(123.75)" />
|
||||
<use xlink:href="#cog" transform="rotate(135.00)" />
|
||||
<use xlink:href="#cog" transform="rotate(146.25)" />
|
||||
<use xlink:href="#cog" transform="rotate(157.50)" />
|
||||
<use xlink:href="#cog" transform="rotate(168.75)" />
|
||||
<use xlink:href="#cog" transform="rotate(180.00)" />
|
||||
<use xlink:href="#cog" transform="rotate(191.25)" />
|
||||
<use xlink:href="#cog" transform="rotate(202.50)" />
|
||||
<use xlink:href="#cog" transform="rotate(213.75)" />
|
||||
<use xlink:href="#cog" transform="rotate(225.00)" />
|
||||
<use xlink:href="#cog" transform="rotate(236.25)" />
|
||||
<use xlink:href="#cog" transform="rotate(247.50)" />
|
||||
<use xlink:href="#cog" transform="rotate(258.75)" />
|
||||
<use xlink:href="#cog" transform="rotate(270.00)" />
|
||||
<use xlink:href="#cog" transform="rotate(281.25)" />
|
||||
<use xlink:href="#cog" transform="rotate(292.50)" />
|
||||
<use xlink:href="#cog" transform="rotate(303.75)" />
|
||||
<use xlink:href="#cog" transform="rotate(315.00)" />
|
||||
<use xlink:href="#cog" transform="rotate(326.25)" />
|
||||
<use xlink:href="#cog" transform="rotate(337.50)" />
|
||||
<use xlink:href="#cog" transform="rotate(348.75)" />
|
||||
</g>
|
||||
<g id="mounts">
|
||||
<polygon id="mount" stroke="black" stroke-width="6" stroke-linejoin="round" points="-7,-42 0,-35 7,-42" />
|
||||
<use xlink:href="#mount" transform="rotate(72)" />
|
||||
<use xlink:href="#mount" transform="rotate(144)" />
|
||||
<use xlink:href="#mount" transform="rotate(216)" />
|
||||
<use xlink:href="#mount" transform="rotate(288)" />
|
||||
</g>
|
||||
</g>
|
||||
<mask id="holes">
|
||||
<rect x="-60" y="-60" width="120" height="120" fill="white"/>
|
||||
<circle id="hole" cy="-40" r="3" />
|
||||
<use xlink:href="#hole" transform="rotate(72)" />
|
||||
<use xlink:href="#hole" transform="rotate(144)" />
|
||||
<use xlink:href="#hole" transform="rotate(216)" />
|
||||
<use xlink:href="#hole" transform="rotate(288)" />
|
||||
</mask>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
61
docs/static/img/tech/rustlight.svg
vendored
Normal file
61
docs/static/img/tech/rustlight.svg
vendored
Normal file
@ -0,0 +1,61 @@
|
||||
<svg version="1.1" height="106" width="106" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="logo" transform="translate(53, 53)">
|
||||
<path id="r" transform="translate(0.5, 0.5)" stroke="white" fill="white" stroke-width="1" stroke-linejoin="round" d="
|
||||
M -9,-15 H 4 C 12,-15 12,-7 4,-7 H -9 Z
|
||||
M -40,22 H 0 V 11 H -9 V 3 H 1 C 12,3 6,22 15,22 H 40
|
||||
V 3 H 34 V 5 C 34,13 25,12 24,7 C 23,2 19,-2 18,-2 C 33,-10 24,-26 12,-26 H -35
|
||||
V -15 H -25 V 11 H -40 Z" />
|
||||
<g id="gear" mask="url(#holes)">
|
||||
<circle r="43" fill="none" stroke="white" stroke-width="9" />
|
||||
<g id="cogs">
|
||||
<polygon id="cog" stroke="white" stroke-width="3" stroke-linejoin="round" points="46,3 51,0 46,-3" />
|
||||
<use xlink:href="#cog" transform="rotate(11.25)" />
|
||||
<use xlink:href="#cog" transform="rotate(22.50)" />
|
||||
<use xlink:href="#cog" transform="rotate(33.75)" />
|
||||
<use xlink:href="#cog" transform="rotate(45.00)" />
|
||||
<use xlink:href="#cog" transform="rotate(56.25)" />
|
||||
<use xlink:href="#cog" transform="rotate(67.50)" />
|
||||
<use xlink:href="#cog" transform="rotate(78.75)" />
|
||||
<use xlink:href="#cog" transform="rotate(90.00)" />
|
||||
<use xlink:href="#cog" transform="rotate(101.25)" />
|
||||
<use xlink:href="#cog" transform="rotate(112.50)" />
|
||||
<use xlink:href="#cog" transform="rotate(123.75)" />
|
||||
<use xlink:href="#cog" transform="rotate(135.00)" />
|
||||
<use xlink:href="#cog" transform="rotate(146.25)" />
|
||||
<use xlink:href="#cog" transform="rotate(157.50)" />
|
||||
<use xlink:href="#cog" transform="rotate(168.75)" />
|
||||
<use xlink:href="#cog" transform="rotate(180.00)" />
|
||||
<use xlink:href="#cog" transform="rotate(191.25)" />
|
||||
<use xlink:href="#cog" transform="rotate(202.50)" />
|
||||
<use xlink:href="#cog" transform="rotate(213.75)" />
|
||||
<use xlink:href="#cog" transform="rotate(225.00)" />
|
||||
<use xlink:href="#cog" transform="rotate(236.25)" />
|
||||
<use xlink:href="#cog" transform="rotate(247.50)" />
|
||||
<use xlink:href="#cog" transform="rotate(258.75)" />
|
||||
<use xlink:href="#cog" transform="rotate(270.00)" />
|
||||
<use xlink:href="#cog" transform="rotate(281.25)" />
|
||||
<use xlink:href="#cog" transform="rotate(292.50)" />
|
||||
<use xlink:href="#cog" transform="rotate(303.75)" />
|
||||
<use xlink:href="#cog" transform="rotate(315.00)" />
|
||||
<use xlink:href="#cog" transform="rotate(326.25)" />
|
||||
<use xlink:href="#cog" transform="rotate(337.50)" />
|
||||
<use xlink:href="#cog" transform="rotate(348.75)" />
|
||||
</g>
|
||||
<g id="mounts">
|
||||
<polygon id="mount" stroke="white" stroke-width="6" stroke-linejoin="round" points="-7,-42 0,-35 7,-42" />
|
||||
<use xlink:href="#mount" transform="rotate(72)" />
|
||||
<use xlink:href="#mount" transform="rotate(144)" />
|
||||
<use xlink:href="#mount" transform="rotate(216)" />
|
||||
<use xlink:href="#mount" transform="rotate(288)" />
|
||||
</g>
|
||||
</g>
|
||||
<mask id="holes">
|
||||
<rect x="-60" y="-60" width="120" height="120" fill="white"/>
|
||||
<circle id="hole" cy="-40" r="3" />
|
||||
<use xlink:href="#hole" transform="rotate(72)" />
|
||||
<use xlink:href="#hole" transform="rotate(144)" />
|
||||
<use xlink:href="#hole" transform="rotate(216)" />
|
||||
<use xlink:href="#hole" transform="rotate(288)" />
|
||||
</mask>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
Loading…
x
Reference in New Issue
Block a user