-
-
Notifications
You must be signed in to change notification settings - Fork 30
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
f52acc4
commit cf84320
Showing
18 changed files
with
187 additions
and
174 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,3 @@ | ||
<p> | ||
Let's switch to the Application details page of Logto Console. Add a Redirect URI{' '} | ||
<code>{props.redirectUri}</code> and click "Save changes". | ||
</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" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
29
docs/quick-starts/framework/vue/_handle-authentication-status.mdx
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
43 changes: 43 additions & 0 deletions
43
docs/quick-starts/framework/vue/_implement-sign-in-and-sign-out.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 /> |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
19 changes: 0 additions & 19 deletions
19
docs/quick-starts/framework/vue/_scopes-and-claims-code.mdx
This file was deleted.
Oops, something went wrong.
4 changes: 3 additions & 1 deletion
4
docs/quick-starts/framework/vue/api-resources/code/_config-organization-code.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
}); | ||
``` |
Oops, something went wrong.