andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-10-28 10:02:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: proposal restructure (#5318)

Browse Source 
* docs: docs structure

* docs: remove sdk from main nav

* docs: fix broken links

* docs: texts

* docs: texts

* docs: react example

* docs: proposal restructure

* remove manual, move troubleshooting

* revmove duplicate item

* identity providers

* broken links and rel paths

* examples wip

* examples

* navigation

* support

* solution scenarios

* concepts

* overview

* Actions caution to info

* suggestions from code review

* remove start command again

* proposed start command (with and without api)

* wip startpage

* startpage

* broken link integrate

* remove get started from nav

* Apply suggestions from code review

Co-authored-by: Elio Bischof <[email protected]>

---------

Co-authored-by: Fabienne <[email protected]>
Co-authored-by: Florian Forster <[email protected]>
Co-authored-by: Elio Bischof <[email protected]>
This commit is contained in:
mffap
2023-03-07 09:33:13 +02:00
committed by GitHub
co-authored by Elio Bischof Fabienne Florian Forster
parent 23c14d9bd1
commit 8d4d182c20
61 changed files with 943 additions and 780 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/docs/examples/call-zitadel-api/dot-net.md
+1 -1
View File
@@ -113,6 +113,6 @@ If you've run into any other problem, don't hesitate to contact us or raise an i
Now you can proceed implementing our APIs by adding more calls.
Checkout more [examples from the SDK](https://github.com/zitadel/zitadel-go/blob/main/example) or refer to our [API Docs](../../apis/introduction).
Checkout more [examples from the SDK](https://github.com/zitadel/zitadel-go/blob/main/example) or refer to our [API Docs](/apis/introduction).
> This guide will be updated soon to show you how to use the SDK for your own API as well.
docs/docs/examples/call-zitadel-api/go.md
+1 -1
View File
@@ -152,6 +152,6 @@ Now you can proceed implementing our APIs by adding more calls or trying to over
log.Printf("%s was created on: %s", respOverwrite.Org.Name, respOverwrite.Org.Details.CreationDate.AsTime())
}
```
Checkout more [examples from the SDK](https://github.com/zitadel/zitadel-go/blob/main/example) or refer to our [API Docs](../../apis/introduction).
Checkout more [examples from the SDK](https://github.com/zitadel/zitadel-go/blob/main/example) or refer to our [API Docs](/apis/introduction).
> This guide will be updated soon to show you how to use the SDK for your own API as well.
docs/docs/examples/identity-proxy/oauth2-proxy.md
+1 -1
View File
@@ -13,7 +13,7 @@ title: OAuth 2.0 Proxy
Before we can start building our application we have do do a few configuration steps in ZITADEL Console.
You will need to provide some information about your app. We recommend creating a new app to start from scratch. Navigate to your project and add a new application at the top of the page.
Select Web Application and continue.
We recommend that you use [Authorization Code](../../apis/openidoauth/grant-types#authorization-code) for the OAuth 2.0 Proxy.
We recommend that you use [Authorization Code](/apis/openidoauth/grant-types#authorization-code) for the OAuth 2.0 Proxy.
> Make sure Authentication Method is set to `BASIC` and the Application Type is set to `Web`.
docs/docs/examples/introduction.mdx
+189 -123
View File
@@ -2,132 +2,198 @@
title: Overview
---
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import { Card, CardWrapper } from "../../src/components/card";
Our examples cover a range of programming languages and frameworks, so no matter what you're into, we've got you covered.
Get started with ZITADEL quickly by reading a quickstart or by cloning a [ZITADEL example](https://github.com/search?q=topic%3Aexamples+org%3Azitadel) repo.
## Frontend
<Tabs>
<TabItem value="app" label="Web · Native applications" default>
<CardWrapper>
<Card
link="/docs/examples/login/angular"
imageSource="/docs/img/tech/angular.svg"
title="Angular"
description="Add the user login to your application and query some data from the userinfo endpoint"
/>
<Card
link="/docs/examples/login/react"
imageSource="/docs/img/tech/react.png"
title="React"
description="Logs into your application and queries some data from the userinfo endpoint"
/>
<Card
link="/docs/examples/login/flutter"
imageSource="/docs/img/tech/flutter.svg"
title="Flutter"
description="Mobile Application working for iOS and Android that authenticates your user."
/>
<Card
link="/docs/examples/login/nextjs"
imageSource="/docs/img/tech/nextjs.svg"
title="NextJS"
description="A simple application to log into your user account and query some data from User endpoint."
/>
<Card
link="/docs/examples/login/nextjs-b2b"
imageSource="/docs/img/tech/nextjs.svg"
title="NextJS B2B Scenario"
description="An application to showcase your user account having multiple organizations and the use of Personal Access Tokens."
/>
</CardWrapper>
</TabItem>
<TabItem value="apis" label="APIs">
<CardWrapper>
<Card
link="/docs/examples/secure-api/go"
imageSource="/docs/img/tech/golang.svg"
title="GO"
description="This example shows you how to secure an API written in GO."
/>
<Card
link="/docs/examples/secure-api/python-flask"
imageSource="/docs/img/tech/python.svg"
title="Python"
description="This example shows you how to secure a Python3 Flask API."
/>
<Card
link="/docs/examples/secure-api/dot-net"
imageSource="/docs/img/tech/dotnet.svg"
title=".NET"
description="This example shows you how to secure a .NET API."
/>
</CardWrapper>
</TabItem>
<TabItem value="zitadel" label="ZITADEL · APIs">
<CardWrapper>
<Card
link="/docs/examples/call-zitadel-api/go"
imageSource="/docs/img/tech/golang.svg"
title="GO"
description="Demonstrates how to fetch some data from the ZITADEL management API."
/>
<Card
link="/docs/examples/call-zitadel-api/dot-net"
imageSource="/docs/img/tech/dotnet.svg"
title=".NET"
description="This integration guide shows you how to integrate ZITADEL into your .NET application. It demonstrates how to fetch some data from the ZITADEL management API."
/>
</CardWrapper>
</TabItem>
<TabItem value="proxy" label="Proxy">
<CardWrapper>
<Card
link="/docs/examples/identity-proxy/oauth2-proxy"
imageSource="/docs/img/tech/oauth2-proxy.svg"
title="OAuth 2.0 Proxy"
description="Allows services to delegate the authentication flow to a IDP, for example ZITADEL"
/>
</CardWrapper>
</TabItem>
</Tabs>
### Single Page Application
## Clone a sample project
<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>React</td>
<td><a href="https://github.com/zitadel/zitadel/issues/5223" target="_blank">🚧</a></td>
<td></td>
<td></td>
</tr>
</table>
<CardWrapper>
<Card
githubLink="https://github.com/zitadel/zitadel-java"
title="Java"
label="Java"
/>
<Card
githubLink="https://github.com/zitadel/zitadel-python3"
title="Python"
label="Python"
/>
<Card
githubLink="https://github.com/zitadel/zitadel-angular"
title="Angular"
label="Web · Mobile Web"
/>
<Card
githubLink="https://github.com/zitadel/zitadel-nextjs"
title="NextJS"
label="Web · Mobile Web"
/>
<Card
githubLink="https://github.com/zitadel/zitadel_flutter"
title="Flutter"
label="Android · iOS · Web · Mobile Web"
/>
</CardWrapper>
### Native / Mobile App
## Libraries
<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>
| Language | Description | Link |
| -------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
| Go | Go client library for ZITADEL. | [https://github.com/zitadel/zitadel-go](https://github.com/zitadel/zitadel-go) |
| .Net | Authentication / Authorization library written in dotnet for the asp.net web application package. | [https://github.com/zitadel/zitadel-net](https://github.com/zitadel/zitadel-net) |
| Dart | Dart library for ZITADEL, contains gRPC and API access elements. | [https://github.com/zitadel/zitadel-dart](https://github.com/zitadel/zitadel-dart) |
| Elixir | API Client for the ZITADEL API. | [https://github.com/jshmrtn/zitadel_api](https://github.com/jshmrtn/zitadel_api) |
### 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></td>
<td></td>
<td><a href="./sdks">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></td>
<td></td>
</tr>
<tr>
<td width="100px">
<img src="/docs/img/tech/php.svg" alt="php"/>
</td>
<td>PHP Web</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td width="100px">
<img src="/docs/img/tech/python.svg" alt="python"/>
</td>
<td>Python3 Flask Web</td>
<td></td>
<td></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></td>
<td></td>
<td></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" 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" 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/dotnet.svg" alt="dotnet"/>
</td>
<td>ASP.NET Core WebAPI</td>
<td></td>
<td><a href="./call-zitadel-api/dot-net">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>NodeJS</td>
<td></td>
<td></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></td>
<td></td>
</tr>
</table>
docs/docs/examples/libs.md
-12
View File
@@ -1,12 +0,0 @@
---
title: Libraries
---
| Language | Description | Link |
| ------------ | ---------------------|-------------|
| Go | Go client library for ZITADEL. | [https://github.com/zitadel/zitadel-go](https://github.com/zitadel/zitadel-go)
| .Net | Authentication / Authorization library written in dotnet for the asp.net web application package. | [https://github.com/zitadel/zitadel-net](https://github.com/zitadel/zitadel-net)
| Dart | Dart library for ZITADEL, contains gRPC and API access elements. | [https://github.com/zitadel/zitadel-dart](https://github.com/zitadel/zitadel-dart) |
| Elixir | API Client for the ZITADEL API. | [https://github.com/jshmrtn/zitadel_api](https://github.com/jshmrtn/zitadel_api) |
docs/docs/examples/login/angular.md
+2 -2
View File
@@ -14,7 +14,7 @@ At the end of the guide, your application has login functionality and has access
Before we can start building our application, we have to do a few configuration steps in ZITADEL Console.
You will 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 **User Agent** application type and continue.
We recommend you use [Proof Key for Code Exchange (PKCE)](../../apis/openidoauth/grant-types#proof-key-for-code-exchange) for all SPA applications.
We recommend you use [Proof Key for Code Exchange (PKCE)](/apis/openidoauth/grant-types#proof-key-for-code-exchange) for all SPA applications.
![Create app in console](/img/angular/app-create.png)
@@ -158,6 +158,6 @@ If you get stuck, consider checking out our [example](https://github.com/zitadel
### What's next?
Now that you have enabled authentication, it's time to add authorization to your application using ZITADEL APIs. Refer to the [docs](../../apis/introduction) or check out our ZITADEL Console code on [GitHub](https://github.com/zitadel/zitadel) which is using gRPC to access data.
Now that you have enabled authentication, it's time to add authorization to your application using ZITADEL APIs. Refer to the [docs](/apis/introduction) or check out our ZITADEL Console code on [GitHub](https://github.com/zitadel/zitadel) which is using gRPC to access data.
For more information about creating an Angular application, refer to [Angular](https://angular.io/start) and for more information about the OAuth/OIDC library used above, consider reading their docs at [angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc).
docs/docs/examples/login/nextjs-b2b.md
+2 -2
View File
@@ -4,7 +4,7 @@ title: Next.js B2B Scenario
This is our Zitadel [Next.js](https://nextjs.org/) B2B template. It shows how to authenticate as a user with multiple organizations. The application shows your users roles on the selected organizations, other projects your organization is allowed to use and other users having a grant to use the application.
If you need more info on B2B use cases consider reading our guide for the [B2B solution scenario](../../guides/solution-scenarios/b2b.mdx).
If you need more info on B2B use cases consider reading our guide for the [B2B solution scenario](/guides/solution-scenarios/b2b.mdx).
> You can follow along with the template code in our [zitadel-nextjs-b2b](https://github.com/zitadel/zitadel-nextjs-b2b) repo.
@@ -134,7 +134,7 @@ Let's call this new organization `Demo-Customer`.
### Users
Now switch back to the organization `Demo-Customer` and [create a new user](/manuals/user-register) in this organization.
Now switch back to the organization `Demo-Customer` and [create a new user](/guides/manage/console/users#create-user) in this organization.
Let's call the first user `Alice Admin`. Create a second user called `Eric Employee`.
### Manager Role
docs/docs/examples/login/nextjs.md
+1 -1
View File
@@ -30,7 +30,7 @@ Before we can start building our application, we have to do a few configuration
You will need to provide some information about your app.
Navigate to your Project, then add a new application at the top of the page.
Select Web application type and continue.
We recommend you use [Authorization Code](../../apis/openidoauth/grant-types#authorization-code) in combination with [Proof Key for Code Exchange (PKCE)](../../apis/openidoauth/grant-types#proof-key-for-code-exchange) for all web applications.
We recommend you use [Authorization Code](/apis/openidoauth/grant-types#authorization-code) in combination with [Proof Key for Code Exchange (PKCE)](/apis/openidoauth/grant-types#proof-key-for-code-exchange) for all web applications.
As the requests from your application to ZITADEL are made on NextJS serverside, you can select `CODE` in the next step. This makes sure you still get a secret which is then used in combination with PKCE. Note that the secret never gets exposed on the browser and is therefore kept in a confidential environment.
![Create app in console](/img/nextjs/app-create.png)
docs/docs/examples/login/react.mdx
+3 -3
View File
@@ -11,8 +11,8 @@ At the end of the guide you should have an application able to login a user and
Before we can start building our application we have to do a few configuration steps in ZITADEL Console.
You will need to provide some information about your app. We recommend creating a new app to start from scratch. Navigate to your Project and add a new application at the top of the page.
Select User Agent and continue. More about the different app types can you find [here](../../guides/integrate/oauth-recommended-flows#different-client-profiles).
We recommend that you use [Authorization Code](../../apis/openidoauth/grant-types#authorization-code) in combination with [Proof Key for Code Exchange](../../apis/openidoauth/grant-types#proof-key-for-code-exchange) for all web applications.
Select User Agent and continue. More about the different app types can you find [here](/guides/integrate/oauth-recommended-flows#different-client-profiles).
We recommend that you use [Authorization Code](/apis/openidoauth/grant-types#authorization-code) in combination with [Proof Key for Code Exchange](/apis/openidoauth/grant-types#proof-key-for-code-exchange) for all web applications.
### Redirect URLs
@@ -112,6 +112,6 @@ You have successfully integrated ZITADEL in your React Application!
### Whats next?
Now you can proceed implementing our APIs to include Authorization. You can find our API Docs [here](../../apis/introduction)
Now you can proceed implementing our APIs to include Authorization. You can find our API Docs [here](/apis/introduction)
For more information about creating a React application we refer to [React](https://reactjs.org/docs/getting-started.html) and for more information about the used oauth/oidc library consider reading their docs at [oidc-react](https://www.npmjs.com/package/oidc-react).
docs/docs/examples/sdks.md
+33
View File
@@ -0,0 +1,33 @@
---
title: SDKs
---
## ZITADEL SDK
| 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) | ❌ | ✔️ | `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` |
## 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
- [Dart library for ZITADEL](https://github.com/smartive/zitadel-dart), contains gRPC and API access elements
- [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 libraries](https://openid.net/developers/certified/)
- [OpenID uncertified libraries](https://openid.net/developers/uncertified/)