mirror of
https://github.com/zitadel/zitadel.git
synced 2025-02-28 13:17:24 +00:00
docs: update angular quickstart (#1408)
* update angular doc * remove link to itself * rename proxy * remove unused quickstarts route * nonsense commit
This commit is contained in:
Max Peintner
GitHub
parent
3a66affc69
commit
b949da86a9
@ -13,4 +13,4 @@ It demonstrates how to add a user login to your application and fetch some data
|
||||
|
||||
At the end of the guide you should have an application able to login a user and read the user profile.
|
||||
|
||||
> Note that our **ZITADEL Console** is also written in Angular and can therefore be used as a reference.
|
||||
> This documentation refers to our [Template](https://github.com/caos/zitadel-angular-template) in Github. Note that our **ZITADEL Console** is also written in Angular and can therefore be used as a reference.
|
||||
@ -9,13 +9,13 @@ You will need to provide some information about your app. We recommend creating
|
||||
Select Web Application and continue.
|
||||
We recommend that you use [Authorization Code](architecture#Authorization_Code) in combination with [Proof Key for Code Exchange](architecture#Proof_Key_for_Code_Exchange) for all web applications.
|
||||
|
||||
> Make sure Authentication Method is set to `NONE` and the Application Type is set to `SPA` or `NATIVE`.
|
||||
<img src="img/angular/app-create-light.png" height="260px" alt="create app in console"/>
|
||||
|
||||
#### Redirect URLs
|
||||
|
||||
A redirect URL is a URL in your application where ZITADEL redirects the user after they have authenticated. Set your url to the domain the web app will be deployed to or use `localhost:4200` for development as Angular will be running on port 4200.
|
||||
|
||||
> If you are following along with the sample project you downloaded from our templates, you should set the Allowed Callback URL to http://localhost:4200/auth/callback. You will also have to set dev mode to `true` as this will enable unsecure http for the moment.
|
||||
> If you are following along with the [sample](https://github.com/caos/zitadel-angular-template) project you downloaded from our templates, you should set the Allowed Callback URL to http://localhost:4200/auth/callback. You will also have to set dev mode to `true` as this will enable unsecure http for the moment.
|
||||
|
||||
If you want to redirect the users back to a route on your application after they have logged out, add an optional redirect in the post redirectURI field.
|
||||
|
||||
@ -25,5 +25,3 @@ Continue and Create the application.
|
||||
|
||||
After successful app creation a popup will appear showing you your clientID as well as a secret.
|
||||
Copy your client ID as it will be needed in the next step.
|
||||
|
||||
> Note: You will be able to regenerate the secret at a later time, though it is not needed for SPAs with Authorization Code Flow.
|
||||
|
||||
@ -21,11 +21,15 @@ Add the Auth module to your Angular imports in AppModule and setup the AuthConfi
|
||||
import { AuthConfig, OAuthModule } from 'angular-oauth2-oidc';
|
||||
|
||||
const authConfig: AuthConfig = {
|
||||
clientId: 'YOUR CLIENT ID',
|
||||
redirectUri: 'http://localhost:4200/auth/callback', // change this to your domain later or use window.location.origin.
|
||||
scope: 'openid profile email',
|
||||
responseType: 'code',
|
||||
oidc: true,
|
||||
clientId: 'YOUR-CLIENT-ID', // replace with your appid
|
||||
dummyClientSecret: 'YOUR-SECRET', // required by library
|
||||
issuer: 'https://issuer.zitadel.ch',
|
||||
redirectUri: 'http://localhost:4200/auth/callback',
|
||||
postLogoutRedirectUri: 'http://localhost:4200/signedout', // optional
|
||||
requireHttps: false // required for running locally
|
||||
};
|
||||
|
||||
@NgModule({
|
||||
@ -44,17 +48,16 @@ Then create a Authentication Service to provide the functions to authenticate yo
|
||||
You can use Angulars schematics to do so:
|
||||
|
||||
``` bash
|
||||
ng g component services/auth
|
||||
ng g component services/authentication
|
||||
```
|
||||
This will create an AuthService automatically for you.
|
||||
This will create an AuthenticationService automatically for you.
|
||||
|
||||
Copy the following code to your service. This code provides a function `authenticate()` which redirects the user to ZITADEL. After the user has logged in it will be redirected back to your redirectURI set in Auth Module and Console. Make sure both correspond, otherwise ZITADEL will throw an error.
|
||||
|
||||
```ts
|
||||
import { AuthConfig, OAuthService } from 'angular-oauth2-oidc';
|
||||
|
||||
export default class AuthService {
|
||||
private authConfig!: AuthConfig;
|
||||
export class AuthenticationService {
|
||||
private _authenticated: boolean = false;
|
||||
private readonly _authenticationChanged: BehaviorSubject<
|
||||
boolean
|
||||
@ -62,6 +65,7 @@ export default class AuthService {
|
||||
|
||||
constructor(
|
||||
private oauthService: OAuthService,
|
||||
private authConfig: AuthConfig,
|
||||
private statehandler: StatehandlerService,
|
||||
) { }
|
||||
|
||||
@ -77,7 +81,10 @@ export default class AuthService {
|
||||
return from(this.oauthService.loadUserProfile());
|
||||
}
|
||||
|
||||
public async authenticate(): Promise<boolean> {
|
||||
public async authenticate(
|
||||
setState: boolean = true,
|
||||
): Promise<boolean> {
|
||||
console.log('auth');
|
||||
this.oauthService.configure(this.authConfig);
|
||||
|
||||
this.oauthService.strictDiscoveryDocumentValidation = false;
|
||||
@ -85,7 +92,7 @@ export default class AuthService {
|
||||
|
||||
this._authenticated = this.oauthService.hasValidAccessToken();
|
||||
|
||||
if (!this.oauthService.hasValidIdToken() || !this.authenticated || partialConfig || force) {
|
||||
if (!this.oauthService.hasValidIdToken() || !this.authenticated) {
|
||||
const newState = setState ? await this.statehandler.createState().toPromise() : undefined;
|
||||
this.oauthService.initCodeFlow(newState);
|
||||
}
|
||||
@ -102,6 +109,44 @@ export default class AuthService {
|
||||
}
|
||||
```
|
||||
|
||||
Our template includes a statehandler service to redirect the user back to the route where he initially came from. It saves the route information to a unique id so that the user can be redirected back after a successful authentication.
|
||||
If you don't need such a behaviour you can escape the following lines from the `authenticate()` method above.
|
||||
```ts
|
||||
...
|
||||
const newState = setState ? await this.statehandler.createState().toPromise() : undefined;
|
||||
...
|
||||
```
|
||||
|
||||
If you decide to use it provide the service in the `app.module` and make sure it gets initialized first using angulars `APP_INITIALIZER`.
|
||||
|
||||
```ts
|
||||
|
||||
const stateHandlerFn = (stateHandler: StatehandlerService) => {
|
||||
return () => {
|
||||
return stateHandler.initStateHandler();
|
||||
};
|
||||
};
|
||||
|
||||
...
|
||||
providers: [
|
||||
{
|
||||
provide: APP_INITIALIZER,
|
||||
useFactory: stateHandlerFn,
|
||||
multi: true,
|
||||
deps: [StatehandlerService],
|
||||
},
|
||||
{
|
||||
provide: StatehandlerProcessorService,
|
||||
useClass: StatehandlerProcessorServiceImpl,
|
||||
},
|
||||
{
|
||||
provide: StatehandlerService,
|
||||
useClass: StatehandlerServiceImpl,
|
||||
},
|
||||
]
|
||||
...
|
||||
```
|
||||
|
||||
### Add Login in your application
|
||||
|
||||
To login a user, a component or a guard is needed.
|
||||
@ -160,6 +205,16 @@ const routes: Routes = [
|
||||
...
|
||||
```
|
||||
|
||||
> Note: To complete the code flow, `authenticate()` needs to be called twice. You may have to add a guard to your callback url to make sure it will complete the flow.
|
||||
|
||||
```ts
|
||||
{
|
||||
path: 'auth/callback',
|
||||
canActivate: [AuthGuard],
|
||||
redirectTo: 'user',
|
||||
},
|
||||
```
|
||||
|
||||
### Add Logout in your application
|
||||
|
||||
The authService and Library also provides a useful function for logging out your users. Just call `auth.signout()` to log out your user. Note that you can also configure your Logout Redirect URL if you want your Users to be redirected after logout.
|
||||
@ -182,17 +237,20 @@ To fetch user data, ZITADELS user info endpoint has to be called. This data cont
|
||||
Our AuthService already includes a function called getOIDCUser(). You can call it whereever you need this information.
|
||||
|
||||
```ts
|
||||
import { AuthService } from 'src/app/services/auth.service.ts';
|
||||
import { AuthenticationService } from 'src/app/services/auth.service.ts';
|
||||
|
||||
export class SomeComponentWithUserInfo {
|
||||
constructor(public authService: AuthService){}
|
||||
public user$: Observable<any>;
|
||||
|
||||
constructor(private auth: AuthenticationService) {
|
||||
this.user$ = this.auth.getOIDCUser();
|
||||
}
|
||||
```
|
||||
|
||||
and in your html
|
||||
|
||||
```html
|
||||
<div *ngIf="(authService.getOIDCUser | async) as oidcInfo">
|
||||
<p>{{oidcInfo | json}}</p>
|
||||
<div *ngIf="user$ | async as user">
|
||||
<p>{{user | json}}</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
@ -2,8 +2,14 @@
|
||||
title: Completion
|
||||
---
|
||||
|
||||
### What next?
|
||||
You have successfully integrated ZITADEL in your Angular Application!
|
||||
|
||||
You have successfully integrated ZITADEL in your Angular Application! Now you can proceed implementing our APIs to include Authorization. Refer to our [Docs](apis#Authentication_API) or checkout our Console Code on [Github](https://github.com/caos/zitadel) which is using GRPC to access data.
|
||||
If you get stuck consider checking out our [template](https://github.com/caos/zitadel-angular-template) application which includes all the mentioned functionality of this quickstart. You can simply start by cloning the repo and replacing the AuthConfig in the app.module with your own configuration. If your run into issues don't hesitate to contact us or raise an issue on [Github](https://github.com/caos/zitadel).
|
||||
|
||||
<img src="img/angular/app-screen.png" height="260px" alt="create app in console"/>
|
||||
|
||||
### Whats next?
|
||||
|
||||
Now you can proceed implementing our APIs to include Authorization. Refer to our [Docs](apis#Authentication_API) or checkout our Console Code on [Github](https://github.com/caos/zitadel) which is using GRPC to access data.
|
||||
|
||||
For more information about creating an angular application we refer to [Angular](https://angular.io/start) and for more information about the used oauth/oidc library consider reading their docs at [angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc).
|
||||
@ -1,78 +0,0 @@
|
||||
4.66 kB service-worker-index.html
|
||||
10.5 kB index.html
|
||||
1.15 kB icons/favicon.ico
|
||||
481 B manifest.json
|
||||
3.17 kB prism.css
|
||||
11.6 kB default-skin/default-skin.css
|
||||
14.8 kB client/client-48a0d285.css
|
||||
3.88 kB client/index-5d76bab7.css
|
||||
4.14 kB photoswipe.css
|
||||
33.9 kB client/client.ea30bda8.js
|
||||
559 B client/inject_styles.5607aec6.js
|
||||
18.1 kB client/index.6f1d050b.js
|
||||
5.54 kB start.json
|
||||
967 B quickstarts.json
|
||||
6.45 kB logos/zitadel-logo-light.svg
|
||||
8.3 kB logos/zitadel-logo-solo-darkdesign.svg
|
||||
18 kB start/index.html
|
||||
14.9 kB img/develop2.png
|
||||
10.1 kB img/projects2.png
|
||||
11.1 kB img/personal2.png
|
||||
7.96 kB quickstarts/index.html
|
||||
15.2 kB use/index.html
|
||||
22.8 kB apis/index.html
|
||||
73.1 kB img/accounts_org_register.png
|
||||
10.3 kB client/[slug]-3cb415b8.css
|
||||
1.52 kB client/index-4d174bf5.css
|
||||
20.7 kB client/[slug].aebb20dc.js
|
||||
4.16 kB client/index.c2043c63.js
|
||||
114 kB architecture/index.html
|
||||
207 kB img/accounts_password.png
|
||||
199 kB img/accounts_page.png
|
||||
899 B tech/angular.svg
|
||||
1.79 kB tech/dart.svg
|
||||
2.29 kB tech/golang.svg
|
||||
200 kB img/accounts_otp_verify.png
|
||||
21.3 kB img/zitadel_software_architecture.png
|
||||
10.4 kB img/zitadel_cluster_architecture.png
|
||||
184 kB administrate/index.html
|
||||
39 kB angular/index.html
|
||||
38.9 kB dart/index.html
|
||||
38.8 kB go/index.html
|
||||
7.37 kB img/zitadel_multicluster_architecture.png
|
||||
31 kB img/console_user_entry.png
|
||||
83.5 kB img/console_admin_entry.png
|
||||
167 kB img/console_admin_system.png
|
||||
129 kB img/console_org_domain_default.png
|
||||
126 kB img/console_org_domain_add.png
|
||||
142 kB img/console_org_domain_added.png
|
||||
126 kB img/console_user_personal_information.png
|
||||
135 kB img/console_org_domain_verify.png
|
||||
52.8 kB img/console_user_personal_info.png
|
||||
15 kB img/console_projects_empty.png
|
||||
40.2 kB img/console_projects_my_first_project.png
|
||||
40.7 kB img/console_org_domain_verified.png
|
||||
178 kB img/console_org_manage_roles_2.png
|
||||
129 kB img/console_org_manage_roles_1.png
|
||||
38.1 kB img/console_org_domain_verify_dns.png
|
||||
112 kB img/console_project_manage_roles_1.png
|
||||
19.5 kB img/console_clients_my_first_spa_wizard_1.png
|
||||
21.6 kB img/console_clients_my_first_spa_wizard_4.png
|
||||
22.3 kB img/console_clients_my_first_spa_wizard_3.png
|
||||
28.3 kB img/console_clients_my_first_spa_config.png
|
||||
27.1 kB img/console_user_list_search.png
|
||||
159 kB img/console_project_manage_roles_2.png
|
||||
25.2 kB img/console_user_list.png
|
||||
16.3 kB img/console_clients_my_first_spa_wizard_2.png
|
||||
38.8 kB img/console_authz_add_1.png
|
||||
77.2 kB administrate.json
|
||||
26.6 kB img/console_authz_overview.png
|
||||
186 kB img/console_user_manage_roles_1.png
|
||||
47.9 kB img/console_user_manage_roles_2.png
|
||||
110 kB img/console_user_create_done.png
|
||||
36.1 kB img/console_authz_add_2.png
|
||||
34.1 kB img/console_authz_add_3.png
|
||||
29.6 kB img/console_user_create_form.png
|
||||
6.53 kB apis.json
|
||||
142 kB img/console_iam_admin_failed.png
|
||||
167 kB img/console_iam_admin_views.png
|
||||
@ -1,16 +0,0 @@
|
||||
---
|
||||
title: Overview
|
||||
description: ...
|
||||
---
|
||||
|
||||
> All documentations are under active work and subject to change soon!
|
||||
|
||||
This Integration guide gives you recommendations on how to integrate different Clients with **ZITADEL**
|
||||
|
||||
- Single Page Application
|
||||
- Server Side Application
|
||||
- Mobile App
|
||||
- Native App
|
||||
- Reverse Proxy
|
||||
|
||||
For more details about how **ZITADEL** treats [scopes](architecture#Scopes) and [claims](architecture#Claims) see the [documentations](architecture).
|
||||
@ -1,62 +0,0 @@
|
||||
---
|
||||
title: Single Page Application
|
||||
description: ...
|
||||
---
|
||||
|
||||
### SPA Protocol and Flow recommendation
|
||||
|
||||
If your [client](administrate#Clients) is a single page application (SPA) we recommend that you use [Authorization Code](architecture#Authorization_Code) in combination with [Proof Key for Code Exchange](architecture#Proof_Key_for_Code_Exchange).
|
||||
|
||||
This flow has great support with most modern languages and frameworks and is the recommended default.
|
||||
|
||||
> In the OIDC and OAuth world this **client profile** is called "user-agent-based application"
|
||||
|
||||
### Typescript Example
|
||||
|
||||
#### Typescript Authentication Example
|
||||
|
||||
If you use a framework like Angular, Vue, React, ... you can use this code snippet here to integrate **ZITADEL** into you application
|
||||
|
||||
Library used for this example [https://github.com/IdentityModel/oidc-client-js](https://github.com/IdentityModel/oidc-client-js)
|
||||
|
||||
```ts
|
||||
import { UserManager, WebStorageStateStore, User } from 'oidc-client';
|
||||
|
||||
export default class AuthService {
|
||||
private userManager: UserManager;
|
||||
|
||||
constructor() {
|
||||
const ZITADEL_ISSUER_DOMAIN: string = "https://issuer.zitadel.ch";
|
||||
|
||||
const settings: any = {
|
||||
userStore: new WebStorageStateStore({ store: window.localStorage }),
|
||||
authority: ZITADEL_ISSUER_DOMAIN,
|
||||
client_id: 'YOUR_ZITADEL_CLIENT_ID',
|
||||
redirect_uri: 'http://localhost:44444/callback.html',
|
||||
response_type: 'code',
|
||||
scope: 'openid profile',
|
||||
post_logout_redirect_uri: 'http://localhost:44444/',
|
||||
};
|
||||
|
||||
this.userManager = new UserManager(settings);
|
||||
}
|
||||
|
||||
public getUser(): Promise<User | null> {
|
||||
return this.userManager.getUser();
|
||||
}
|
||||
|
||||
public login(): Promise<void> {
|
||||
return this.userManager.signinRedirect();
|
||||
}
|
||||
|
||||
public logout(): Promise<void> {
|
||||
return this.userManager.signoutRedirect();
|
||||
}
|
||||
|
||||
public getAccessToken(): Promise<string> {
|
||||
return this.userManager.getUser().then((data: any) => {
|
||||
return data.access_token;
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,10 +0,0 @@
|
||||
---
|
||||
title: Server Side Application
|
||||
description: ...
|
||||
---
|
||||
|
||||
### SSA Protocol and Flow recommendation
|
||||
|
||||
### ASP.net core example
|
||||
|
||||
> Link here
|
||||
@ -1,14 +0,0 @@
|
||||
---
|
||||
title: Mobile Application
|
||||
description: ...
|
||||
---
|
||||
|
||||
### Mobile App Protocol and Flow recommendation
|
||||
|
||||
### Swift Example
|
||||
|
||||
> Link here
|
||||
|
||||
### Java Example
|
||||
|
||||
> Link here
|
||||
@ -1,14 +0,0 @@
|
||||
---
|
||||
title: Native Application
|
||||
description: ...
|
||||
---
|
||||
|
||||
### Native App Protocol and Flow recommendation
|
||||
|
||||
### Electron Example
|
||||
|
||||
> Link here
|
||||
|
||||
### c# Example
|
||||
|
||||
> Link here
|
||||
@ -1,127 +0,0 @@
|
||||
---
|
||||
title: Proxy / WAF
|
||||
description: ...
|
||||
---
|
||||
|
||||
### Proxy Protocol and Flow recommendation
|
||||
|
||||
### Ambassador Example
|
||||
|
||||
According to [https://www.getambassador.io/docs/latest/](https://www.getambassador.io/docs/latest/) Ambassador is a:
|
||||
|
||||
>The Ambassador Edge Stack is a comprehensive, self-service edge stack and API Gateway for Kubernetes built on Envoy Proxy. The shift to Kubernetes and microservices has profound consequences for the capabilities you need at the edge, as well as how you manage the edge. The Ambassador Edge Stack has been engineered with this world in mind.
|
||||
|
||||
You can use **ZITADEL** for Authentication and Authorization with **Ambassador**.
|
||||
|
||||
> The redirect URI is `https://{AMBASSADOR_URL}/.ambassador/oauth2/redirection-endpoint`
|
||||
|
||||
#### Use Ambassador to Authenticate with ZITADEL
|
||||
|
||||
With this you can use Ambassador to initiate the Authorization Code Flow.
|
||||
|
||||
```yaml
|
||||
apiVersion: getambassador.io/v2
|
||||
kind: Filter
|
||||
metadata:
|
||||
name: zitadel-filter
|
||||
namespace: default
|
||||
spec:
|
||||
OAuth2:
|
||||
authorizationURL: https://accounts.zitadel.ch/oauth/v2/authorize
|
||||
clientID: {ZITADEL_GENERATED_CLIENT_ID}
|
||||
secret: {ZITADEL_GENERATED_CLIENT_SECRET}
|
||||
protectedOrigins:
|
||||
- origin: https://{PROTECTED_URL}
|
||||
```
|
||||
|
||||
```yaml
|
||||
apiVersion: getambassador.io/v2
|
||||
kind: FilterPolicy
|
||||
metadata:
|
||||
name: zitadel-policy
|
||||
namespace: default
|
||||
spec:
|
||||
rules:
|
||||
- host: "*"
|
||||
path: /backend/get-quote/
|
||||
filters:
|
||||
- name: zitadel-filter
|
||||
```
|
||||
|
||||
#### Use Ambassador to check JWT Bearer Tokens
|
||||
|
||||
If you would like **Ambassador** to verify a JWT token from the authorization header you can do so by configuring **ZITADEL's** endpoints.
|
||||
|
||||
> Make sure that in your client settings of **ZITADEL** the "AuthToken Options" is **JWT** by default **ZITADEL** will use opaque tokens!
|
||||
|
||||
```yaml
|
||||
apiVersion: getambassador.io/v2
|
||||
kind: Filter
|
||||
metadata:
|
||||
name: zitadel-filter
|
||||
namespace: default
|
||||
spec:
|
||||
JWT:
|
||||
jwksURI: "https://api.zitadel.ch/oauth/v2/keys"
|
||||
validAlgorithms:
|
||||
- "RS256"
|
||||
issuer: "https://issuer.zitadel.ch"
|
||||
requireIssuer: true
|
||||
```
|
||||
|
||||
```yaml
|
||||
apiVersion: getambassador.io/v2
|
||||
kind: FilterPolicy
|
||||
metadata:
|
||||
name: zitadel-policy
|
||||
namespace: default
|
||||
spec:
|
||||
rules:
|
||||
- host: "*"
|
||||
path: /backend/get-quote/
|
||||
filters:
|
||||
- name: zitadel-filter
|
||||
```
|
||||
|
||||
> Additional Infos can be found with [Ambassadors Documentation](https://www.getambassador.io/docs/latest/howtos/oauth-oidc-auth/)
|
||||
|
||||
### OAuth2 Proxy Example
|
||||
|
||||
[OAuth2-proxy](https://github.com/oauth2-proxy/oauth2-proxy) is a project which allows services to delegate the authentication flow to a IDP, for example **ZITADEL**
|
||||
|
||||
#### OAuth2 Proxy Authentication Example
|
||||
|
||||
```toml
|
||||
provider = "oidc"
|
||||
user_id_claim = "sub" #uses the subject as ID instead of the email
|
||||
provider_display_name = "ZITADEL"
|
||||
redirect_url = "http://127.0.0.1:4180/oauth2/callback"
|
||||
oidc_issuer_url = "https://issuer.zitadel.ch"
|
||||
upstreams = [
|
||||
"https://example.corp.com"
|
||||
]
|
||||
email_domains = [
|
||||
"*"
|
||||
]
|
||||
client_id = "{ZITADEL_GENERATED_CLIENT_ID}"
|
||||
client_secret = "{ZITADEL_GENERATED_CLIENT_SECRET}"
|
||||
pass_access_token = true
|
||||
cookie_secret = "{SUPPLY_SOME_SECRET_HERE}"
|
||||
skip_provider_button = true
|
||||
cookie_secure = false #localdev only false
|
||||
http_address = "127.0.0.1:4180" #localdev only
|
||||
```
|
||||
|
||||
> This was tested with version `oauth2-proxy v6.1.1 (built with go1.14.2)`
|
||||
|
||||
#### OAuth2 Proxy Authorization Example
|
||||
|
||||
> Not yet supported but with the work of [https://github.com/oauth2-proxy/oauth2-proxy/pull/797](https://github.com/oauth2-proxy/oauth2-proxy/pull/797) it should be possible in the future
|
||||
|
||||
### Cloudflare Access Example
|
||||
|
||||
> TODO
|
||||
|
||||
### NGINX Example
|
||||
|
||||
> TODO
|
||||
@ -1,12 +0,0 @@
|
||||
---
|
||||
title: API
|
||||
description: ...
|
||||
---
|
||||
|
||||
### API Protocol and Flow recommendation
|
||||
|
||||
### Go Example
|
||||
|
||||
### .net core Example
|
||||
|
||||
### node.js Example
|
||||
@ -1,100 +0,0 @@
|
||||
---
|
||||
title: Products
|
||||
description: ...
|
||||
---
|
||||
|
||||
### Grafana Example
|
||||
|
||||
**Grafana** defines itself as "The open-source platform for monitoring and observability."
|
||||
|
||||
The source code is provided on [Grafana's Github Repository](https://github.com/grafana/grafana)
|
||||
|
||||
#### Authenticate Grafana with ZITADEL
|
||||
|
||||
To authenticate **Grafana** with ZITADEL you can use the provided **Generic OAuth** plugin.
|
||||
|
||||
> We do not recommend that you rely on `allowed_domain` as means of authorizing subjects, but instead use **ZITADEL's** RBAC Assertion
|
||||
|
||||
1. Create a new project or use an existing one
|
||||
2. Add OpenID Connect / OAuth 2.0 client to the project (See screenshot for settings)
|
||||
3. Add config to your **Grafana** instance and restart it
|
||||
4. Login to **Grafana**
|
||||
|
||||
```ini
|
||||
[auth.generic_oauth]
|
||||
enabled = true
|
||||
name= ZITADEL
|
||||
client_id = {ZITADEL_GENERATED_CLIENT_ID}
|
||||
client_secret = {ZITADEL_GENERATED_CLIENT_SECRET}
|
||||
scopes = openid profile email
|
||||
auth_url = https://accounts.zitadel.ch/oauth/v2/authorize
|
||||
token_url = https://api.zitadel.ch/oauth/v2/token
|
||||
api_url = https://api.zitadel.ch/oauth/v2/userinfo
|
||||
allow_sign_up = true
|
||||
```
|
||||
|
||||
> Grafanas's redirect is URI https://yourdomain.tld/login/generic_oauth
|
||||
|
||||
<div class="zitadel-gallery" itemscope itemtype="http://schema.org/ImageGallery">
|
||||
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
|
||||
<a href="img/grafana_client_settings.png" itemprop="contentUrl" data-size="1920x1080">
|
||||
<img src="img/grafana_client_settings.png" itemprop="thumbnail" alt="Client Settings for Grafana" />
|
||||
</a>
|
||||
<figcaption itemprop="caption description">Client Settings for Grafana</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
#### Authorizes Users with Roles in Grafana
|
||||
|
||||
**ZITADEL** provides projects with the option to provide Grafana with the users role.
|
||||
|
||||
1. Create Roles (Admin, Editor, Viewer) in **ZITADEL's** project which contains **Grafana**
|
||||
2. Enable "Assert Roles on Authentication" so that the roles are asserted to the userinfo endpoint
|
||||
3. (Optional) Enable "Check roles on Authentication", this will prevent that someone without any role to login **Grafana** via **ZITADEL**
|
||||
4. Append the config below to your **Grafana** instance and reload
|
||||
5. Authorize the necessary users
|
||||
|
||||
```ini
|
||||
[auth.generic_oauth]
|
||||
...
|
||||
role_attribute_path = keys("urn:zitadel:iam:org:project:roles") | contains(@, 'Admin') && 'Admin' || contains(@, 'Editor') && 'Editor' || 'Viewer'
|
||||
...
|
||||
```
|
||||
|
||||
<div class="zitadel-gallery" itemscope itemtype="http://schema.org/ImageGallery">
|
||||
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
|
||||
<a href="img/grafana_project_settings.png" itemprop="contentUrl" data-size="1920x1080">
|
||||
<img src="img/grafana_project_settings.png" itemprop="thumbnail" alt="Project Settings for Grafana" />
|
||||
</a>
|
||||
<figcaption itemprop="caption description">Project Settings for Grafana</figcaption>
|
||||
</figure>
|
||||
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
|
||||
<a href="img/grafana_zitadel_authorization.png" itemprop="contentUrl" data-size="1920x1080">
|
||||
<img src="img/grafana_zitadel_authorization.png" itemprop="thumbnail" alt="Authorization for Grafana Role in ZITADEL" />
|
||||
</a>
|
||||
<figcaption itemprop="caption description">Authorization for Grafana Role in ZITADEL</figcaption>
|
||||
</figure>
|
||||
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
|
||||
<a href="img/grafana_login_button.png" itemprop="contentUrl" data-size="1920x1080">
|
||||
<img src="img/grafana_login_button.png" itemprop="thumbnail" alt="Grafana Login" />
|
||||
</a>
|
||||
<figcaption itemprop="caption description">Grafana Login</figcaption>
|
||||
</figure>
|
||||
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
|
||||
<a href="img/grafana_profile_settings.png" itemprop="contentUrl" data-size="1920x1080">
|
||||
<img src="img/grafana_profile_settings.png" itemprop="thumbnail" alt="Grafana with Editor Role mapped from ZITADEL" />
|
||||
</a>
|
||||
<figcaption itemprop="caption description">Grafana with Editor Role mapped from ZITADEL</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
> Grafana can not directly use ZITADEL delegation feature but normal RBAC works fine
|
||||
> Additional infos can be found in the [Grafana generic OAuth 2.0 documentation](https://grafana.com/docs/grafana/latest/auth/generic-oauth/)
|
||||
|
||||
### ArgoCD Example
|
||||
|
||||
> TODO
|
||||
|
||||
### Kubernetes Example
|
||||
|
||||
> TODO
|
||||
64
site/package-lock.json
generated
64
site/package-lock.json
generated
@ -915,15 +915,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@babel/helper-member-expression-to-functions": {
|
||||
"version": "7.12.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.1.tgz",
|
||||
"integrity": "sha512-k0CIe3tXUKTRSoEx1LQEPFU9vRQfqHtl+kf8eNnDqb4AUJEy5pz6aIiog+YWtVm2jpggjS1laH68bPsR+KWWPQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/types": "^7.12.1"
|
||||
}
|
||||
},
|
||||
"@babel/helper-module-imports": {
|
||||
"version": "7.12.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.12.5.tgz",
|
||||
@ -933,32 +924,6 @@
|
||||
"@babel/types": "^7.12.5"
|
||||
}
|
||||
},
|
||||
"@babel/helper-module-transforms": {
|
||||
"version": "7.12.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.12.1.tgz",
|
||||
"integrity": "sha512-QQzehgFAZ2bbISiCpmVGfiGux8YVFXQ0abBic2Envhej22DVXV9nCFaS5hIQbkyo1AdGb+gNME2TSh3hYJVV/w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-module-imports": "^7.12.1",
|
||||
"@babel/helper-replace-supers": "^7.12.1",
|
||||
"@babel/helper-simple-access": "^7.12.1",
|
||||
"@babel/helper-split-export-declaration": "^7.11.0",
|
||||
"@babel/helper-validator-identifier": "^7.10.4",
|
||||
"@babel/template": "^7.10.4",
|
||||
"@babel/traverse": "^7.12.1",
|
||||
"@babel/types": "^7.12.1",
|
||||
"lodash": "^4.17.19"
|
||||
}
|
||||
},
|
||||
"@babel/helper-optimise-call-expression": {
|
||||
"version": "7.10.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.4.tgz",
|
||||
"integrity": "sha512-n3UGKY4VXwXThEiKrgRAoVPBMqeoPgHVqiHZOanAJCG9nQUL2pLRQirUzl0ioKclHGpGqRgIOkgcIJaIWLpygg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/types": "^7.10.4"
|
||||
}
|
||||
},
|
||||
"@babel/helper-plugin-utils": {
|
||||
"version": "7.10.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz",
|
||||
@ -995,27 +960,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@babel/helper-replace-supers": {
|
||||
"version": "7.12.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.12.5.tgz",
|
||||
"integrity": "sha512-5YILoed0ZyIpF4gKcpZitEnXEJ9UoDRki1Ey6xz46rxOzfNMAhVIJMoune1hmPVxh40LRv1+oafz7UsWX+vyWA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-member-expression-to-functions": "^7.12.1",
|
||||
"@babel/helper-optimise-call-expression": "^7.10.4",
|
||||
"@babel/traverse": "^7.12.5",
|
||||
"@babel/types": "^7.12.5"
|
||||
}
|
||||
},
|
||||
"@babel/helper-simple-access": {
|
||||
"version": "7.12.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.12.1.tgz",
|
||||
"integrity": "sha512-OxBp7pMrjVewSSC8fXDFrHrBcJATOOFssZwv16F3/6Xtc138GHybBfPbm9kfiqQHKhYQrlamWILwlDCeyMFEaA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/types": "^7.12.1"
|
||||
}
|
||||
},
|
||||
"@babel/helper-skip-transparent-expression-wrappers": {
|
||||
"version": "7.12.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.12.1.tgz",
|
||||
@ -1052,10 +996,10 @@
|
||||
"integrity": "sha512-1UX9F7K3BS42fI6qd2A4BjKzgGjToscyZTdp1DjknHLCIvpgne6918io+aL5LXFcER/8QWiwpoY902pVEqgTXA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-function-name": "^7.10.4",
|
||||
"@babel/template": "^7.10.4",
|
||||
"@babel/traverse": "^7.10.4",
|
||||
"@babel/types": "^7.10.4"
|
||||
"@babel/helper-function-name": "^7.12.13",
|
||||
"@babel/template": "^7.12.13",
|
||||
"@babel/traverse": "^7.13.0",
|
||||
"@babel/types": "^7.13.0"
|
||||
}
|
||||
},
|
||||
"@babel/helpers": {
|
||||
|
||||
BIN
site/static/img/angular/app-create-light.png
Normal file
BIN
site/static/img/angular/app-create-light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
BIN
site/static/img/angular/app-screen.png
Normal file
BIN
site/static/img/angular/app-screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
Loading…
x
Reference in New Issue
Block a user