Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-27 21:39:16 -05:00
Code Issues Activity

refactor(console): update angular integration guide (#6157)

Browse source 
* refactor(console): update angular integration guide

* refactor(console): improve content

---------

Co-authored-by: Gao Sun <gao@silverhand.io>
This commit is contained in:
Charles Zhao 2024-07-02 10:31:34 +08:00 • committed by GitHub
parent 8445db283d
commit c97ebaa41e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 31 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
packages/console/src/assets/docs/guides/spa-angular/README.mdx
View file

@ -6,12 +6,13 @@ import Steps from '@/mdx-components/Steps';
import Step from '@/mdx-components/Step';
import Checkpoint from '../../fragments/_checkpoint.md';
import RedirectUrisWeb, {defaultRedirectUri, defaultPostSignOutUri} from '../../fragments/_redirect-uris-web.mdx';
<Steps>
<Step
title="Installation"
subtitle="Install Logto core and `angular-auth-oidc-client`"
subtitle="Install Logto JS core SDK and `angular-auth-oidc-client`"
>
<Tabs>
<TabItem value="npm" label="npm">
@ -20,13 +21,6 @@ import Checkpoint from '../../fragments/_checkpoint.md';
npm i @logto/js angular-auth-oidc-client
```
</TabItem>
<TabItem value="yarn" label="Yarn">
```bash
yarn add @logto/js angular-auth-oidc-client
```
</TabItem>
<TabItem value="pnpm" label="pnpm">
@ -34,31 +28,28 @@ yarn add @logto/js angular-auth-oidc-client
pnpm add @logto/js angular-auth-oidc-client
```
</TabItem>
<TabItem value="yarn" label="yarn">
```bash
yarn add @logto/js angular-auth-oidc-client
```
</TabItem>
</Tabs>
</Step>
<Step title="Configure redirect URIs">
<RedirectUrisWeb />
</Step>
<Step title="Configure application">
<InlineNotification>
In the following steps, we assume your app is running on <code>http://localhost:3000</code>.
</InlineNotification>
In your Angular project, add the auth provider your `app.config.ts`:
### Configure redirect URIs
First, let's enter your redirect URI. E.g. `http://localhost:3000/callback`. [Redirect URI](https://www.oauth.com/oauth2-servers/redirect-uris/) is an OAuth 2.0 concept which implies the location should redirect after authentication.
<UriInputField name="redirectUris" />
After signing out, it'll be great to redirect user back to your website. For example, add `http://localhost:3000` as the post sign-out redirect URI below.
<UriInputField name="postLogoutRedirectUris" />
### Configure Angular application
Back to your Angular project, add the auth provider your `app.config.ts`:
<Code className="language-tsx">
<Code className="language-tsx" title="app/app.config.ts">
{`import { UserScope, buildAngularAuthConfig } from '@logto/js';
import { provideAuth } from 'angular-auth-oidc-client';
@ -69,8 +60,8 @@ export const appConfig: ApplicationConfig = {
config: buildAngularAuthConfig({
endpoint: '${props.endpoint}',
appId: '${props.app.id}',
redirectUri: '${props.redirectUris[0] ?? 'http://localhost:3000/callback'}',
postLogoutRedirectUri: '${props.postLogoutRedirectUris[0] ?? 'http://localhost:3000'}',
redirectUri: '${props.redirectUris[0] || defaultRedirectUri}',
postLogoutRedirectUri: '${props.postLogoutRedirectUris[0] || defaultPostSignOutUri}',
}),
}),
// ...other providers
@ -82,9 +73,9 @@ export const appConfig: ApplicationConfig = {
<Step title="Implement sign-in and sign-out">
In the component where you want to implement sign-in and sign-out (for example, `app.component.ts`), inject the `OidcSecurityService` and use it to sign in and sign out.
In the component where you want to implement sign-in and sign-out, inject the `OidcSecurityService` and use it to sign in and sign out.
```ts
```ts title="app/app.component.ts"
import { OidcSecurityService } from 'angular-auth-oidc-client';
export class AppComponent implements OnInit {
@ -112,11 +103,17 @@ Then, in the template, add buttons to sign in and sign out:
</Step>
<Step title="Subscribe to authentication state and display user information">
<Step title="Checkpoint: Test your application">
<Checkpoint />
</Step>
<Step title="Display user information">
The `OidcSecurityService` provides a convenient way to subscribe to the authentication state:
```ts
```ts title="app/app.component.ts"
import { OidcSecurityService } from 'angular-auth-oidc-client';
import type { UserInfoResponse } from '@logto/js';
@ -146,10 +143,11 @@ export class AppComponent implements OnInit {
And use it in the template:
```html
```html title="app/app.component.html"
<button *ngIf="!isAuthenticated" (click)="signIn()">Sign in</button>
<ng-container *ngIf="isAuthenticated">
<pre>{{ userData | json }}</pre>
<p>ID token: {{ idToken }}</p>
<p>Access token: {{ accessToken }}</p>
<!-- ... -->
<button (click)="signOut()">Sign out</button>
@ -158,12 +156,4 @@ And use it in the template:
</Step>
<Step
title="Checkpoint: Test your application"
>
<Checkpoint />
</Step>
</Steps>