feat: finishing post entra-id

Author: LuizMeier

_posts/en/2025-02-04-authentication-backstage-entra-id.md

@@ -28,9 +28,11 @@ Since I found it difficult to locate online resources on authentication with Ent
 According to their official [description](https://backstage.io/docs/overview/what-is-backstage/):  
 
 > *[Backstage](https://backstage.io/) is an open-source framework for building developer portals. Powered by a centralized software catalog, Backstage restores order to your microservices and infrastructure and enables your product teams to ship high-quality code quickly — without compromising autonomy.*  
-> *Backstage unifies all your infrastructure tooling, services, and documentation to create a streamlined development environment from end to end.*  
+> *Backstage unifies all your infrastructure tooling, services, and documentation to create a streamlined development environment from end to end.*
+---
 
-💡 **Note:** Backstage is entirely **developer-focused**. If you, like me, come from an infrastructure background, you may find it challenging since all configurations are done through system files — there is no admin interface for managing users, permissions, integrations, or plugins.  
+> **Note:** Backstage is entirely **developer-focused**. If you, like me, come from an infrastructure background, you may find it challenging since all configurations are done through system files — there is no admin interface for managing users, permissions, integrations, or plugins.
+{: .prompt-info }
 
 ---
 
@@ -52,7 +54,8 @@ You can then access Backstage locally at `http://localhost:3000`, signing in as
 ![Guest home page](assets/img/backstage-entraid/user-home.png)
 *Guest home page*
 
-💡 **Guest access is meant for development purposes only and is not recommended for production.** However, if you still want to enable full guest access, you can find the documentation [here](https://backstage.io/docs/auth/guest/provider/).
+> **Guest access is meant for development purposes only and is not recommended for production.** However, if you still want to enable full guest access, you can find the documentation [here](https://backstage.io/docs/auth/guest/provider/).
+{: .prompt-info }
 
 ---
 
@@ -109,10 +112,12 @@ auth:
             - resolver: userIdMatchingUserEntityAnnotation
 ```
 
-📌 The values for `clientId`, `tenantId`, and `domainHint` can be found on the **Overview** page of your App Registration in Entra ID.  
-📌 The `clientSecret` is created under **Certificates & Secrets**.  
-
-⚠️ **Security Warning:** Never store `clientSecret` directly in the code. Use **environment variables** for production environments.
+> 📌 The values for `clientId`, `tenantId`, and `domainHint` can be found on the **Overview** page of your App Registration in Entra ID.  
+> 📌 The `clientSecret` is created under **Certificates & Secrets**.
+{: .prompt-tip }
+---
+> **Security Warning:** Never store `clientSecret` directly in the code. Use **environment variables** for production environments.
+{: .prompt-warning }
 
 ![clientId, tenantId and domainHint](assets/img/backstage-entraid/app-data.png)
 *clientId, tenantId and domainHint*
@@ -186,7 +191,8 @@ const app = createApp({
 
 Once this is done, you should see the **Microsoft login button** on the Backstage UI.
 
-🚨 However, authentication will fail at this point because Backstage does not recognize the user in its catalog. This leads us to the next step.
+> 🚨 However, authentication will fail at this point because Backstage does not recognize the user in its catalog. This leads us to the next step.
+{: .prompt-error }
 
 ![Authentication error](assets/img/backstage-entraid/auth-error.png)
 *Authentication error*
@@ -217,12 +223,13 @@ spec:
     - guests
 ```
 
-📌 Notes:
+> 📌 Notes:
 
 - `metadata.name`: Mail nickname (value before @yourdomain.com).
 - `metadata.annotations.graph.microsoft.com/user-id`: `Object ID` of the user.
 - `displayName`: Full name of the user.
 - `email`: Full email address.
+{: .prompt-tip }
 
 ## Final Thoughts
 

_posts/pt-BR/2025-02-04-authentication-backstage-entra-id.md

@@ -28,9 +28,11 @@ Como tive dificuldades para encontrar recursos sobre autenticação com o Entra
 De acordo com sua [descrição](https://backstage.io/docs/overview/what-is-backstage) oficial:  
 
 > *[Backstage](https://backstage.io/) é uma estrutura de código aberto para construção de portais de desenvolvedores. Alimentado por um catálogo de software centralizado, o Backstage restaura a ordem de seus microsserviços e infraestrutura e permite que suas equipes de produto enviem códigos de alta qualidade rapidamente, sem comprometer a autonomia.*  
-> *Backstage unifica todas as ferramentas, serviços e documentação de sua infraestrutura para criar um ambiente de desenvolvimento simplificado de ponta a ponta.*  
+> *Backstage unifica todas as ferramentas, serviços e documentação de sua infraestrutura para criar um ambiente de desenvolvimento simplificado de ponta a ponta.*
+---
 
-💡 **Nota:** Backstage é totalmente **focado em desenvolvedores**. Se você, assim como eu, vem da área de infraestrutura, pode estranhar o fato de que toda a configuração é feita via arquivos de sistema—não há uma interface administrativa para gerenciar usuários, permissões, integrações ou plugins.  
+> **Nota:** O Backstage é totalmente **focado em desenvolvedores**. Se você, assim como eu, vem da área de infraestrutura, pode estranhar o fato de que toda a configuração é feita via arquivos de sistema—não há uma interface administrativa para gerenciar usuários, permissões, integrações ou plugins.
+{: .prompt-info }
 
 ---
 
@@ -52,8 +54,8 @@ Você pode então acessar o Backstage localmente em `http://localhost:3000`, ent
 ![Página inicial de convidado](assets/img/backstage-entraid/user-home.png)
 *Página inicial de convidado*
 
-💡 **O acesso de convidado é destinado apenas para desenvolvimento e não é recomendado para produção.** No entanto, se desejar habilitá-lo, consulte a documentação [aqui](https://backstage.io/docs/auth/guest/provider/).  
-
+> **O acesso de convidado é destinado apenas para desenvolvimento e não é recomendado para produção.** No entanto, se desejar habilitá-lo, consulte a documentação [aqui](https://backstage.io/docs/auth/guest/provider/).  
+{: .prompt-info }
 ---
 
 ## Passo 2: Criar um App Registration no Entra ID
@@ -110,10 +112,12 @@ auth:
             - resolver: userIdMatchingUserEntityAnnotation
 ```
 
-📌 Os valores para `clientId`, `tenantId` e `domainHint` podem ser encontrados na **página Overview** do seu App Registration no Entra ID.  
-📌 O `clientSecret` é gerado na seção **Certificates & Secrets**.  
-
-⚠️ **Aviso de Segurança:** Nunca armazene `clientSecret` diretamente no código. Utilize **variáveis de ambiente** em produção.
+> 📌 Os valores para `clientId`, `tenantId` e `domainHint` podem ser encontrados na **página Overview** do seu App Registration no Entra ID.  
+> 📌 O `clientSecret` é gerado na seção **Certificates & Secrets**.
+{: .prompt-tip }
+---
+> **Aviso de Segurança:** Nunca armazene `clientSecret` diretamente no código. Utilize **variáveis de ambiente** em produção.
+{: .prompt-warning }
 
 ![clientId, tenantId e domainHint](assets/img/backstage-entraid/app-data.png)
 *clientId, tenantId e domainHint*
@@ -187,7 +191,8 @@ const app = createApp({
 
 Com isto feito já é possível ver que o botão de autenticação via Entra ID está disponível na interface.
 
-🚨 Contudo, a autenticação falhará, pois o Backstage não é capaz de reconhecer o usuário no catálogo. Isso nos leva ao próximo passo.
+> 🚨 Contudo, a autenticação falhará, pois o Backstage não é capaz de reconhecer o usuário no catálogo. Isso nos leva ao próximo passo.
+{: .prompt-error }
 
 ![Erro de autenticação](assets/img/backstage-entraid/auth-error.png)
 *Erro de autenticação*
@@ -218,14 +223,13 @@ spec:
     - guests
 ```
 
-📌 Notas:
+> 📌 Notas:
 
 - `metadata.name`: é o valor de `Mail nickname`, ou o valor antes de `@seudominio.com`;
 - `metadata.annotations.graph.microsoft.com/user-id`: é o valor de `Object ID`;
 - `displayName`: nome do usuário;
 - `email`: endereço de email completo
-
----
+{: .prompt-tip }
 
 ## Considerações Finais