mirror of
https://github.com/logto-io/logto.git
synced 2025-04-14 23:11:31 -05:00
feat(console): add wordpress plugin guide (#7180)
This commit is contained in:
Xiao Yijun
GitHub
parent
ec646a0dba
commit
dc13cc73dd
6 changed files with 169 additions and 0 deletions
5
.changeset/old-lions-return.md
Normal file
5
.changeset/old-lions-return.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
"@logto/console": minor
|
||||
---
|
||||
|
||||
feat(console): add Logto WordPress plugin guide
|
||||
|
|
@ -41,6 +41,7 @@ import webPython from './web-python/index';
|
|||
import webRuby from './web-ruby/index';
|
||||
import webSveltekit from './web-sveltekit/index';
|
||||
import webWordpress from './web-wordpress/index';
|
||||
import webWordpressPlugin from './web-wordpress-plugin';
|
||||
|
||||
export const guides: Readonly<Guide[]> = Object.freeze([
|
||||
{
|
||||
|
|
@ -219,6 +220,14 @@ export const guides: Readonly<Guide[]> = Object.freeze([
|
|||
Component: safeLazy(async () => import('./web-wordpress/README.mdx')),
|
||||
metadata: webWordpress,
|
||||
},
|
||||
{
|
||||
order: 2.3,
|
||||
id: 'web-wordpress-plugin',
|
||||
Logo: safeLazy(async () => import('./web-wordpress-plugin/logo.svg?react')),
|
||||
DarkLogo: undefined,
|
||||
Component: safeLazy(async () => import('./web-wordpress-plugin/README.mdx')),
|
||||
metadata: webWordpressPlugin,
|
||||
},
|
||||
{
|
||||
order: 3,
|
||||
id: 'web-python',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,133 @@
|
|||
import UriInputField from '@/mdx-components/UriInputField';
|
||||
import Tabs from '@/mdx-components/Tabs';
|
||||
import TabItem from '@/mdx-components/TabItem';
|
||||
import InlineNotification from '@/ds-components/InlineNotification';
|
||||
import Steps from '@/mdx-components/Steps';
|
||||
import Step from '@/mdx-components/Step';
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step title="Get started">
|
||||
|
||||
This tutorial will show you how to integrate Logto into your [Wordpress](https://wordpress.org) website.
|
||||
|
||||
Follow the official [Wordpress installation guide](https://wordpress.org/support/article/how-to-install-wordpress/) to set up your Wordpress website before proceeding.
|
||||
|
||||
</Step>
|
||||
|
||||
<Step title="Install the plugin">
|
||||
|
||||
<Tabs>
|
||||
|
||||
<TabItem value="admin-panel" label="From WordPress admin panel">
|
||||
|
||||
1. Go to **Plugins** > **Add New**.
|
||||
2. Search for "Logto", or enter `https://wordpress.org/plugins/logto/` in the search box.
|
||||
3. Click **Install Now**.
|
||||
4. Click **Activate**.
|
||||
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="upload" label="From upload">
|
||||
|
||||
1. Download the Logto WordPress plugin from one of the following links:
|
||||
- [Latest release](https://github.com/logto-io/wordpress/releases): Download the file which name in the format of `logto-plugin-<version>.zip`.
|
||||
- [WordPress plugin directory](https://wordpress.org/plugins/logto/): Download the file by clicking the **Download** button.
|
||||
2. Download the plugin ZIP file.
|
||||
3. Go to **Plugins** > **Add New** in your WordPress admin panel.
|
||||
4. Click **Upload Plugin**.
|
||||
5. Select the downloaded ZIP file and click **Install Now**.
|
||||
6. Click **Activate**.
|
||||
|
||||
</TabItem>
|
||||
|
||||
</Tabs>
|
||||
|
||||
</Step>
|
||||
|
||||
<Step title="Configure the plugin">
|
||||
|
||||
Now you should be able to see the Logto menu in your WordPress admin panel sidebar. Click **Logto** > **Settings** to configure the plugin.
|
||||
|
||||
The minimum configuration to get started for the plugin is:
|
||||
|
||||
- Logto endpoint: <code>{props.endpoint}</code>
|
||||
- App ID: <code>{props.app.id}</code>
|
||||
- App secret: <code>{props.secrets[0]?.value ?? props.app.secret}</code>
|
||||
|
||||
After filling in the values, click **Save Changes** (scroll down to the bottom of the page if you can't find the button).
|
||||
|
||||
</Step>
|
||||
|
||||
<Step title="Configure redirect URI">
|
||||
|
||||
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.
|
||||
|
||||
Here's a non-normative sequence diagram to illustrate the sign-in flow:
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant User
|
||||
participant WordPress
|
||||
participant Logto
|
||||
|
||||
User->>WordPress: Visit WordPress login page
|
||||
WordPress->>Logto: Redirect to Logto for authentication
|
||||
Logto->>User: Prompt for authentication
|
||||
User->>Logto: Authenticate
|
||||
Logto->>WordPress: Redirect back to WordPress with authentication data
|
||||
WordPress->>User: Logged in
|
||||
```
|
||||
|
||||
Here's how the sign-out flow looks like in a non-normative sequence diagram:
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant User
|
||||
participant WordPress
|
||||
participant Logto
|
||||
|
||||
User->>WordPress: Click "Log out"
|
||||
WordPress->>Logto: Redirect to Logto for sign-out
|
||||
Logto->>Logto: Sign-out successful
|
||||
Logto->>WordPress: Redirect back to WordPress
|
||||
WordPress->>User: Logged out
|
||||
```
|
||||
|
||||
To learn more about why redirect is needed, see [Sign-in experience explained](/concepts/sign-in-experience).
|
||||
|
||||
In our case, we need to configure both redirect URIs in your Logto Console.
|
||||
|
||||
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.
|
||||
|
||||
Now, copy the **Redirect URI** and fill it into the **Redirect URIs** field:
|
||||
|
||||
<UriInputField name="redirectUris" />
|
||||
|
||||
Copy the **Post sign-out redirect URI** and fill it into the **Post sign-out redirect URIs** field:
|
||||
|
||||
<div>
|
||||
<UriInputField name="postLogoutRedirectUris" />
|
||||
</div>
|
||||
|
||||
|
||||
Remember to click **Save**.
|
||||
|
||||
</Step>
|
||||
|
||||
<Step title="Checkpoint: Test your WordPress website">
|
||||
|
||||
Now you can test your Logto integration in your WordPress website:
|
||||
|
||||
1. Open an incognito browser window if needed.
|
||||
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`).
|
||||
3. The page should redirect you to the Logto sign-in page.
|
||||
4. Complete the sign-in or sign-up process.
|
||||
5. After successful authentication, you should be redirected back to your WordPress website and logged in automatically.
|
||||
6. Click the **Log out** link to log out of your WordPress website.
|
||||
7. You should be redirected to the Logto sign-out page, then back to your WordPress website.
|
||||
8. You should be logged out of your WordPress website.
|
||||
|
||||
</Step>
|
||||
|
||||
</Steps>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"order": 2.3
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { ApplicationType } from '@logto/schemas';
|
||||
|
||||
import { type GuideMetadata } from '../types';
|
||||
|
||||
const metadata: Readonly<GuideMetadata> = Object.freeze({
|
||||
name: 'WordPress plugin',
|
||||
description: 'Use official WordPress plugin to integrate Logto into your WordPress website.',
|
||||
target: ApplicationType.Traditional,
|
||||
fullGuide: 'wordpress-plugin',
|
||||
});
|
||||
|
||||
export default metadata;
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.84229 20.0001C2.84229 26.7913 6.78897 32.6603 12.512 35.4415L4.32772 13.0176C3.37574 15.1514 2.84229 17.5127 2.84229 20.0001Z" fill="#21759B"/>
|
||||
<path d="M31.5818 19.1346C31.5818 17.0142 30.8202 15.5457 30.1669 14.4027C29.2972 12.9894 28.482 11.7926 28.482 10.3793C28.482 8.80214 29.6782 7.33401 31.3631 7.33401C31.4391 7.33401 31.5113 7.34348 31.5854 7.34772C28.5329 4.55118 24.4661 2.84375 19.9993 2.84375C14.0054 2.84375 8.73189 5.91909 5.66406 10.5772C6.0666 10.5892 6.44596 10.5977 6.76818 10.5977C8.56278 10.5977 11.3407 10.38 11.3407 10.38C12.2656 10.3254 12.3746 11.6839 11.4507 11.7933C11.4507 11.7933 10.5213 11.9026 9.48702 11.9568L15.735 30.5411L19.4897 19.2802L16.8166 11.9562C15.8927 11.902 15.0174 11.7926 15.0174 11.7926C14.0928 11.7384 14.2012 10.3248 15.1258 10.3793C15.1258 10.3793 17.9592 10.5971 19.6451 10.5971C21.4394 10.5971 24.2176 10.3793 24.2176 10.3793C25.1432 10.3248 25.2519 11.6832 24.3277 11.7926C24.3277 11.7926 23.3962 11.902 22.3639 11.9562L28.5643 30.3997L30.2756 24.681C31.0173 22.3078 31.5818 20.6034 31.5818 19.1346Z" fill="#21759B"/>
|
||||
<path d="M20.3006 21.501L15.1528 36.4595C16.6898 36.9113 18.3153 37.1584 19.9996 37.1584C21.9976 37.1584 23.9136 36.813 25.6971 36.1859C25.6511 36.1124 25.6093 36.0344 25.575 35.9495L20.3006 21.501Z" fill="#21759B"/>
|
||||
<path d="M35.0543 11.7676C35.1281 12.3141 35.1699 12.9008 35.1699 13.5318C35.1699 15.2729 34.8447 17.2301 33.8653 19.6773L28.6245 34.8297C33.7253 31.8552 37.1561 26.3291 37.1561 19.9995C37.1565 17.0166 36.3945 14.2115 35.0543 11.7676Z" fill="#21759B"/>
|
||||
<path d="M19.9994 0C8.97162 0 -0.000732422 8.9717 -0.000732422 19.9995C-0.000732422 31.0286 8.97162 40 19.9994 40C31.0269 40 40.0006 31.0286 40.0006 19.9995C40.0002 8.9717 31.0269 0 19.9994 0ZM19.9994 39.0833C9.47733 39.0833 0.91632 30.5223 0.91632 19.9995C0.91632 9.4774 9.477 0.917052 19.9994 0.917052C30.5212 0.917052 39.0816 9.4774 39.0816 19.9995C39.0816 30.5223 30.5212 39.0833 19.9994 39.0833Z" fill="#21759B"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2 KiB |
Loading…
Add table
Reference in a new issue