mirror of
https://github.com/logto-io/logto.git
synced 2025-01-06 20:40:08 -05:00
feat(console): add wordpress integration guide (#5844)
This commit is contained in:
wangsijie
GitHub
parent
e7a642028d
commit
697ac693a6
5 changed files with 96 additions and 0 deletions
|
|
@ -35,6 +35,7 @@ import webPhp from './web-php/index';
|
|||
import webPython from './web-python/index';
|
||||
import webRemix from './web-remix/index';
|
||||
import webSveltekit from './web-sveltekit/index';
|
||||
import webWordpress from './web-wordpress/index';
|
||||
|
||||
const guides: Readonly<Guide[]> = Object.freeze([
|
||||
{
|
||||
|
|
@ -170,6 +171,13 @@ const guides: Readonly<Guide[]> = Object.freeze([
|
|||
Component: lazy(async () => import('./spa-webflow/README.mdx')),
|
||||
metadata: spaWebflow,
|
||||
},
|
||||
{
|
||||
order: 2.2,
|
||||
id: 'web-wordpress',
|
||||
Logo: lazy(async () => import('./web-wordpress/logo.svg')),
|
||||
Component: lazy(async () => import('./web-wordpress/README.mdx')),
|
||||
metadata: webWordpress,
|
||||
},
|
||||
{
|
||||
order: 3,
|
||||
id: 'web-python',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
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">
|
||||
|
||||
We will use the [OpenID Connect Generic](https://wordpress.org/plugins/generic-openid-connect/) plugin to integrate Logto via OIDC protocal into your Wordpress website.
|
||||
|
||||
1. Log in to your WordPress site.
|
||||
2. Navigate to "Plugins" and click "Add New".
|
||||
3. Search for "OpenID Connect Generic" and install the plugin by daggerhart.
|
||||
4. Activate the plugin.
|
||||
|
||||
</Step>
|
||||
|
||||
<Step title="Configure redirect URI">
|
||||
|
||||
First, let’s enter your redirect URI. You can find it in the plugin settings, scroll down to the "Notes" section, and copy the "Redirect URI" value.
|
||||
|
||||
<UriInputField name="redirectUris" />
|
||||
|
||||
Don't forget to click the **Save** button.
|
||||
|
||||
</Step>
|
||||
|
||||
<Step title="Set up the plugin">
|
||||
|
||||
Refer to the following table for the necessary configuration details:
|
||||
|
||||
| Plugin Field | Description |
|
||||
| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| Client ID | The app ID of your Logto application |
|
||||
| Client Secret | The app secret of your Logto application |
|
||||
| OpenID Scope | Enter `email profile openid offline_access` |
|
||||
| Login Endpoint URL | The authorization endpoint URL of your Logto application, which is https://[tenant-id].logto.app/oidc/auth, you can click "show endpoint details" in the Logto application page to get the URL. |
|
||||
| Userinfo Endpoint URL | The userinfo endpoint URL of your Logto application, which is https://[tenant-id].logto.app/oidc/me. |
|
||||
| Token Validation Endpoint URL | The token validation endpoint URL of your Logto application, which is https://[tenant-id].logto.app/oidc/token. |
|
||||
| End Session Endpoint URL | The end session endpoint URL of your Logto application, which is https://[tenant-id].logto.app/oidc/session/end. |
|
||||
| Identity Key | The unique key in the ID token that contains the user's identity, it can be email or sub, depending on your configuration. |
|
||||
| Nickname Key | The key in the ID token that contains the user's nickname, you can set it to sub and change it later. |
|
||||
|
||||
</Step>
|
||||
|
||||
<Step title="Checkpoint: Test your application">
|
||||
|
||||
Now, you can test your application:
|
||||
|
||||
1. Log out of your WordPress site.
|
||||
2. Visit the WordPress login page and click the "Sign in with Logto" button.
|
||||
3. You will be redirected to the Logto sign-in page.
|
||||
4. Sign in with your Logto account.
|
||||
5. You will be redirected back to the WordPress site and logged in automatically.
|
||||
|
||||
</Step>
|
||||
|
||||
</Steps>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"order": 2.2
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { ApplicationType } from '@logto/schemas';
|
||||
|
||||
import { type GuideMetadata } from '../types';
|
||||
|
||||
const metadata: Readonly<GuideMetadata> = Object.freeze({
|
||||
name: 'WordPress',
|
||||
description: 'Integrate Logto into your WordPress app.',
|
||||
target: ApplicationType.Traditional,
|
||||
fullGuide: {
|
||||
title: 'Authorization and role mapping in WordPress',
|
||||
url: 'https://blog.logto.io/integrate-with-wordpress-authorization/',
|
||||
},
|
||||
});
|
||||
|
||||
export default metadata;
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg viewBox="0 0 122.52 122.523" xmlns="http://www.w3.org/2000/svg"><g fill="#464342"><path d="m8.708 61.26c0 20.802 12.089 38.779 29.619 47.298l-25.069-68.686c-2.916 6.536-4.55 13.769-4.55 21.388z"/><path d="m96.74 58.608c0-6.495-2.333-10.993-4.334-14.494-2.664-4.329-5.161-7.995-5.161-12.324 0-4.831 3.664-9.328 8.825-9.328.233 0 .454.029.681.042-9.35-8.566-21.807-13.796-35.489-13.796-18.36 0-34.513 9.42-43.91 23.688 1.233.037 2.395.063 3.382.063 5.497 0 14.006-.667 14.006-.667 2.833-.167 3.167 3.994.337 4.329 0 0-2.847.335-6.015.501l19.138 56.925 11.501-34.493-8.188-22.434c-2.83-.166-5.511-.501-5.511-.501-2.832-.166-2.5-4.496.332-4.329 0 0 8.679.667 13.843.667 5.496 0 14.006-.667 14.006-.667 2.835-.167 3.168 3.994.337 4.329 0 0-2.853.335-6.015.501l18.992 56.494 5.242-17.517c2.272-7.269 4.001-12.49 4.001-16.989z"/><path d="m62.184 65.857-15.768 45.819c4.708 1.384 9.687 2.141 14.846 2.141 6.12 0 11.989-1.058 17.452-2.979-.141-.225-.269-.464-.374-.724z"/><path d="m107.376 36.046c.226 1.674.354 3.471.354 5.404 0 5.333-.996 11.328-3.996 18.824l-16.053 46.413c15.624-9.111 26.133-26.038 26.133-45.426.001-9.137-2.333-17.729-6.438-25.215z"/><path d="m61.262 0c-33.779 0-61.262 27.481-61.262 61.26 0 33.783 27.483 61.263 61.262 61.263 33.778 0 61.265-27.48 61.265-61.263-.001-33.779-27.487-61.26-61.265-61.26zm0 119.715c-32.23 0-58.453-26.223-58.453-58.455 0-32.23 26.222-58.451 58.453-58.451 32.229 0 58.45 26.221 58.45 58.451 0 32.232-26.221 58.455-58.45 58.455z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Loading…
Reference in a new issue