From 39e239753e968c3af7c3736a857b5b5420bb8413 Mon Sep 17 00:00:00 2001 From: Charles Zhao Date: Thu, 9 May 2024 11:49:06 +0800 Subject: [PATCH] feat(console): add webflow integration guide (#5832) --- .../console/src/assets/docs/guides/index.ts | 8 + .../assets/docs/guides/spa-webflow/README.mdx | 138 ++++++++++++++++++ .../docs/guides/spa-webflow/config.json | 3 + .../assets/docs/guides/spa-webflow/index.ts | 11 ++ .../assets/docs/guides/spa-webflow/logo.svg | 10 ++ 5 files changed, 170 insertions(+) create mode 100644 packages/console/src/assets/docs/guides/spa-webflow/README.mdx create mode 100644 packages/console/src/assets/docs/guides/spa-webflow/config.json create mode 100644 packages/console/src/assets/docs/guides/spa-webflow/index.ts create mode 100644 packages/console/src/assets/docs/guides/spa-webflow/logo.svg diff --git a/packages/console/src/assets/docs/guides/index.ts b/packages/console/src/assets/docs/guides/index.ts index 39b9e0e76..c7202c0c3 100644 --- a/packages/console/src/assets/docs/guides/index.ts +++ b/packages/console/src/assets/docs/guides/index.ts @@ -15,6 +15,7 @@ import spaAngular from './spa-angular/index'; import spaReact from './spa-react/index'; import spaVanilla from './spa-vanilla/index'; import spaVue from './spa-vue/index'; +import spaWebflow from './spa-webflow/index'; import thirdPartyOidc from './third-party-oidc/index'; import { type Guide } from './types'; import webDotnetCore from './web-dotnet-core/index'; @@ -162,6 +163,13 @@ const guides: Readonly = Object.freeze([ Component: lazy(async () => import('./web-php/README.mdx')), metadata: webPhp, }, + { + order: 2.1, + id: 'spa-webflow', + Logo: lazy(async () => import('./spa-webflow/logo.svg')), + Component: lazy(async () => import('./spa-webflow/README.mdx')), + metadata: spaWebflow, + }, { order: 3, id: 'web-python', diff --git a/packages/console/src/assets/docs/guides/spa-webflow/README.mdx b/packages/console/src/assets/docs/guides/spa-webflow/README.mdx new file mode 100644 index 000000000..1ad4cf7cf --- /dev/null +++ b/packages/console/src/assets/docs/guides/spa-webflow/README.mdx @@ -0,0 +1,138 @@ +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'; + + + + + +### Prerequisits: + +1. Integrating Logto with Webflow requires the "Custom code" feature of Webflow, which requires at least the "Basic" plan. +2. A Webflow site, either use an existing site or create a new one. + + + + + +In this step, we'll add global-level custom code to your Webflow site. Since NPM is not supported in Webflow, we'll use the [jsdelivr.com](https://www.jsdelivr.com/) CDN service to import the Logto SDK. + +Open the "Site settings" page, and navigate to the "Custom code" section. Add the following code to the "Head code" section. + +
+  
+    {``}
+  
+
+ + + + + + + In the following steps, we assume your Webflow site is running on https://your-awesome-site.webflow.io. + + +### Configure Redirect URI + +First, let’s enter your redirect URI. E.g. `https://your-awesome-site.webflow.io/callback`. + + + +### Implement a sign-in button + +Return to your Webflow designer, drag and drop a "Sign in" button to the home page, and assign it an ID “sign-in” for later reference using `getElementById()`. + +
+  
+    {``}
+  
+
+ +### Handle redirect + +

We're almost there! In the last step, we use {`${props.redirectUris[0] ?? 'https://your-awesome-site.webflow.io/callback'}`} as the Redirect URI, and now we need to handle it properly.

+ +First let's create a "Callback" page in Webflow, and simply put some static text "Redirecting..." on it. Then add the following page-level custom code to "Callback" page. + +```html + +``` + + + + + +After signing out, it'll be great to redirect user back to your website. Let's add `https://your-awesome-site.webflow.io` as the Post Sign-out URI below, and use it as the parameter when calling `.signOut()`. + + + +### Implement a sign-out button + +Return to the Webflow designer, and add a “Sign out” button on your home page. Similarly, assign an ID “sign-out” to the button, and add the following code to the page-level custom code. + +
+  
+    {`const signOutButton = document.getElementById('sign-out');
+const onClickSignOut = () => logtoClient.signOut('${props.postLogoutRedirectUris[0] ?? 'https://your-awesome-site.webflow.io'}');
+signOutButton.addEventListener('click', onClickSignOut);`}
+  
+
+ + + + + +In Logto SDK, generally we can use `logtoClient.isAuthenticated()` method to check the authentication status, if the user is signed in, the value will be `true`; otherwise, it will be `false`. + +In your Webflow site, you can also use it to programmatically show and hide the sign-in and sign-out buttons. Apply the following custom code to adjust button CSS accordingly. + +```js +const isAuthenticated = await logtoClient.isAuthenticated(); + +signInButton.style.display = isAuthenticated ? 'none' : 'block'; +signOutButton.style.display = isAuthenticated ? 'block' : 'none'; +``` + + + + + +Now, test your Webflow site: + +1. Deploy and visit your site URL, the sign-in button should be visible. +2. Click the sign-in button, the SDK will initiate the sign-in process, redirecting you to the Logto sign-in page. +3. After signing in, you will be redirected back to your site, seeing the username and the sign-out button. +4. Click the sign-out button to sign-out. + + + + diff --git a/packages/console/src/assets/docs/guides/spa-webflow/config.json b/packages/console/src/assets/docs/guides/spa-webflow/config.json new file mode 100644 index 000000000..f00075c68 --- /dev/null +++ b/packages/console/src/assets/docs/guides/spa-webflow/config.json @@ -0,0 +1,3 @@ +{ + "order": 2.1 +} diff --git a/packages/console/src/assets/docs/guides/spa-webflow/index.ts b/packages/console/src/assets/docs/guides/spa-webflow/index.ts new file mode 100644 index 000000000..672802e5e --- /dev/null +++ b/packages/console/src/assets/docs/guides/spa-webflow/index.ts @@ -0,0 +1,11 @@ +import { ApplicationType } from '@logto/schemas'; + +import { type GuideMetadata } from '../types'; + +const metadata: Readonly = Object.freeze({ + name: 'Webflow', + description: 'Webflow is a SaaS platform for website building and hosting.', + target: ApplicationType.SPA, +}); + +export default metadata; diff --git a/packages/console/src/assets/docs/guides/spa-webflow/logo.svg b/packages/console/src/assets/docs/guides/spa-webflow/logo.svg new file mode 100644 index 000000000..e5df00dfe --- /dev/null +++ b/packages/console/src/assets/docs/guides/spa-webflow/logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + +