Pular para o conteúdo principal

Next.js

nextjs-auth é um exemplo de como integrar o casdoor em um projeto next-js. Vamos guiá-lo através dos passos a seguir.

Passo 1: Implementar o Casdoor​

Primeiramente, o Casdoor deve ser implementado.

Você pode consultar a documentação oficial do Casdoor para a Instalação do Servidor. Por favor, implemente sua instância do Casdoor em modo de produção.

Após uma implementação bem-sucedida, certifique-se do seguinte:

  • Abra seu navegador favorito e visite http://localhost:8000. Você verá a página de login do Casdoor.
  • Teste a funcionalidade de login inserindo admin como nome de usuário e 123 como senha.

Depois disso, você pode implementar rapidamente uma página de login baseada no Casdoor em seu próprio aplicativo seguindo os passos abaixo.

Passo 2: Adicionar Middleware​

Middleware permite que você execute código antes que uma solicitação seja completada. Então, com base na solicitação recebida, você pode modificar a resposta por meio de reescrita, redirecionamento, modificação dos cabeçalhos de solicitação ou resposta, ou respondendo diretamente.

Use o arquivo middleware.ts (ou .js) na raiz do seu projeto para definir Middleware. Por exemplo, no mesmo nível que pages ou app, ou dentro de src se aplicável.

Exemplo​

//define which paths Middleware will run on
const protectedRoutes = ["/profile"];

export default function middleware(req) {
  if (protectedRoutes.includes(req.nextUrl.pathname)) {
    //redirect the incoming request to a different URL
    return NextResponse.redirect(new URL("/login", req.url));
  }
}

Veja a documentação oficial do next.js middleware para mais detalhes.

Passo 3: Usar o SDK do Casdoor​

1.Instalar o SDK​

Primeiro, instale casdoor-js-sdk via NPM ou Yarn:

npm install casdoor-js-sdk

Ou:

yarn add casdoor-js-sdk

2.Inicializando o SDK​

Em seguida, inicialize 6 parâmetros do tipo string na seguinte ordem:

NomeObrigatórioDescrição
serverUrlSimURL do Servidor Casdoor, como http://localhost:8000
clientIdSimID do cliente da aplicação
clientSecretSimSegredo do cliente da aplicação
organizationNameSimOrganização da aplicação
appNameSimNome da aplicação
redirectPathSimURL redirecionada

Exemplo​

const sdkConfig = {
  serverUrl: "https://door.casdoor.com",
  clientId: "294b09fbc17f95daf2fe",
  clientSecret: "dd8982f7046ccba1bbd7851d5c1ece4e52bf039d",
  organizationName: "casbin",
  appName: "app-vue-python-example",
  redirectPath: "/callback",
};
cuidado

Substitua os valores de configuração pelos da sua própria instância do Casdoor, especialmente o clientId, clientSecret e serverUrl.

3.Redirecionar para a Página de Login​

Quando você precisar autenticar usuários que acessam seu aplicativo, você pode enviar a URL alvo e redirecionar para a página de login fornecida pelo Casdoor.

Certifique-se de ter adicionado a URL de retorno (por exemplo, http://localhost:8080/callback) na configuração do aplicativo previamente.

const CasdoorSDK = new Sdk(sdkConfig);
CasdoorSDK.signin_redirect();

4.Obter Token e Armazenamento​

Após a verificação do Casdoor ser aprovada, ele redirecionará de volta para o seu aplicativo com token.

Você pode optar por usar cookie para armazenar o token.

CasdoorSDK.exchangeForAccessToken()
  .then((res) => {
    if (res && res.access_token) {
      //Get Token
      return CasdoorSDK.getUserInfo(res.access_token);
    }
  })
  .then((res) => {
    // Storage Token
    Cookies.set("casdoorUser", JSON.stringify(res));
  });

Você pode consultar a documentação oficial do Casdoor para Como usar o SDK do Casdoor.

Passo 4: Adicionar Função de Autenticação Middleware​

quando os usuários tentam acessar uma rota protegida, a função de Autenticação Middleware verifica a identidade deles. Se o usuário não estiver autenticado, ele é redirecionado para uma página de login ou o acesso é negado.

Exemplo​

//protected route
const protectedRoutes = ["/profile"];
const casdoorUserCookie = req.cookies.get("casdoorUser");
const isAuthenticated = casdoorUserCookie ? true : false;

//Authentication Function
if (!isAuthenticated && protectedRoutes.includes(req.nextUrl.pathname)) {
  return NextResponse.redirect(new URL("/login", req.url));
}