INTASTELLAR SOLUTIONSHelp Center
Versionv1

Este artigo explica como adicionar Intastellar Sign-In no navegador usando o pacote React oficial ou as mesmas ideias em JavaScript puro (veja o artigo dedicado HTML, CSS e JavaScript puros).

Importante: Todo exemplo de código usa placeholders (your-client-id, https://app.example.com, endpoints de exemplo). Não copie nomes de cookie, caminhos ou variáveis de ambiente do site de outra empresa.

Detalhes oficiais do pacote: @intastellar/signin-sdk-react no npm — instalação, IntastellarButton, useIntastellar, configuração.

A ajuda para produtos Intastellar fica em help.intastellarsolutions.com. Se links antigos ainda apontam para hostnames de desenvolvedor anteriores, use redirecionamentos HTTPS para cá e atualize URIs de login / redirect permitidas no seu cliente Intastellar para bater com as URLs reais.

O que você precisa

  • HTTPS em produção.
  • Popups permitidos para o seu site (o SDK abre a Intastellar numa janela).
  • Client ID registrado (e demais campos que o registro exigir).
  • Plano de quem mantém a dependência (npm install, atualizações).

Como se comporta (versão curta)

O login costuma ser por popup: a Intastellar mostra a UI de login, depois sua página recebe o resultado e o SDK pode definir cookies first-party no seu domínio. Isso não é o mesmo que montar manualmente o redirect OAuth authorization code e o POST de token; para isso, veja Fluxo authorization code.

Perguntas frequentes

Precisamos de React?

Não. Para só HTML/CSS/JS, use HTML, CSS e JavaScript puros — mesmo comportamento por baixo.

Navegadores costumam bloquear window.open até o usuário interagir com a página, ou se o site não pode abrir popups. Veja Logout, erros e solução de problemas.

Onde colocamos o client ID?

Na configuração que o build ou runtime fornece (env pública, arquivo de config etc.). Evite commitar IDs reais em repositório público.

Precisamos de páginas renderizadas no servidor e do SDK

Depois que o SDK sinaliza usuário logado, times costumam chamar o próprio backend para criar cookie de sessão HttpOnly. Rotas e nomes de cookie exatos são seu desenho — veja Sessões, cookies e tokens e o padrão opcional abaixo.

Ferramentas com usuário logado neste site de ajuda

Um site com essa stack pode oferecer ferramentas extras após o login (por exemplo chaves de API). Como isso é armazenado e protegido é específico do ambiente e fica nos seus runbooks, não neste artigo.

Para desenvolvedores — React (@intastellar/signin-sdk-react)

Instale (veja o readme do npm):

npm install @intastellar/signin-sdk-react

Componente de botão (exemplo)

import { IntastellarButton } from "@intastellar/signin-sdk-react";
 
function Example() {
  const handleLogin = (account) => {
    // Use account.user (shape per SDK types) in your app
    console.log("Signed in:", account);
  };
 
  return (
    <IntastellarButton
      clientId="your-client-id"
      loginCallback={handleLogin}
    />
  );
}

Hook (exemplo)

import { useIntastellar } from "@intastellar/signin-sdk-react";
 
function Example() {
  const { users, isLoading, signin, logout, isSignedIn } = useIntastellar({
    clientId: "your-client-id",
    scopes: "profile,email",
    loginCallback: async (account) => {
      /* optional: sync with your backend */
    },
  });
 
  if (isLoading) return <p>Loading…</p>;
  return isSignedIn ? (
    <button type="button" onClick={logout}>Sign out</button>
  ) : (
    <button type="button" onClick={() => signin()}>Sign in</button>
  );
}

Opcional: sua própria sessão no servidor (padrão)

  1. Depois que o callback do SDK roda, chame seu backend (exemplo só ilustrativo: POST https://api.example.com/v1/session) com um payload mínimo de perfil que o servidor aceite.
  2. O servidor estabelece confiança conforme seu modelo de segurança (por exemplo verificar tokens se documentado para o produto).
  3. O servidor define um cookie de sessão opaco, HttpOnly, Secure para o app.

Cookies na sua origem

O SDK pode definir cookies first-party na origem do seu site. Nomes e durações vêm do SDK e da referência técnica da Intastellar — use o readme do npm e sua documentação de integração, não valores copiados de sites não relacionados.

Próximos passos

Last updated