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

* refactor(console): update angular integration guide * refactor(console): improve content --------- Co-authored-by: Gao Sun <[email protected]>
logto-io · Jul 2, 2024 · c97ebaa · c97ebaa
1 parent 8445db2
commit c97ebaa
Showing 1 changed file with 26 additions and 36 deletions.
diff --git a/packages/console/src/assets/docs/guides/spa-angular/README.mdx b/packages/console/src/assets/docs/guides/spa-angular/README.mdx
@@ -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">
@@ -21,44 +22,34 @@ npm i @logto/js angular-auth-oidc-client
 ```
 
 </TabItem>
-<TabItem value="yarn" label="Yarn">
+<TabItem value="pnpm" label="pnpm">
 
 ```bash
-yarn add @logto/js angular-auth-oidc-client
+pnpm add @logto/js angular-auth-oidc-client
 ```
 
 </TabItem>
-<TabItem value="pnpm" label="pnpm">
+<TabItem value="yarn" label="yarn">
 
 ```bash
-pnpm add @logto/js angular-auth-oidc-client
+yarn add @logto/js angular-auth-oidc-client
 ```
 
 </TabItem>
 </Tabs>
 </Step>
 
-<Step title="Configure application">
+<Step title="Configure redirect URIs">
 
-<InlineNotification>
-  In the following steps, we assume your app is running on <code>http://localhost:3000</code>.
-</InlineNotification>
+<RedirectUrisWeb />
 
-### 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" />
+</Step>
 
-### Configure Angular application
+<Step title="Configure application">
 
-Back to your Angular project, add the auth provider your `app.config.ts`:
+In 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>