Skip to content

Commit

Permalink
refactor: vue sdk integration guide
Browse files Browse the repository at this point in the history
  • Loading branch information
charIeszhao committed Jul 1, 2024
1 parent f52acc4 commit cf84320
Show file tree
Hide file tree
Showing 18 changed files with 187 additions and 174 deletions.
5 changes: 1 addition & 4 deletions docs/quick-starts/fragments/_configure-redirect-uri.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
<p>
Let&apos;s switch to the Application details page of Logto Console. Add a Redirect URI{' '}
<code>{props.redirectUri}</code> and click &quot;Save changes&quot;.
</p>
Let's switch to the Application details page of Logto Console. Add a Redirect URI <code>{props.redirectUri}</code> and click "Save changes".

<img alt="Redirect URI in Logto Console" src={props.figureSrc} width="600px" />
32 changes: 12 additions & 20 deletions docs/quick-starts/framework/vue/README.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,12 @@ sidebar_custom_props:
import ApiResourcesDescription from '../../fragments/_api-resources-description.md';
import Checkpoint from '../../fragments/_checkpoint-test-your-application.md';
import FurtherReadings from '../../fragments/_further-readings.md';
import GetUserInfoApis from '../../fragments/_get-user-info-apis.mdx';
import ScopesAndClaims from '../../fragments/_scopes-and-claims.mdx';

import GetUserInformation from './_get-user-information.mdx';
import GuideTip from './_guide-tip.mdx';
import HandleAuthenticationStatus from './_handle-authentication-status.mdx';
import ImplementSignIn from './_implement-sign-in.mdx';
import ImplementSignOut from './_implement-sign-out.mdx';
import ImplementSignInAndSignOut from './_implement-sign-in-and-sign-out.mdx';
import InitClient from './_init-client.mdx';
import Installation from './_installation.mdx';
import ScopesAndClaimsCode from './_scopes-and-claims-code.mdx';
import ConfigApiResources from './api-resources/_config-api-resources.mdx';
import FetchAccessTokenForApiResources from './api-resources/_fetch-access-token-for-api-resources.mdx';
import FetchOrganizationTokenForUser from './api-resources/_fetch-organization-token-for-user.mdx';
Expand All @@ -44,25 +40,13 @@ This guide will show you how to integrate Logto into your Vue 3 application.

<InitClient />

### Implement sign-in

<ImplementSignIn />

### Implement sign-out

<ImplementSignOut />

### Handle authentication status

<HandleAuthenticationStatus />
<ImplementSignInAndSignOut />

<Checkpoint />

## Get user information

<GetUserInfoApis getIdTokenClaimsApi="getIdTokenClaims" fetchUserInfoApi="fetchUserInfo" />

<ScopesAndClaims configScopesCode={<ScopesAndClaimsCode />} />
<GetUserInformation />

## API resources

Expand All @@ -80,6 +64,14 @@ This guide will show you how to integrate Logto into your Vue 3 application.

<FetchOrganizationTokenForUser />

### Attach access token to request headers

Put the token in the `Authorization` field of HTTP headers with the Bearer format (`Bearer YOUR_TOKEN`), and you are good to go.

:::note
The Bearer Token's integration flow may vary based on the framework or requester you are using. Choose your own way to apply the request `Authorization` header.
:::

## Further readings

<FurtherReadings />
97 changes: 97 additions & 0 deletions docs/quick-starts/framework/vue/_get-user-information.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
import CodeBlock from '@theme/CodeBlock';

import ClaimsNeedNetworkRequest from '../../fragments/_claims-need-network-request.mdx';
import FindUserInfoMissing from '../../fragments/_find-user-info-missing.mdx';
import ScopesAndClaims from '../../fragments/_scopes-and-claims.mdx';
import ScopesAndClaimsIntroduction from '../../fragments/_scopes-claims-introduction.md';

### Display user information

To display the user's information, you can use the `getIdTokenClaims()` method. For example, in your Home page:

```ts title="views/HomeView.vue"
import { useLogto, type IdTokenClaims } from '@logto/vue';
import { ref } from 'vue';

const { isAuthenticated, getIdTokenClaims } = useLogto();
const user = ref<IdTokenClaims>();

if (isAuthenticated.value) {
(async () => {
const claims = await getIdTokenClaims();
user.value = claims;
})();
}
```

```html
<template>
<div v-if="isAuthenticated && user">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr v-for="(value, key) in user" v-bind:key="key">
<td>{{ key }}</td>
<td>{{ typeof value === "string" ? value : JSON.stringify(value) }}</td>
</tr>
</tbody>
</table>
</div>
</template>
```

### Request additional claims

<FindUserInfoMissing method="getIdTokenClaims()" />

<ScopesAndClaimsIntroduction />

To request additional scopes, you can configure the Logto provider configs:

```ts title="main.ts"
import { createLogto, UserScope } from '@logto/vue';

const app = createApp(App);

app.use(createLogto, {
// ...other configs
// highlight-start
scopes: [
UserScope.Email,
UserScope.Phone,
UserScope.CustomData,
UserScope.Identities,
UserScope.Organizations,
],
// highlight-end
});
app.use(router);
```

Then you can access the additional claims in the return value of `getIdTokenClaims()`:

```ts
const claims = await getIdTokenClaims();
// Now you can access additional claims `claims.email`, `claims.phone`, etc.
```

<ClaimsNeedNetworkRequest
type="method"
method="fetchUserInfo()"
codeSnippet={
<CodeBlock language="tsx">{`const { fetchUserInfo } = useLogto();
const userInfo = await fetchUserInfo();
// Now you can access the claim \`userInfo.custom_data\``}</CodeBlock>
}
/>

### Scopes and claims

<ScopesAndClaims />
29 changes: 0 additions & 29 deletions docs/quick-starts/framework/vue/_handle-authentication-status.mdx

This file was deleted.

13 changes: 6 additions & 7 deletions docs/quick-starts/framework/vue/_handle-redirect.mdx
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
### Handle redirect

We're almost there! In the last step, we use `http://localhost:3000/callback` as the Redirect URI, and now we need to handle it properly.

First let's create a callback component:
First let's create a callback page:

```ts
// CallbackView.vue
```ts title="views/CallbackView.vue"
import { useHandleSignInCallback } from '@logto/vue';
import router from '@/router';

const { isLoading } = useHandleSignInCallback(() => {
// Navigate to root path when finished
// Do something when finished, e.g. redirect to home page
});
```

Expand All @@ -21,7 +20,7 @@ const { isLoading } = useHandleSignInCallback(() => {

Finally insert the code below in your `/callback` route which does NOT require authentication:

```ts
```ts title="router/index.ts"
// Assuming vue-router
const router = createRouter({
routes: [
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import SignInNote from '../../fragments/_sign-in-note.mdx';
import AssumingUrl from '../../fragments/_web-assuming-url.md';
import WebConfigureRedirectUris from '../../fragments/_web-configure-redirect-uris.mdx';
import SignInFlowSummary from '../../fragments/_web-sign-in-flow-summary.mdx';
import SignOutNote from '../../fragments/_web-sign-out-note.md';

import HandleRedirect from './_handle-redirect.mdx';

### Configure redirect URIs

<SignInFlowSummary />

<AssumingUrl />

<WebConfigureRedirectUris />

### Handle redirect

<HandleRedirect />

### Implement sign-in and sign-out

We provide two composables `useHandleSignInCallback()` and `useLogto()` which can help you easily manage the authentication flow.

<SignInNote calling=".signIn()" />

```tsx title="views/HomeView.vue"
import { useLogto } from '@logto/vue';

const { signIn, signOut, isAuthenticated } = useLogto();

const onClickSignIn = () => signIn('http://localhost:3000/callback');
const onClickSignOut = () => signOut('http://localhost:3000');
```

```html
<template>
<button v-if="!isAuthenticated" @click="onClickSignIn">Sign In</button>
<button v-else @click="onClickSignOut">Sign Out</button>
</template>
```

<SignOutNote />
35 changes: 0 additions & 35 deletions docs/quick-starts/framework/vue/_implement-sign-in.mdx

This file was deleted.

16 changes: 0 additions & 16 deletions docs/quick-starts/framework/vue/_implement-sign-out.mdx

This file was deleted.

9 changes: 2 additions & 7 deletions docs/quick-starts/framework/vue/_init-client.mdx
Original file line number Diff line number Diff line change
@@ -1,17 +1,12 @@
import AssumingUrl from '../../fragments/_web-assuming-url.md';

<AssumingUrl />

Import and use `createLogto` to install Logto plugin:

```ts
// main.ts
```ts title="main.ts"
import { createLogto, LogtoConfig } from '@logto/vue';
import { createApp } from 'vue';
import App from './App.vue';

const config: LogtoConfig = {
endpoint: '<your-logto-endpoint>', // E.g. http://localhost:3001
endpoint: '<your-logto-endpoint>',
appId: '<your-application-id>',
};

Expand Down
8 changes: 4 additions & 4 deletions docs/quick-starts/framework/vue/_installation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,17 @@ npm i @logto/vue
```

</TabItem>
<TabItem value="yarn" label="Yarn">
<TabItem value="pnpm" label="pnpm">

```bash
yarn add @logto/vue
pnpm add @logto/vue
```

</TabItem>
<TabItem value="pnpm" label="pnpm">
<TabItem value="yarn" label="yarn">

```bash
pnpm add @logto/vue
yarn add @logto/vue
```

</TabItem>
Expand Down
19 changes: 0 additions & 19 deletions docs/quick-starts/framework/vue/_scopes-and-claims-code.mdx

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
```ts
```ts title="main.ts"
import { createLogto, UserScope } from '@logto/vue';

app.use(createLogto, {
// ...other configs
// highlight-start
scopes: [UserScope.Organizations],
// highlight-end
});
```
Loading

0 comments on commit cf84320

Please sign in to comment.