TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-08-15 03:07:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: update to current state (#1556)

Browse Source 
* fix: site folder

* fix: site folder
This commit is contained in:
Fabi
2021-04-08 12:35:33 +02:00
committed by GitHub
parent ba22f43e87
commit e1a930d535
72 changed files with 10613 additions and 2400 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
site/docs/angular/00-overview.md
View File

@@ -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.

6
site/docs/angular/01-configure.md
View File

@@ -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.

86
site/docs/angular/02-code.md
View File

@@ -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>
```
```

10
site/docs/angular/03-end.md
View File

@@ -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).