75bb53f065
fixes https://github.com/TryGhost/Product/issues/3738 https://www.notion.so/ghost/Member-Session-Invalidation-13254316f2244c34bcbc65c101eb5cc4 - Adds the transient_id column to the members table. This defaults to email, to keep it backwards compatible (not logging out all existing sessions) - Instead of using the email in the cookies, we now use the transient_id - Updating the transient_id means invalidating all sessions of a member - Adds an endpoint to the admin api to log out a member from all devices - Added the `all` body property to the DELETE session endpoint in the members API. Setting it to true will sign a member out from all devices. - Adds a UI button in Admin to sign a member out from all devices - Portal 'sign out of all devices' will not be added for now Related changes (added because these areas were affected by the code changes): - Adds a serializer to member events / activity feed endpoints - all member fields were returned here, so the transient_id would also be returned - which is not needed and bloats the API response size (`transient_id` is not a secret because the cookies are signed) - Removed `loadMemberSession` from public settings browse (not used anymore + bad pattern) Performance tests on site with 50.000 members (on Macbook M1 Pro): - Migrate: 6s (adding column 4s, setting to email is 1s, dropping nullable: 1s) - Rollback: 2s |
||
|---|---|---|
| .. | ||
| src | ||
| .env | ||
| .env.development.local.example | ||
| .eslintignore | ||
| .yarnrc | ||
| jsconfig.json | ||
| package.json | ||
| README.md | ||
| vite.config.js | ||
Portal
Drop-in script to make the bulk of Ghost membership features work on any theme.
Usage
Ghost automatically injects Portal script on all sites running Ghost 4 or higher.
Alternatively, Portal can be enabled on non-ghost pages directly by inserting the below script on the page.
<script defer src="https://unpkg.com/@tryghost/portal@latest/umd/portal.min.js" data-ghost="https://mymemberssite.com"></script>
The data-ghost attribute expects the URL for your Ghost site, which is the only input Portal needs to work with your site's membership data via Ghost APIs.
Custom trigger button
By default, the script adds a default floating trigger button on the bottom right of your page which is used to trigger the popup on screen.
Its possible to add custom trigger button of your own by adding data attribute data-portal to any HTML tag on page, and also specify a specific page to open from it by using it as data-portal=signup.
The script also adds custom class names to this element for open and close state of popup - gh-portal-open and gh-portal-close, allowing devs to update its UI based on popup state.
Refer the docs to read about ways in which Portal can be customized for your site.
Basic Setup
This section is mostly relevant for core team only for active Portal development. Always use the unpkg link for testing/using latest released portal script.
- Run
yarn start:devto start Portal in development mode - Open http://localhost:3000 to view it in the browser.
- To use the local Portal script in a local Ghost site
- Update
config.local.jsonin Ghost repo to add "portal" config pointing to local dev server url as instructed on terminal. - By default, this uses port
5368for loading local Portal script on Ghost site. It's also possible to specify a custom port when running the script using ---port=xxxx.
- Update
Available Scripts
In the project directory, you can also run:
yarn start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Start the portal server when developing Ghost by running Ghost (in root folder) via yarn dev --all or yarn dev --portal. This will host the portal JavaScript files, and makes sure that Ghost uses these locally hosted assets instead of the ones from the CDN.
yarn build
Creates the production single minified bundle for external use in umd/portal.min.js.
yarn test
Launches the test runner in the interactive watch mode.
Publish
Run yarn ship to publish new version of script.
yarn ship is an alias for npm publish
- Builds the script with latest code using
yarn build(prePublish) - Publishes package on npm as
@tryghost/portaland creates an unpkg link for script at https://unpkg.com/@tryghost/portal@VERSION
(Core team only)