Skip to content

Commit dc13cc7

Browse files
xiaoyijunxiaoyijun
authored
feat(console): add wordpress plugin guide (#7180)
1 parent ec646a0 commit dc13cc7

File tree

6 files changed

+169
-0
lines changed

6 files changed

+169
-0
lines changed

‎.changeset/old-lions-return.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@logto/console": minor
3+
---
4+
5+
feat(console): add Logto WordPress plugin guide

‎packages/console/src/assets/docs/guides/index.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ import webPython from './web-python/index';
4141
import webRuby from './web-ruby/index';
4242
import webSveltekit from './web-sveltekit/index';
4343
import webWordpress from './web-wordpress/index';
44+
import webWordpressPlugin from './web-wordpress-plugin';
4445

4546
export const guides: Readonly<Guide[]> = Object.freeze([
4647
{
@@ -219,6 +220,14 @@ export const guides: Readonly<Guide[]> = Object.freeze([
219220
Component: safeLazy(async () => import('./web-wordpress/README.mdx')),
220221
metadata: webWordpress,
221222
},
223+
{
224+
order: 2.3,
225+
id: 'web-wordpress-plugin',
226+
Logo: safeLazy(async () => import('./web-wordpress-plugin/logo.svg?react')),
227+
DarkLogo: undefined,
228+
Component: safeLazy(async () => import('./web-wordpress-plugin/README.mdx')),
229+
metadata: webWordpressPlugin,
230+
},
222231
{
223232
order: 3,
224233
id: 'web-python',

‎packages/console/src/assets/docs/guides/web-wordpress-plugin/README.mdx

+133
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
import UriInputField from '@/mdx-components/UriInputField';
2+
import Tabs from '@/mdx-components/Tabs';
3+
import TabItem from '@/mdx-components/TabItem';
4+
import InlineNotification from '@/ds-components/InlineNotification';
5+
import Steps from '@/mdx-components/Steps';
6+
import Step from '@/mdx-components/Step';
7+
8+
<Steps>
9+
10+
<Step title="Get started">
11+
12+
This tutorial will show you how to integrate Logto into your [Wordpress](https://wordpress.org) website.
13+
14+
Follow the official [Wordpress installation guide](https://wordpress.org/support/article/how-to-install-wordpress/) to set up your Wordpress website before proceeding.
15+
16+
</Step>
17+
18+
<Step title="Install the plugin">
19+
20+
<Tabs>
21+
22+
<TabItem value="admin-panel" label="From WordPress admin panel">
23+
24+
1. Go to **Plugins** > **Add New**.
25+
2. Search for "Logto", or enter `https://wordpress.org/plugins/logto/` in the search box.
26+
3. Click **Install Now**.
27+
4. Click **Activate**.
28+
29+
</TabItem>
30+
31+
<TabItem value="upload" label="From upload">
32+
33+
1. Download the Logto WordPress plugin from one of the following links:
34+
- [Latest release](https://github.com/logto-io/wordpress/releases): Download the file which name in the format of `logto-plugin-<version>.zip`.
35+
- [WordPress plugin directory](https://wordpress.org/plugins/logto/): Download the file by clicking the **Download** button.
36+
2. Download the plugin ZIP file.
37+
3. Go to **Plugins** > **Add New** in your WordPress admin panel.
38+
4. Click **Upload Plugin**.
39+
5. Select the downloaded ZIP file and click **Install Now**.
40+
6. Click **Activate**.
41+
42+
</TabItem>
43+
44+
</Tabs>
45+
46+
</Step>
47+
48+
<Step title="Configure the plugin">
49+
50+
Now you should be able to see the Logto menu in your WordPress admin panel sidebar. Click **Logto** > **Settings** to configure the plugin.
51+
52+
The minimum configuration to get started for the plugin is:
53+
54+
- Logto endpoint: <code>{props.endpoint}</code>
55+
- App ID: <code>{props.app.id}</code>
56+
- App secret: <code>{props.secrets[0]?.value ?? props.app.secret}</code>
57+
58+
After filling in the values, click **Save Changes** (scroll down to the bottom of the page if you can't find the button).
59+
60+
</Step>
61+
62+
<Step title="Configure redirect URI">
63+
64+
The redirect URI is the URL to which Logto will redirect users after they have authenticated; and the post sign-out redirect URI is the URL to which Logto will redirect users after they have logged out.
65+
66+
Here's a non-normative sequence diagram to illustrate the sign-in flow:
67+
68+
```mermaid
69+
sequenceDiagram
70+
participant User
71+
participant WordPress
72+
participant Logto
73+
74+
User->>WordPress: Visit WordPress login page
75+
WordPress->>Logto: Redirect to Logto for authentication
76+
Logto->>User: Prompt for authentication
77+
User->>Logto: Authenticate
78+
Logto->>WordPress: Redirect back to WordPress with authentication data
79+
WordPress->>User: Logged in
80+
```
81+
82+
Here's how the sign-out flow looks like in a non-normative sequence diagram:
83+
84+
```mermaid
85+
sequenceDiagram
86+
participant User
87+
participant WordPress
88+
participant Logto
89+
90+
User->>WordPress: Click "Log out"
91+
WordPress->>Logto: Redirect to Logto for sign-out
92+
Logto->>Logto: Sign-out successful
93+
Logto->>WordPress: Redirect back to WordPress
94+
WordPress->>User: Logged out
95+
```
96+
97+
To learn more about why redirect is needed, see [Sign-in experience explained](/concepts/sign-in-experience).
98+
99+
In our case, we need to configure both redirect URIs in your Logto Console.
100+
101+
To find the redirect URI, go to the **Logto** > **Settings** page in your WordPress admin panel. You'll see the **Redirect URI** and **Post sign-out redirect URI** fields.
102+
103+
Now, copy the **Redirect URI** and fill it into the **Redirect URIs** field:
104+
105+
<UriInputField name="redirectUris" />
106+
107+
Copy the **Post sign-out redirect URI** and fill it into the **Post sign-out redirect URIs** field:
108+
109+
<div>
110+
<UriInputField name="postLogoutRedirectUris" />
111+
</div>
112+
113+
114+
Remember to click **Save**.
115+
116+
</Step>
117+
118+
<Step title="Checkpoint: Test your WordPress website">
119+
120+
Now you can test your Logto integration in your WordPress website:
121+
122+
1. Open an incognito browser window if needed.
123+
2. Visit your WordPress website and click the **Log in** link if applicable; or directly visit the login page (e.g., `https://example.com/wp-login.php`).
124+
3. The page should redirect you to the Logto sign-in page.
125+
4. Complete the sign-in or sign-up process.
126+
5. After successful authentication, you should be redirected back to your WordPress website and logged in automatically.
127+
6. Click the **Log out** link to log out of your WordPress website.
128+
7. You should be redirected to the Logto sign-out page, then back to your WordPress website.
129+
8. You should be logged out of your WordPress website.
130+
131+
</Step>
132+
133+
</Steps>

‎packages/console/src/assets/docs/guides/web-wordpress-plugin/config.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"order": 2.3
3+
}

‎packages/console/src/assets/docs/guides/web-wordpress-plugin/index.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { ApplicationType } from '@logto/schemas';
2+
3+
import { type GuideMetadata } from '../types';
4+
5+
const metadata: Readonly<GuideMetadata> = Object.freeze({
6+
name: 'WordPress plugin',
7+
description: 'Use official WordPress plugin to integrate Logto into your WordPress website.',
8+
target: ApplicationType.Traditional,
9+
fullGuide: 'wordpress-plugin',
10+
});
11+
12+
export default metadata;

‎packages/console/src/assets/docs/guides/web-wordpress-plugin/logo.svg

+7
Loading

0 commit comments

Comments
 (0)