"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "contexto", "hProperties": { "id": "contexto" } }, "depth": 2, "value": "Contexto" }, { "data": { "id": "pré-requisitos", "hProperties": { "id": "pré-requisitos" } }, "depth": 2, "value": "Pré-requisitos" }, { "data": { "id": "crie-a-sua-interface-personalizada-de-início-de-sessão", "hProperties": { "id": "crie-a-sua-interface-personalizada-de-início-de-sessão" } }, "depth": 2, "value": "Crie a sua interface personalizada de início de sessão" }, { "data": { "id": "configurar-o-logto-tunnel-cli", "hProperties": { "id": "configurar-o-logto-tunnel-cli" } }, "depth": 2, "value": "Configurar o Logto tunnel CLI" }, { "data": { "id": "iniciar-sessão-a-partir-da-sua-aplicação", "hProperties": { "id": "iniciar-sessão-a-partir-da-sua-aplicação" } }, "depth": 2, "value": "Iniciar sessão a partir da sua aplicação" }, { "data": { "id": "interagir-com-a-api-de-experiência-da-logto", "hProperties": { "id": "interagir-com-a-api-de-experiência-da-logto" } }, "depth": 2, "value": "Interagir com a API de Experiência da Logto" }, { "data": { "id": "testar-a-sua-página-de-início-de-sessão-personalizada", "hProperties": { "id": "testar-a-sua-página-de-início-de-sessão-personalizada" } }, "depth": 2, "value": "Testar a sua página de início de sessão personalizada" }, { "data": { "id": "implementar-a-sua-interface-de-início-de-sessão-personalizada-na-logto-cloud", "hProperties": { "id": "implementar-a-sua-interface-de-início-de-sessão-personalizada-na-logto-cloud" } }, "depth": 2, "value": "Implementar a sua interface de início de sessão personalizada na Logto Cloud" }, { "data": { "id": "conclusão", "hProperties": { "id": "conclusão" } }, "depth": 2, "value": "Conclusão" }]; const readingTime = { "minutes": 4, "words": 1191, "text": "4 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "contexto", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#contexto", children: _jsx(_components.span, { children: "#" }) }), "Contexto"] }), "\n", _jsx(_components.p, { children: "A Logto fornece uma interface de início de sessão pronta a usar que cobre todas as funcionalidades da Logto, incluindo início de sessão, registo, recuperação de palavra-passe, início de sessão único (SSO), e muito mais.\nOs utilizadores também podem personalizar a aparência da interface de início de sessão utilizando a nossa funcionalidade de \"CSS Personalizado\"." }), "\n", _jsx(_components.p, { children: "No entanto, alguns utilizadores ainda desejam personalizar profundamente a sua experiência de início de sessão (tanto a interface como os fluxos de autenticação) para corresponder à sua marca e requisitos de negócio específicos.\nOuvimos vocês! E estamos entusiasmados em anunciar que a funcionalidade \"Traga a sua própria interface\" já está disponível na Logto Cloud." }), "\n", _jsx(_components.p, { children: "Neste tutorial, iremos guiá-lo através dos passos para criar e implementar a sua própria interface de início de sessão personalizada na Logto Cloud." }), "\n", _jsxs(_components.h2, { id: "pré-requisitos", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#pré-requisitos", children: _jsx(_components.span, { children: "#" }) }), "Pré-requisitos"] }), "\n", _jsx(_components.p, { children: "Antes de começar, certifique-se de que tem o seguinte:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Uma conta da ", _jsx(_components.a, { href: "http://cloud.logto.io/?sign_up=true", children: "Logto Cloud" }), " com um plano de subscrição"] }), "\n", _jsxs(_components.li, { children: ["Uma aplicação integrada com a Logto (", _jsx(_components.a, { href: "https://docs.logto.io/quick-starts", children: "Inícios rápidos" }), ")"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "https://docs.logto.io/docs/references/tunnel-cli/", children: "CLI Logto tunnel" }), " instalado"] }), "\n", _jsx(_components.li, { children: "Conhecimentos básicos de HTML, CSS e JavaScript" }), "\n"] }), "\n", _jsx(_components.p, { children: "Para simplificar, vamos utilizar o clássico método de início de sessão \"nome de utilizador e palavra-passe\" nos passos seguintes. Lembre-se de mudar o seu método de início de sessão na Logto Console." }), "\n", _jsx("center", { children: _jsx("img", { width: "600", src: "https://uploads.strapi.logto.io/1/username_password_sign_in_78a7d8588c.webp", alt: "Início de sessão por nome de utilizador e palavra-passe" }) }), "\n", _jsxs(_components.h2, { id: "crie-a-sua-interface-personalizada-de-início-de-sessão", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#crie-a-sua-interface-personalizada-de-início-de-sessão", children: _jsx(_components.span, { children: "#" }) }), "Crie a sua interface personalizada de início de sessão"] }), "\n", _jsxs(_components.p, { children: ["O requisito mínimo para uma interface de início de sessão é ter um ficheiro ", _jsx(_components.code, { children: "index.html" }), ", com um formulário de início de sessão que inclua pelo menos um campo de nome de utilizador, um campo de palavra-passe, e um botão de submissão.\nUsei o ChatGPT para gerar um exemplo de HTML, e aqui está esta adorável página de início de sessão cor-de-rosa."] }), "\n", _jsx("center", { children: _jsx("img", { width: "600", src: "https://uploads.strapi.logto.io/1/pinky_sign_in_page_b11e43251d.webp", alt: "Página de início de sessão personalizada" }) }), "\n", _jsx(_components.p, { children: "Omiti os estilos CSS para simplificar, e aqui está como é simples o HTML:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n \n \n \n Página de Início de Sessão Divertida\n \n \n

Bem-vindo de Volta

\n \n

\n \n\n" }) }), "\n", _jsx(_components.p, { children: "Também pode começar com um modelo do seu framework de front-end favorito, como Create React App, Next.js, ou Vue CLI." }), "\n", _jsxs(_components.p, { children: ["Como a Logto é de código aberto, outra recomendação é clonar o ", _jsx(_components.a, { href: "https://github.com/logto-io/logto/tree/master/packages/experience", children: "projeto Logto Experience" }), ", e modificar o código para atender às suas necessidades. Esta é a interface completa de início de sessão integrada da Logto, escrita em React e TypeScript."] }), "\n", _jsxs(_components.h2, { id: "configurar-o-logto-tunnel-cli", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#configurar-o-logto-tunnel-cli", children: _jsx(_components.span, { children: "#" }) }), "Configurar o Logto tunnel CLI"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://docs.logto.io/docs/references/tunnel-cli/", children: "CLI Logto tunnel" }), " é uma ferramenta que não só serve as suas páginas HTML, mas também lhe permite interagir com a API de Experiência da Logto a partir das suas páginas HTML no ambiente de desenvolvimento local."] }), "\n", _jsxs(_components.p, { children: ["Assumindo que a sua página ", _jsx(_components.code, { children: "index.html" }), " está localizada em ", _jsx(_components.code, { children: "/path/to/your/custom-ui" }), ", e que o seu ID de tenant da Logto seja ", _jsx(_components.code, { children: "foobar" }), ", pode executar o comando desta maneira:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npx @logto/tunnel --path /path/to/your/custom-ui --endpoint https://foobar.logto.app/ -p 9000\n" }) }), "\n", _jsxs(_components.p, { children: ["Ou, se estiver a utilizar um framework de interface que tenha um servidor de desenvolvimento integrado, e a sua página estiver a ser servida em ", _jsx(_components.code, { children: "http://localhost:4000" }), ", pode executar o comando assim:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npx @logto/tunnel --uri http://localhost:4000 --endpoint https://foobar.logto.app/ -p 9000\n" }) }), "\n", _jsxs(_components.p, { children: ["Após executar o comando, o serviço de tunnel será iniciado na sua máquina local ", _jsx(_components.code, { children: "http://localhost:9000/" }), "."] }), "\n", _jsxs(_components.h2, { id: "iniciar-sessão-a-partir-da-sua-aplicação", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#iniciar-sessão-a-partir-da-sua-aplicação", children: _jsx(_components.span, { children: "#" }) }), "Iniciar sessão a partir da sua aplicação"] }), "\n", _jsxs(_components.p, { children: ["Vá para a aplicação que criou anteriormente, e altere o endpoint da Logto de ", _jsx(_components.code, { children: "https://foobar.logto.app/" }), " para ", _jsx(_components.code, { children: "http://localhost:9000/" }), " na configuração do seu SDK da Logto."] }), "\n", _jsx(_components.p, { children: "Vamos usar o nosso projeto de exemplo em React como exemplo:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", title: "src/App.tsx", children: "import { LogtoProvider, LogtoConfig } from '@logto/react';\n\nconst config: LogtoConfig = {\n // endpoint: 'https://foobar.logto.app/', // endpoint original da Logto Cloud\n endpoint: 'http://localhost:9000/', // endereço do serviço de tunnel\n appId: '',\n};\n\nconst App = () => (\n \n \n \n);\n" }) }), "\n", _jsx(_components.p, { children: "Clique no botão \"Iniciar sessão\" na sua aplicação. Em vez de ver a interface de início de sessão integrada da Logto, agora deverá ser redirecionado para a sua página de início de sessão personalizada." }), "\n", _jsxs(_components.h2, { id: "interagir-com-a-api-de-experiência-da-logto", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#interagir-com-a-api-de-experiência-da-logto", children: _jsx(_components.span, { children: "#" }) }), "Interagir com a API de Experiência da Logto"] }), "\n", _jsxs(_components.p, { children: ["Neste passo, iremos interagir com a API de Experiência da Logto na sua interface personalizada. Primeiro, vamos criar um ficheiro ", _jsx(_components.code, { children: "script.js" }), " e adicionar a referência no seu ", _jsx(_components.code, { children: "index.html" }), "."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", title: "index.html", children: "\n \n \n \n \n \n\n" }) }), "\n", _jsxs(_components.p, { children: ["Coloque o código seguinte no seu ficheiro ", _jsx(_components.code, { children: "script.js" }), "."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", title: "script.js", children: "window.onload = function () {\n const form = document.getElementById('signInForm');\n form.addEventListener('submit', async function (event) {\n event.preventDefault();\n const formData = new FormData(event.target);\n \n try {\n await fetch('/api/experience', {\n method: 'PUT',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ interactionEvent: 'SignIn' }),\n });\n\n const verificationResponse = await fetch('/api/experience/verification/password', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n identifier: { type: 'username', value: formData.get('username') },\n password: formData.get('password'),\n }),\n });\n\n const { verificationId } = await verificationResponse.json();\n\n await fetch('/api/experience/identification', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ verificationId }),\n });\n\n const submitResponse = await fetch('/api/experience/submit', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n });\n\n const { redirectTo } = await submitResponse.json();\n window.location.replace(redirectTo);\n\n } catch (error) {\n console.error('Ops!', error);\n }\n });\n};\n" }) }), "\n", _jsx(_components.p, { children: "Este script irá completar o fluxo de início de sessão com nome de utilizador e palavra-passe com a ajuda destas APIs:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "PUT /api/experience" }), " - Iniciar a interação de início de sessão"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "POST /api/experience/verification/password" }), " - Verificar o nome de utilizador e a palavra-passe"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "POST /api/experience/identification" }), " - Identificar o utilizador para a interação atual"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "POST /api/experience/submit" }), " - Submeter a interação de início de sessão"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Consulte a ", _jsx(_components.a, { href: "https://openapi.logto.io/group/endpoint-experience", children: "documentação da API de Experiência da Logto" }), " para mais detalhes."] }), "\n", _jsxs(_components.h2, { id: "testar-a-sua-página-de-início-de-sessão-personalizada", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#testar-a-sua-página-de-início-de-sessão-personalizada", children: _jsx(_components.span, { children: "#" }) }), "Testar a sua página de início de sessão personalizada"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Vá para a sua aplicação e clique no botão \"Iniciar sessão\"." }), "\n", _jsxs(_components.li, { children: ["Deverá ser redirecionado para a sua página de início de sessão personalizada em ", _jsx(_components.code, { children: "http://localhost:9000/" }), "."] }), "\n", _jsx(_components.li, { children: "Insira o nome de utilizador e a palavra-passe, e clique no botão \"Submeter\"." }), "\n", _jsx(_components.li, { children: "Se tudo estiver configurado corretamente, deverá ser redirecionado de volta para a sua aplicação, com as informações do utilizador autenticado." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "implementar-a-sua-interface-de-início-de-sessão-personalizada-na-logto-cloud", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#implementar-a-sua-interface-de-início-de-sessão-personalizada-na-logto-cloud", children: _jsx(_components.span, { children: "#" }) }), "Implementar a sua interface de início de sessão personalizada na Logto Cloud"] }), "\n", _jsx(_components.p, { children: "Depois de concluir o desenvolvimento e os testes da sua interface de início de sessão personalizada localmente, pode implementá-la na Logto Cloud.\nBasta criar um ficheiro zip do seu diretório de interface personalizada e carregá-lo na secção \"UI Personalizada\" da sua Logto Console." }), "\n", _jsx("center", { children: _jsx("img", { src: "https://uploads.strapi.logto.io/1/upload_custom_ui_assets_d5d99b43d9.webp", alt: "Carregar interface personalizada" }) }), "\n", _jsx(_components.p, { children: "Após carregar, guarde as alterações, e a sua interface de início de sessão personalizada estará ativa no seu tenant da Logto Cloud, substituindo a experiência de início de sessão integrada da Logto." }), "\n", _jsx("center", { children: _jsx("img", { src: "https://uploads.strapi.logto.io/1/sie_custom_ui_enabled_53f4445188.webp", alt: "Interface personalizada ativada" }) }), "\n", _jsxs(_components.p, { children: ["Finalmente, volte à sua aplicação e altere o URI do endpoint de volta para o endpoint da sua Logto Cloud: ", _jsx(_components.code, { children: "https://foobar.logto.app/" }), ".\nDesta vez, pode parar o serviço de tunnel da Logto, e a sua aplicação deve agora funcionar diretamente com a interface personalizada hospedada online."] }), "\n", _jsxs(_components.h2, { id: "conclusão", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusão", children: _jsx(_components.span, { children: "#" }) }), "Conclusão"] }), "\n", _jsx(_components.p, { children: "Neste tutorial, percorremos o processo de implementação e implementação da sua própria interface de início de sessão personalizada na Logto Cloud." }), "\n", _jsx(_components.p, { children: "Com esta funcionalidade, agora pode personalizar profundamente a sua interface de início de sessão e fluxos de autenticação para corresponder à sua marca e requisitos de negócios específicos." }), "\n", _jsx(_components.p, { children: "Feliz desenvolvimento! 🚀" }), "\n", _jsx(LogtoCloudButton, {})] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }