andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-10-22 23:42:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: modify docs to comply with Google style guide for docs. (#5911)

Browse Source 
* Modifying docs to comply with Google style guide for docs.

* Removed typo.

---------

Co-authored-by: Dakshitha Ratnayake <[email protected]>
This commit is contained in:
Dakshitha Ratnayake
2023-05-23 15:18:14 +05:30
committed by GitHub
co-authored by Dakshitha Ratnayake
parent 747f1b3d6d
commit e9a9d11926
5 changed files with 105 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/docs/examples/introduction.mdx
+3 -3
View File
@@ -7,7 +7,7 @@ Our examples cover a range of programming languages and frameworks, so no matter
## Frontend
### Single Page Application
### Single page application
<table>
<tr>
@@ -46,7 +46,7 @@ Our examples cover a range of programming languages and frameworks, so no matter
</tr>
</table>
### Native / Mobile App
### Native/mobile app
<table>
<tr>
@@ -67,7 +67,7 @@ Our examples cover a range of programming languages and frameworks, so no matter
</tr>
</table>
### Regular Web App
### Regular web app
<table>
<tr>
docs/docs/examples/login/angular.md
+42 -44
View File
@@ -2,50 +2,51 @@
title: Angular
---
This integration guide shows you the recommended way to integrate ZITADEL into your Angular application.
It shows how to add user login to your application and fetch some data from the user info endpoint.
This integration guide demonstrates the recommended way to incorporate ZITADEL into your Angular application.
It explains how to enable user login in your application and how to fetch data from the user info endpoint.
At the end of the guide, your application has login functionality and has access to the current user's profile.
By the end of this guide, your application will have login functionality and will be able to access the current user's profile.
> This documentation refers to our [example](https://github.com/zitadel/zitadel-angular) in GitHub. Note that we've written ZITADEL Console in Angular, so you can also use that as a reference.
> This documentation references our [example](https://github.com/zitadel/zitadel-angular) on GitHub. Please note that we wrote the ZITADEL Console in Angular, so you can also use that as a reference.
## Setup Application and Get Keys
## Set up application and obtain keys
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.
Before we begin developing our application, we need to perform a few configuration steps in the ZITADEL Console.
You'll need to provide some information about your app. We recommend creating a new app to start from scratch. Navigate to your Project, then add a new application at the top of the page.
Select the **User Agent** application type and continue.
We recommend that you use [Proof Key for Code Exchange (PKCE)](/apis/openidoauth/grant-types#proof-key-for-code-exchange) for all SPA applications.
![Create app in console](/img/angular/app-create.png)
### Redirect URIs
With the Redirect URIs field, you tell ZITADEL where it is allowed to redirect users to after authentication. For development, you can set dev mode to `true` to enable insecure HTTP and redirect to a `localhost` URI.
The Post logout redirect send the users back to a route on your application after they have logged out.
The Redirect URIs field tells ZITADEL where it's allowed to redirect users after authentication. For development, you can set dev mode to `true` to enable insecure HTTP and redirect to a `localhost` URI.
The Post-logout redirect send the users back to a route on your application after they have logged out.
> If you are following along with the [example](https://github.com/zitadel/zitadel-angular), set dev mode to `true`, the Redirect URIs to <http://localhost:4200/auth/callback> and Post redirect URI to <http://localhost:4200/signedout>.
> If you are following along with the [example](https://github.com/zitadel/zitadel-angular), set the dev mode to `true`, the Redirect URIs to <http://localhost:4200/auth/callback> and Post redirect URI to <http://localhost:4200/signedout>.
Continue and create the application.
### Client ID
After successful app creation, a pop-up will appear, showing the app's client ID. Copy the client ID, as you will need it to configure your Angular client.
After successful creation of the app, a pop-up will appear displaying the app's client ID. Copy the client ID, as you will need it to configure your Angular client.
## Angular Setup
## Angular setup
Now that you have your web application configured on the ZITADEL side, you can go ahead and integrate your Angular client.
Now that you have configured your web application on the ZITADEL side, you can proceed with the integration of your Angular client.
### Install Angular Dependencies
### Install Angular dependencies
You need to install an OAuth / OIDC client to connect with ZITADEL. Run the following command:
To connect with ZITADEL, you need to install an OAuth/OIDC client. Run the following command:
```bash
npm install angular-oauth2-oidc
```
### Create and Configure Auth Module
### Create and configure the auth module
Add _OAuthModule_ to your Angular imports in _AppModule_ and provide the _AuthConfig_ in the providers' section. Also, ensure you import the _HTTPClientModule_.
Add _OAuthModule_ to your Angular imports in _AppModule_ and provide the _AuthConfig_ in the providers' section. Also, ensure that you import the _HTTPClientModule_.
```ts reference
https://github.com/zitadel/zitadel-angular/blob/main/src/app/app.module.ts
@@ -59,20 +60,18 @@ You can use Angular’s schematics to do so:
ng g service services/authentication
```
Copy the following code to your service. This code provides a function `authenticate()` which redirects the user to ZITADEL. After successful login, ZITADEL redirects the user back to the redirect URI configured in _AuthModule_ and ZITADEL Console. Make sure both correspond, otherwise ZITADEL throws an error.
Copy the following code to your service. This code provides a function `authenticate()`, which redirects the user to ZITADEL. After a successful login, ZITADEL redirects the user back to the redirect URI configured in _AuthModule_ and ZITADEL Console. Ensure that both correspond, otherwise ZITADEL will throw an error.
```ts reference
https://github.com/zitadel/zitadel-angular/blob/main/src/app/services/authentication.service.ts
```
Our example includes a _StatehandlerService_ to redirect the user back to the route where he initially came from.
If you don't need such behavior, you can omit the following line from the `authenticate()` method above.
Our example includes a _StatehandlerService_ that redirects the user back to the route from which they initially came.If you don't need such behavior, you can omit the following line from the `authenticate()` method above.
```ts reference
https://github.com/zitadel/zitadel-angular/blob/main/src/app/services/authentication.service.ts#L45
```
If you decide to use the _StatehandlerService_, provide it in the `app.module`. Make sure it gets initialized first using Angular’s `APP_INITIALIZER`. You find the service implementation in the [example](https://github.com/zitadel/zitadel-angular).
If you decide to use the _StatehandlerService_, include it in the `app.module`. Ensure it gets initialized first using Angular’s `APP_INITIALIZER`. You can find the service implementation in the [example](https://github.com/zitadel/zitadel-angular).
```ts reference
https://github.com/zitadel/zitadel-angular/blob/main/src/app/app.module.ts#L26-L30
@@ -82,15 +81,14 @@ https://github.com/zitadel/zitadel-angular/blob/main/src/app/app.module.ts#L26-L
https://github.com/zitadel/zitadel-angular/blob/main/src/app/app.module.ts#L55-L78
```
### Add Login to Your Application
### Add login to your application
To log a user in, you need a component or a guard.
To log in a user, you need a component or a guard.
- A component could provide a button, starting the login flow on click.
- A component could provide a button that initiates the login flow when clicked.
- A guard initiates a login flow when a user without a stored valid access token attempts to access a protected route.
- A guard that starts a login flow once a user without a stored valid access token tries to access a protected route.
Using these components heavily depends on your application. In most cases, you need both.
The use of these components depends heavily on your application. In most cases, you need both.
Generate a component like this:
@@ -100,8 +98,7 @@ ng g component components/login
Inject the _AuthenticationService_ and call `authenticate()` on some click event.
Same for the guard:
Do the same for the guard:
```bash
ng g guard guards/auth
```
@@ -118,23 +115,23 @@ Add the guard to your _RouterModule_ similar to this:
https://github.com/zitadel/zitadel-angular/blob/main/src/app/app-routing.module.ts#L9-L31
```
> Note: Make sure you redirect the user from your callback URL to a guarded page, so `authenticate()` is called again and the access token is stored.
> Note: Make sure you redirect the user from your callback URL to a guarded page, so the `authenticate()` method is called again, and the access token is stored.
```ts reference
https://github.com/zitadel/zitadel-angular/blob/main/src/app/app-routing.module.ts#L19-L21
```
### Add Logout to Your Application
### Add logout to your application
Call `auth.signout()` for logging the current user out. Note that you can also configure a logout redirect URI if you want your users to be redirected after logout.
Call `auth.signout()` to log out the current user. Keep in mind that you can also configure a logout redirect URI if you want your users to be redirected after logout.
```ts reference
https://github.com/zitadel/zitadel-angular/blob/main/src/app/components/user/user.component.ts#L20-L22
```
### Show User Information
### Display user information
To fetch user data, ZITADEL's user info endpoint has to be called. This data contains sensitive information and artifacts related to the current user's identity and the scopes you defined in your _AuthConfig_.
To fetch user data, you need to call the ZITADEL's user info endpoint. This data contains sensitive information and artifacts related to the current user's identity and the scopes you defined in your _AuthConfig_.
Our _AuthenticationService_ already includes a method called _getOIDCUser()_. You can call it wherever you need this information.
```ts reference
@@ -149,25 +146,26 @@ https://github.com/zitadel/zitadel-angular/blob/main/src/app/components/user/use
### Refresh token
If you want to add a refresh token to your application you have to navigate to the console application and tick the checkbox in the configuration section.
Then add `offline_access` to the scopes and add the line
If you want to add a refresh token to your application, navigate to the console application and check the box in the configuration section.
Then add `offline_access` to the scopes and add the following line:
```
this.oauthService.setupAutomaticSilentRefresh();
```
this will automatically refresh a token before it expires.
This line automatically refreshes a token before it expires.
## Completion
You have successfully integrated your Angular application with ZITADEL!
Congratulations! You have successfully integrated your Angular application with ZITADEL!
If you get stuck, consider checking out our [example](https://github.com/zitadel/zitadel-angular) application. It includes all the mentioned functionality of this quickstart. You can simply start by cloning the repository and replacing the _AuthConfig_ in the _AppModule_ by your own configuration. If you run into issues, contact us or raise an issue on [GitHub](https://github.com/zitadel/zitadel).
If you get stuck, consider checking out our [example](https://github.com/zitadel/zitadel-angular) application. This application includes all the funcationalities mentioned in this quickstart. You can start by cloning the repository and replacing the _AuthConfig_ in the _AppModule_ with your own configuration. If you face issues, contact us or raise an issue on [GitHub](https://github.com/zitadel/zitadel).
![App in console](/img/angular/app-screen.png)
### 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 for you to add authorization to your application using ZITADEL APIs. To do this, you can refer to the [docs](/apis/introduction) or check out the ZITADEL Console code on [GitHub](https://github.com/zitadel/zitadel) which uses gRPC to access data.
For more information 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).
For more information on how to create an Angular application, you can refer to [Angular](https://angular.io/start). If you want to learn more about the OAuth/OIDC library used above, consider reading the docs at [angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc).