From f3f23c321815255619b3d70da7a60169265d2faa Mon Sep 17 00:00:00 2001 From: Charles Zhao Date: Fri, 28 Jun 2024 19:06:21 +0800 Subject: [PATCH 1/4] refactor: vanilla js sdk guide --- .../framework/vanilla-js/README.mdx | 18 ++---- .../framework/vanilla-js/_add-sdk.mdx | 10 ++++ .../framework/vanilla-js/_api-resources.mdx | 8 +++ .../vanilla-js/_get-user-information.mdx | 59 +++++++++++++++++-- ...dx => _implement-sign-in-and-sign-out.mdx} | 28 +++++---- .../framework/vanilla-js/_init-client.mdx | 4 +- .../_integrate-sdk-vanilla-js.mdx | 11 +--- 7 files changed, 99 insertions(+), 39 deletions(-) rename docs/quick-starts/framework/vanilla-js/{_implement-sign-in.mdx => _implement-sign-in-and-sign-out.mdx} (58%) diff --git a/docs/quick-starts/framework/vanilla-js/README.mdx b/docs/quick-starts/framework/vanilla-js/README.mdx index 6a4ae836e29..e1ade8f8652 100644 --- a/docs/quick-starts/framework/vanilla-js/README.mdx +++ b/docs/quick-starts/framework/vanilla-js/README.mdx @@ -12,11 +12,11 @@ import ApiResources from './_api-resources.mdx'; import CheckIntegration from './_check-integration.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'; +# Vanilla JS SDK guide + Vanilla JS: Integrate `@logto/browser` @@ -37,17 +37,9 @@ Vanilla JS: Integrate `@logto/browser` -### Implement sign-in - - - -### Implement sign-out - - - -### Handle authentication status +### Implement sign-in and sign-out - + ### Checkpoint: Test your application diff --git a/docs/quick-starts/framework/vanilla-js/_add-sdk.mdx b/docs/quick-starts/framework/vanilla-js/_add-sdk.mdx index 6b6d2dd4f2b..f3b40e3f31b 100644 --- a/docs/quick-starts/framework/vanilla-js/_add-sdk.mdx +++ b/docs/quick-starts/framework/vanilla-js/_add-sdk.mdx @@ -21,6 +21,16 @@ yarn add @logto/browser ```bash pnpm add @logto/browser +``` + + + + +```html +// Special thanks to jsdelivr + ``` diff --git a/docs/quick-starts/framework/vanilla-js/_api-resources.mdx b/docs/quick-starts/framework/vanilla-js/_api-resources.mdx index 2fffd1b7199..655dedc8880 100644 --- a/docs/quick-starts/framework/vanilla-js/_api-resources.mdx +++ b/docs/quick-starts/framework/vanilla-js/_api-resources.mdx @@ -37,3 +37,11 @@ import GetOrganizationAccessTokenCode from './code/_get-organization-access-toke getOrganizationAccessTokenCode={} /> ./code/_scopes-and-claims-code.mdx./code/_config-organization-code.mdx + +### 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. +::: diff --git a/docs/quick-starts/framework/vanilla-js/_get-user-information.mdx b/docs/quick-starts/framework/vanilla-js/_get-user-information.mdx index 62644507504..13bd18f105d 100644 --- a/docs/quick-starts/framework/vanilla-js/_get-user-information.mdx +++ b/docs/quick-starts/framework/vanilla-js/_get-user-information.mdx @@ -1,9 +1,58 @@ -import GetUserInfoApis from '../../fragments/_get-user-info-apis.mdx'; +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 + +```js title="Home.js" +const userInfo = await logtoClient.getIdTokenClaims(); +``` + +To display the user's information, you can use the `logtoClient.getIdTokenClaims()` method. For example, in your Home page: + +### Request additional claims + + + + + +To request additional scopes, you can configure the Logto configs: + +```js title="index.js" +import LogtoClient, { UserScope } from '@logto/browser'; + +const logtoClient = new LogtoClient({ + appId: '', + endpoint: '', + scopes: [ + UserScope.Email, + UserScope.Phone, + UserScope.CustomData, + UserScope.Identities, + UserScope.Organizations, + ], +}); +``` + +Then you can access the additional claims in the return value of `logtoClient.getIdTokenClaims()`: + +```ts +const claims = await getIdTokenClaims(); +// Now you can access additional claims `claims.email`, `claims.phone`, etc. +``` -import ScopesAndClaimsCode from './code/_scopes-and-claims-code.mdx'; +{`const userInfo = await logtoClient.fetchUserInfo(); +// Now you can access the claim \`userInfo.custom_data\``} + } +/> - +### Scopes and claims -} /> -./code/_scopes-and-claims-code.mdx./code/_config-resources-with-shared-scopes-code.mdx./code/_config-resources-with-scopes-code.mdx./code/_config-organization-code.mdx + diff --git a/docs/quick-starts/framework/vanilla-js/_implement-sign-in.mdx b/docs/quick-starts/framework/vanilla-js/_implement-sign-in-and-sign-out.mdx similarity index 58% rename from docs/quick-starts/framework/vanilla-js/_implement-sign-in.mdx rename to docs/quick-starts/framework/vanilla-js/_implement-sign-in-and-sign-out.mdx index 49d865db2f2..11d51d731e1 100644 --- a/docs/quick-starts/framework/vanilla-js/_implement-sign-in.mdx +++ b/docs/quick-starts/framework/vanilla-js/_implement-sign-in-and-sign-out.mdx @@ -2,6 +2,7 @@ import redirectUriFigure from '../../assets/web-redirect-uri.png'; import ConfigureRedirectUri from '../../fragments/_configure-redirect-uri.mdx'; import SignInNote from '../../fragments/_sign-in-note.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'; @@ -11,26 +12,31 @@ import HandleRedirect from './_handle-redirect.mdx'; - - -#### Implement a sign-in button - -`logtoClient` provides a `signIn` method to initiate the sign-in flow. +#### Implement sign-in and sign-out -Go back to your IDE/editor, use the following code to implement the sign-in button: +`logtoClient` provides `signIn` and `signOut` methods to help you easily manage the authentication flow. -```js -const button = document.createElement('button'); -button.innerHTML = 'Sign In'; -button.addEventListener('click', onClickSignIn); + -document.body.appendChild(button); +```js title="pages/Home.js" +const isAuthenticated = await logtoClient.isAuthenticated(); const onClickSignIn = () => { logtoClient.signIn('http://localhost:3000/callback'); }; +const onClickSignOut = () => { + logtoClient.signOut('http://localhost:3000'); +}; + +const button = document.createElement('button'); +button.innerHTML = isAuthenticated ? 'Sign Out' : 'Sign In'; +button.addEventListener('click', isAuthenticated ? onClickSignOut : onClickSignIn); + +document.body.appendChild(button); ``` + + #### Handle redirect diff --git a/docs/quick-starts/framework/vanilla-js/_init-client.mdx b/docs/quick-starts/framework/vanilla-js/_init-client.mdx index 20b3b8e5571..da26acbd2cf 100644 --- a/docs/quick-starts/framework/vanilla-js/_init-client.mdx +++ b/docs/quick-starts/framework/vanilla-js/_init-client.mdx @@ -2,11 +2,11 @@ import AssumingUrl from '../../fragments/_web-assuming-url.md'; Import and init a `LogtoClient` instance by passing config: -```ts +```ts title="index.js" import LogtoClient from '@logto/browser'; const logtoClient = new LogtoClient({ - endpoint: '', // E.g. http://localhost:3001 + endpoint: '', appId: '', }); ``` diff --git a/tutorial/build-with-logto/_integrate-sdk-vanilla-js.mdx b/tutorial/build-with-logto/_integrate-sdk-vanilla-js.mdx index 7a76266a5f9..2371b3b6dae 100644 --- a/tutorial/build-with-logto/_integrate-sdk-vanilla-js.mdx +++ b/tutorial/build-with-logto/_integrate-sdk-vanilla-js.mdx @@ -1,8 +1,7 @@ import AddSdk from '../../docs/quick-starts/framework/vanilla-js/_add-sdk.mdx'; import GuideTip from '../../docs/quick-starts/framework/vanilla-js/_guide-tip.mdx'; import HandleAuthenticationStatus from '../../docs/quick-starts/framework/vanilla-js/_handle-authentication-status.mdx'; -import ImplementSignIn from '../../docs/quick-starts/framework/vanilla-js/_implement-sign-in.mdx'; -import ImplementSignOut from '../../docs/quick-starts/framework/vanilla-js/_implement-sign-out.mdx'; +import ImplementSignInAndSignOut from '../../docs/quick-starts/framework/vanilla-js/_implement-sign-in-and-sign-out.mdx'; import InitClient from '../../docs/quick-starts/framework/vanilla-js/_init-client.mdx'; import TestYourIntegration from './fragments/_test-your-integration.mdx'; @@ -17,13 +16,9 @@ import TestYourIntegration from './fragments/_test-your-integration.mdx'; -### Implement a sign-in +### Implement a sign-in and sign-out - - -### Implement sign-out - - + ### Handle authentication status From 6308ea8cbada68d8fa9f0f7e9135dc89518af0db Mon Sep 17 00:00:00 2001 From: Charles Zhao Date: Sun, 30 Jun 2024 23:24:42 +0800 Subject: [PATCH 2/4] refactor: polish code --- .../framework/vanilla-js/README.mdx | 2 -- .../framework/vanilla-js/_add-sdk.mdx | 8 ++--- .../vanilla-js/_get-user-information.mdx | 30 +++++++++++++++++-- .../framework/vanilla-js/_handle-redirect.mdx | 2 +- .../_implement-sign-in-and-sign-out.mdx | 17 +++++++---- .../framework/vanilla-js/_init-client.mdx | 2 +- .../vanilla-js/code/_config-resources-code.md | 10 +++---- .../_config-resources-with-scopes-code.mdx | 22 +++++--------- ...nfig-resources-with-shared-scopes-code.mdx | 22 +++++--------- 9 files changed, 66 insertions(+), 49 deletions(-) diff --git a/docs/quick-starts/framework/vanilla-js/README.mdx b/docs/quick-starts/framework/vanilla-js/README.mdx index e1ade8f8652..e3feafda0af 100644 --- a/docs/quick-starts/framework/vanilla-js/README.mdx +++ b/docs/quick-starts/framework/vanilla-js/README.mdx @@ -37,8 +37,6 @@ Vanilla JS: Integrate `@logto/browser` -### Implement sign-in and sign-out - ### Checkpoint: Test your application diff --git a/docs/quick-starts/framework/vanilla-js/_add-sdk.mdx b/docs/quick-starts/framework/vanilla-js/_add-sdk.mdx index f3b40e3f31b..0432e969f95 100644 --- a/docs/quick-starts/framework/vanilla-js/_add-sdk.mdx +++ b/docs/quick-starts/framework/vanilla-js/_add-sdk.mdx @@ -10,17 +10,17 @@ npm i @logto/browser ``` - + ```bash -yarn add @logto/browser +pnpm add @logto/browser ``` - + ```bash -pnpm add @logto/browser +yarn add @logto/browser ``` diff --git a/docs/quick-starts/framework/vanilla-js/_get-user-information.mdx b/docs/quick-starts/framework/vanilla-js/_get-user-information.mdx index 13bd18f105d..84ccbe145ec 100644 --- a/docs/quick-starts/framework/vanilla-js/_get-user-information.mdx +++ b/docs/quick-starts/framework/vanilla-js/_get-user-information.mdx @@ -7,11 +7,37 @@ import ScopesAndClaimsIntroduction from '../../fragments/_scopes-claims-introduc ### Display user information +To display the user's information, you can use the `logtoClient.getIdTokenClaims()` method. For example, in your Home page: + ```js title="Home.js" const userInfo = await logtoClient.getIdTokenClaims(); -``` -To display the user's information, you can use the `logtoClient.getIdTokenClaims()` method. For example, in your Home page: +// Generate display table for ID token claims +const table = document.createElement('table'); +const thead = document.createElement('thead'); +const tr = document.createElement('tr'); +const thName = document.createElement('th'); +const thValue = document.createElement('th'); +thName.innerHTML = 'Name'; +thValue.innerHTML = 'Value'; +tr.append(thName, thValue); +thead.append(tr); +table.append(thead); + +const tbody = document.createElement('tbody'); + +for (const [key, value] of Object.entries(userInfo)) { + const tr = document.createElement('tr'); + const tdName = document.createElement('td'); + const tdValue = document.createElement('td'); + tdName.innerHTML = key; + tdValue.innerHTML = typeof value === 'string' ? value : JSON.stringify(value); + tr.append(tdName, tdValue); + tbody.append(tr); +} + +table.append(tbody); +``` ### Request additional claims diff --git a/docs/quick-starts/framework/vanilla-js/_handle-redirect.mdx b/docs/quick-starts/framework/vanilla-js/_handle-redirect.mdx index d487374ffaa..008f9c94826 100644 --- a/docs/quick-starts/framework/vanilla-js/_handle-redirect.mdx +++ b/docs/quick-starts/framework/vanilla-js/_handle-redirect.mdx @@ -1,6 +1,6 @@ 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. Call the callback handler in your SPA's `/callback` route to complete the sign-in flow. -```js +```js title="pages/Callback.js" const callbackHandler = async (logtoClient) => { await logtoClient.handleSignInCallback(window.location.href); diff --git a/docs/quick-starts/framework/vanilla-js/_implement-sign-in-and-sign-out.mdx b/docs/quick-starts/framework/vanilla-js/_implement-sign-in-and-sign-out.mdx index 11d51d731e1..ac5a1fc72a8 100644 --- a/docs/quick-starts/framework/vanilla-js/_implement-sign-in-and-sign-out.mdx +++ b/docs/quick-starts/framework/vanilla-js/_implement-sign-in-and-sign-out.mdx @@ -1,18 +1,27 @@ import redirectUriFigure from '../../assets/web-redirect-uri.png'; import ConfigureRedirectUri from '../../fragments/_configure-redirect-uri.mdx'; import SignInNote from '../../fragments/_sign-in-note.mdx'; +import AssumingUrl from '../../fragments/_web-assuming-url.md'; 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 + -#### Configure sign-in redirect URI + + +### Configure redirect URI -#### Implement sign-in and sign-out +### Handle redirect + + + +### Implement sign-in and sign-out `logtoClient` provides `signIn` and `signOut` methods to help you easily manage the authentication flow. @@ -36,7 +45,3 @@ document.body.appendChild(button); ``` - -#### Handle redirect - - diff --git a/docs/quick-starts/framework/vanilla-js/_init-client.mdx b/docs/quick-starts/framework/vanilla-js/_init-client.mdx index da26acbd2cf..466f13269e4 100644 --- a/docs/quick-starts/framework/vanilla-js/_init-client.mdx +++ b/docs/quick-starts/framework/vanilla-js/_init-client.mdx @@ -6,7 +6,7 @@ Import and init a `LogtoClient` instance by passing config: import LogtoClient from '@logto/browser'; const logtoClient = new LogtoClient({ - endpoint: '', + endpoint: '', // E.g. http://localhost:3001 appId: '', }); ``` diff --git a/docs/quick-starts/framework/vanilla-js/code/_config-resources-code.md b/docs/quick-starts/framework/vanilla-js/code/_config-resources-code.md index b845ac633f7..b3d50eabbd1 100644 --- a/docs/quick-starts/framework/vanilla-js/code/_config-resources-code.md +++ b/docs/quick-starts/framework/vanilla-js/code/_config-resources-code.md @@ -1,9 +1,9 @@ -```js -const resources = ['http://localhost:3001/api/test']; // Replace with your own resource indicators registered in Logto dashboard +```js title="index.js" +import LogtoClient from '@logto/browser'; const logtoClient = new LogtoClient({ - endpoint, - appId, - resources: resourceIndicators, + // ...other configs + // highlight-next-line + resources: ['https://shopping.your-app.com/api', 'https://store.your-app.com/api'], // Add API resources }); ``` diff --git a/docs/quick-starts/framework/vanilla-js/code/_config-resources-with-scopes-code.mdx b/docs/quick-starts/framework/vanilla-js/code/_config-resources-with-scopes-code.mdx index 3c29bbb383c..8afb41ac2d5 100644 --- a/docs/quick-starts/framework/vanilla-js/code/_config-resources-with-scopes-code.mdx +++ b/docs/quick-starts/framework/vanilla-js/code/_config-resources-with-scopes-code.mdx @@ -1,19 +1,13 @@ +{/* eslint-disable prettier/prettier */} import CodeBlock from '@theme/CodeBlock'; -{`import LogtoClient, { UserScope } from '${props.package || '@logto/browser'}'; - -const resources = ['http://localhost:3001/api/test']; // Replace with your own resource indicators registered in Logto dashboard -const resourceScopes = ['read', 'write']; // Replace with your own resource scopes defined in Logto dashboard under the resources listed above +{`import LogtoClient from '${props.package || '@logto/browser'}'; const logtoClient = new LogtoClient({ -endpoint, -appId, -resources: resourceIndicators, -scopes: [ -UserScope.Email, -UserScope.Phone, -UserScope.CustomData, -UserScope.Identities, -...resourceScopes, -], + // ...other configs + // highlight-start + scopes: ['shopping:read', 'shopping:write', 'store:read', 'store:write'], + resources: ['https://shopping.your-app.com/api', 'https://store.your-app.com/api'], // Add API resources + // highlight-end });`} +{/* eslint-enable prettier/prettier */} diff --git a/docs/quick-starts/framework/vanilla-js/code/_config-resources-with-shared-scopes-code.mdx b/docs/quick-starts/framework/vanilla-js/code/_config-resources-with-shared-scopes-code.mdx index fa9b45c21cd..98bc828aada 100644 --- a/docs/quick-starts/framework/vanilla-js/code/_config-resources-with-shared-scopes-code.mdx +++ b/docs/quick-starts/framework/vanilla-js/code/_config-resources-with-shared-scopes-code.mdx @@ -1,19 +1,13 @@ +{/* eslint-disable prettier/prettier */} import CodeBlock from '@theme/CodeBlock'; -{`import LogtoClient, { UserScope } from '${props.package || '@logto/browser'}'; - -const resources = ['http://localhost:3001/api/test', 'http://localhost:5001/api/test']; // Replace with your own resource indicators registered in Logto dashboard -const resourceScopes = ['read', 'write']; // Shared scopes for all the resources. (Declare these scopes in Logto dashboard under all the resources listed above) +{`import LogtoClient, { UserScope } from '${props.package || '@logto/browser'}'; const logtoClient = new LogtoClient({ -endpoint, -appId, -resources: resourceIndicators, -scopes: [ -UserScope.Email, -UserScope.Phone, -UserScope.CustomData, -UserScope.Identities, -...resourceScopes, -], + // ...other configs + // highlight-start + scopes: ['read', 'write'], + resources: ['https://shopping.your-app.com/api', 'https://store.your-app.com/api'], + // highlight-end });`} +{/* eslint-enable prettier/prettier */} From 5c273c7c05c93966cfee05e246e4c57f4143ae6e Mon Sep 17 00:00:00 2001 From: Charles Zhao Date: Sun, 30 Jun 2024 23:32:11 +0800 Subject: [PATCH 3/4] fix: fixup --- .../vanilla-js/code/_config-organization-code.mdx | 10 +++++----- .../code/_get-organization-access-token-code.md | 6 +++--- .../vanilla-js/code/_scopes-and-claims-code.mdx | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/quick-starts/framework/vanilla-js/code/_config-organization-code.mdx b/docs/quick-starts/framework/vanilla-js/code/_config-organization-code.mdx index 72545fb8c93..4cd303e1859 100644 --- a/docs/quick-starts/framework/vanilla-js/code/_config-organization-code.mdx +++ b/docs/quick-starts/framework/vanilla-js/code/_config-organization-code.mdx @@ -1,10 +1,10 @@ +{/* eslint-disable prettier/prettier */} import CodeBlock from '@theme/CodeBlock'; -{`import LogtoClient, { UserScope } from '${props.package || '@logto/browser'}'; +{`import LogtoClient, { UserScope } from '${props.package || '@logto/browser'}'; const logtoClient = new LogtoClient({ -endpoint, -appId, -resources: resourceIndicators, -scopes: [UserScope.Organizations], + // ...other configs + scopes: [UserScope.Organizations], });`} +{/* eslint-enable prettier/prettier */} diff --git a/docs/quick-starts/framework/vanilla-js/code/_get-organization-access-token-code.md b/docs/quick-starts/framework/vanilla-js/code/_get-organization-access-token-code.md index 191ef0be2ef..8f651cf0dcf 100644 --- a/docs/quick-starts/framework/vanilla-js/code/_get-organization-access-token-code.md +++ b/docs/quick-starts/framework/vanilla-js/code/_get-organization-access-token-code.md @@ -1,8 +1,8 @@ -```js +```js title="index.js" // Get organizationIds from the userInfo -const userInfo = await logtoClient.fetchUserInfo(); -const organizationIds = userInfo.organizations; +const claims = await logtoClient.getIdTokenClaims(); +const organizationIds = claims.organizations; /** * Or from the ID token claims diff --git a/docs/quick-starts/framework/vanilla-js/code/_scopes-and-claims-code.mdx b/docs/quick-starts/framework/vanilla-js/code/_scopes-and-claims-code.mdx index 0f63f65af1e..1bf3381d207 100644 --- a/docs/quick-starts/framework/vanilla-js/code/_scopes-and-claims-code.mdx +++ b/docs/quick-starts/framework/vanilla-js/code/_scopes-and-claims-code.mdx @@ -1,6 +1,6 @@ import CodeBlock from '@theme/CodeBlock'; -{`import LogtoClient, { UserScope } from '${props.package || '@logto/browser'}'; +{`import LogtoClient, { UserScope } from '${props.package || '@logto/browser'}'; const logtoClient = new LogtoClient({ appId: '', From 127eb4af6baf8bd52be02918fe0cfab25330b833 Mon Sep 17 00:00:00 2001 From: Gao Sun Date: Mon, 1 Jul 2024 13:16:38 +0800 Subject: [PATCH 4/4] docs: improve content --- docs/quick-starts/framework/vanilla-js/README.mdx | 1 - docs/quick-starts/framework/vanilla-js/_add-sdk.mdx | 4 +++- .../framework/vanilla-js/_get-user-information.mdx | 10 +++------- .../framework/vanilla-js/_handle-redirect.mdx | 4 ++-- .../vanilla-js/_implement-sign-in-and-sign-out.mdx | 7 ++----- .../quick-starts/framework/vanilla-js/_init-client.mdx | 6 ++---- .../vanilla-js/code/_get-access-token-code.md | 4 +--- 7 files changed, 13 insertions(+), 23 deletions(-) diff --git a/docs/quick-starts/framework/vanilla-js/README.mdx b/docs/quick-starts/framework/vanilla-js/README.mdx index e3feafda0af..aba7db10b7a 100644 --- a/docs/quick-starts/framework/vanilla-js/README.mdx +++ b/docs/quick-starts/framework/vanilla-js/README.mdx @@ -54,4 +54,3 @@ Vanilla JS: Integrate `@logto/browser` ## Further readings -./code/_scopes-and-claims-code.mdx./code/_config-resources-with-shared-scopes-code.mdx./code/_config-resources-with-scopes-code.mdx./code/_config-organization-code.mdx diff --git a/docs/quick-starts/framework/vanilla-js/_add-sdk.mdx b/docs/quick-starts/framework/vanilla-js/_add-sdk.mdx index 0432e969f95..c329d85e91a 100644 --- a/docs/quick-starts/framework/vanilla-js/_add-sdk.mdx +++ b/docs/quick-starts/framework/vanilla-js/_add-sdk.mdx @@ -1,6 +1,8 @@ import TabItem from '@theme/TabItem'; import Tabs from '@theme/Tabs'; +Choose your favorite package manager or use the CDN to install the Logto Browser SDK. + @@ -27,7 +29,7 @@ yarn add @logto/browser ```html -// Special thanks to jsdelivr + diff --git a/docs/quick-starts/framework/vanilla-js/_get-user-information.mdx b/docs/quick-starts/framework/vanilla-js/_get-user-information.mdx index 84ccbe145ec..539081a188d 100644 --- a/docs/quick-starts/framework/vanilla-js/_get-user-information.mdx +++ b/docs/quick-starts/framework/vanilla-js/_get-user-information.mdx @@ -48,18 +48,14 @@ table.append(tbody); To request additional scopes, you can configure the Logto configs: ```js title="index.js" +// highlight-next-line import LogtoClient, { UserScope } from '@logto/browser'; const logtoClient = new LogtoClient({ appId: '', endpoint: '', - scopes: [ - UserScope.Email, - UserScope.Phone, - UserScope.CustomData, - UserScope.Identities, - UserScope.Organizations, - ], + // highlight-next-line + scopes: [UserScope.Email, UserScope.Phone], }); ``` diff --git a/docs/quick-starts/framework/vanilla-js/_handle-redirect.mdx b/docs/quick-starts/framework/vanilla-js/_handle-redirect.mdx index 008f9c94826..9485dd6a9f0 100644 --- a/docs/quick-starts/framework/vanilla-js/_handle-redirect.mdx +++ b/docs/quick-starts/framework/vanilla-js/_handle-redirect.mdx @@ -1,4 +1,4 @@ -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. Call the callback handler in your SPA's `/callback` route to complete the sign-in flow. +There are still things to do after the user is redirected back to your application from Logto. Let's handle it properly. ```js title="pages/Callback.js" const callbackHandler = async (logtoClient) => { @@ -11,6 +11,6 @@ const callbackHandler = async (logtoClient) => { } // Handle successful sign-in - window.location.assign('http://localhost:3000/'); + window.location.assign('/'); }; ``` diff --git a/docs/quick-starts/framework/vanilla-js/_implement-sign-in-and-sign-out.mdx b/docs/quick-starts/framework/vanilla-js/_implement-sign-in-and-sign-out.mdx index ac5a1fc72a8..5a2dad70e68 100644 --- a/docs/quick-starts/framework/vanilla-js/_implement-sign-in-and-sign-out.mdx +++ b/docs/quick-starts/framework/vanilla-js/_implement-sign-in-and-sign-out.mdx @@ -1,7 +1,6 @@ -import redirectUriFigure from '../../assets/web-redirect-uri.png'; -import ConfigureRedirectUri from '../../fragments/_configure-redirect-uri.mdx'; 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'; @@ -13,9 +12,7 @@ import HandleRedirect from './_handle-redirect.mdx'; -### Configure redirect URI - - + ### Handle redirect diff --git a/docs/quick-starts/framework/vanilla-js/_init-client.mdx b/docs/quick-starts/framework/vanilla-js/_init-client.mdx index 466f13269e4..a8b871095f2 100644 --- a/docs/quick-starts/framework/vanilla-js/_init-client.mdx +++ b/docs/quick-starts/framework/vanilla-js/_init-client.mdx @@ -1,14 +1,12 @@ -import AssumingUrl from '../../fragments/_web-assuming-url.md'; - Import and init a `LogtoClient` instance by passing config: ```ts title="index.js" import LogtoClient from '@logto/browser'; const logtoClient = new LogtoClient({ - endpoint: '', // E.g. http://localhost:3001 + endpoint: '', appId: '', }); ``` - +The `endpoint` and `appId` can be found in the application details page in Logto Console. diff --git a/docs/quick-starts/framework/vanilla-js/code/_get-access-token-code.md b/docs/quick-starts/framework/vanilla-js/code/_get-access-token-code.md index 59aaae0b93d..0d9d157723b 100644 --- a/docs/quick-starts/framework/vanilla-js/code/_get-access-token-code.md +++ b/docs/quick-starts/framework/vanilla-js/code/_get-access-token-code.md @@ -1,6 +1,4 @@ ```js -// e.g. Get the access token for the API resource http://localhost:3000/api/test - -const accessToken = await logtoClient.getAccessToken('http://localhost:3000/api/test'); +const accessToken = await logtoClient.getAccessToken('https://store.your-app.com/api'); console.log('Access token', accessToken); ```