Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

docs(console): update the capacitor integration guide (#6128)

Browse source 
* docs(console): update the capacitor integration guide

update the capacitor integration guide

* fix(console): reorg capacitor guide

reorg capacitor guide

* chore(console): update the section title

update the section title

* refactor(console): improve content

---------

Co-authored-by: Gao Sun <gao@silverhand.io>
This commit is contained in:
simeng-li 2024-07-01 17:49:31 +08:00 committed by GitHub
parent fa325c9de1
commit 88dd7d2f87
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 16 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
packages/console/src/assets/docs/guides/native-capacitor/README.mdx
View file

@ -5,10 +5,14 @@ import Step from '@/mdx-components/Step';
import capaticorIos from './assets/capacitor-ios.webp';
import logtoSignInPage from './assets/logto-sign-in-page.webp';
import logtoSignOutPage from './assets/logto-sign-out-page.webp';
import RedirectUrisNative from '../../fragments/_redirect-uris-native.mdx';
export const defaultRedirectUri = 'com.example.app://callback';
export const defaultPostSignOutUri = 'com.example.app://callback/sign-out';
<Steps>
<Step title="Add Logto Capacitor SDK">
<Step title="Install Capacitor SDK">
To get started, you need to create a Capacitor project. You can follow the [official guide](https://capacitorjs.com/docs/getting-started) to create one.
@ -38,28 +42,26 @@ const logtoClient = new LogtoClient({
</Step>
<Step title="Implement the sign-in button">
<Step title="Configure redirect URIs" >
Now, let's configure the redirect URI. The redirect URI is used to redirect the user back to your application after the authentication flow.
<RedirectUrisNative defaultUri={defaultRedirectUri} />
Ensure that the URI redirects to the Capacitor app, for example, `com.example.app://callback`. The value may vary depending on your Capacitor app configuration. For more details, see [Capacitor Deep Links](https://capacitorjs.com/docs/guides/deep-links).
Ensure that the URI redirects to the Capacitor app. The value may vary depending on your Capacitor app configuration. For more details, see [Capacitor Deep Links](https://capacitorjs.com/docs/guides/deep-links).
<UriInputField name="redirectUris" />
Remember to click on **Save changes** after updating the redirect URI.
Remember to click on **Save changes** after updating the redirect URI. Then, add the following code to the `onClick` handler of the sign-in button:
</Step>
<Step title="Implement sign-in">
<Code className="language-ts">
{`const onClick = async () => {
await logtoClient.signIn('${props.redirectUris[0] || 'com.example.app://callback'}');
await logtoClient.signIn('${props.redirectUris[0] || defaultRedirectUri}');
console.log(await logtoClient.isAuthenticated()); // true
console.log(await logtoClient.getIdTokenClaims()); // { sub: '...', ... }
};`}
</Code>
</Step>
<Step title="Checkpoint: Trigger the authentication flow">
Run the Capacitor app and click the sign-in button. A browser window will open, redirecting to the Logto sign-in page.
<center>
@ -76,7 +78,7 @@ Run the Capacitor app and click the sign-in button. A browser window will open,
</Step>
<Step title="Sign-out">
<Step title="Implement sign-out">
Since Capacitor leverages the Safari View Controller on iOS and Chrome Custom Tabs on Android, the authentication state can be persisted for a while. However, sometimes the user may want to sign out of the application immediately. In this case, we can use the `signOut` method to sign out the user:
@ -106,7 +108,7 @@ Ensure that the post sign-out redirect URI redirects to the Capacitor app. Then
<Code className="language-ts">
{`const onClick = async () => {
await logtoClient.signOut('${props.postLogoutRedirectUris[0] || 'com.example.app://callback/sign-out'}');
await logtoClient.signOut('${props.postLogoutRedirectUris[0] || defaultPostSignOutUri}');
};`}
</Code>
@ -114,7 +116,7 @@ Ensure that the post sign-out redirect URI redirects to the Capacitor app. Then
<Step title="Checkpoint: Complete the authentication flow">
Run the Capacitor app again and click the sign-in button. If everything goes well, when the authentication flow is completed, the Capacitor app will receive the sign-in result and print the user claims in the console.
Run the Capacitor app click the sign-in button. If everything goes well, when the authentication flow is completed, the Capacitor app will receive the sign-in result and print the user claims in the console.
<center>
<img src={capaticorIos} alt="Capacitor iOS app" width="800" />