feat(console): add AzureAD integration guide (#4989)

* feat(console): add AzureAD integration guide

add AzureAD integration guide

* chore(console): replace image

replace image

packages/console/src/assets/docs/single-sign-on/AzureAD/README.mdx

@@ -0,0 +1,107 @@
+import SsoSamlSpMetadata from '@/mdx-components/SsoSamlSpMetadata';
+import createApplication from './create_application.webp';
+import setupSso from './set_up_single_sign_on.webp';
+import spConfig from './sp_config.webp';
+import metadataUrl from './metadata_url.webp';
+import defaultAttributesMapping from './default_attribute_mapping.webp';
+import logtoAttributes from './logto_attribute_mapping.webp';
+import assignUsers from './assign_users.webp';
+
+# Azure AD single sign-on integration guide
+
+This guide will help you to integration Azure AD single sign-on (SSO) to your application using Logto.
+
+## Step 1: Create an Azure AD SSO application
+
+Initiate the Azure AD SSO integration by creating an SSO application on the Azure AD side.
+
+1. Go to the [Azure portal](https://portal.azure.com/) and sign in as an administrator.
+
+2. Navigate to `Microsoft Entra ID` > `Enterprise applications` > `New application`, and select `Create your own application`.
+
+   <img src={createApplication} alt="Create Application" width="100%" />
+
+3. Enter the application name and select `Integrate any other application you don't find in the gallery (Non-gallery)`.
+
+4. Select `Setup single sign-on` > `SAML`.
+
+   <img src={setupSso} alt="Setup single sign on" width="100%" />
+
+5. Follow the instructions, as the first step, you will need to fill in the basic SAML configuration using the following information provided by Logto.
+
+   <SsoSamlSpMetadata />
+
+   <img src={spConfig} alt="SP Configuration" width="100%" />
+
+- **Audience URI(SP Entity ID)**: It represents as a globally unique identifier for your Logto service, functioning as the EntityId for SP during authentication requests to the IdP. This identifier is pivotal for the secure exchange of SAML assertions and other authentication-related data between the IdP and Logto.
+
+- **ACS URL**: The Assertion Consumer Service (ACS) URL is the location where the SAML assertion is sent with a POST request. This URL is used by the IdP to send the SAML assertion to Logto. It acts as a callback URL where Logto expects to receive and consume the SAML response containing the user's identity information.
+
+Click `Save` to continue.
+
+<br />
+
+## Step 2: Configure SAML SSO at Logto
+
+To make the SAML SSO integration work, you will need to provide the IdP metadata back to Logto. Let's switch back to the Logto side, navigate to the `Connection` tab of your Azure AD SSO connector.
+
+Logto provides three different ways to configure the IdP metadata. The easiest way is to provide the `metadata URL` of the Azure AD SSO application.
+
+- Copy the `App Federation Metadata Url` from your Azure AD SSO application and paste it into the `Metadata URL` field in Logto.
+
+  <img src={metadataUrl} alt="Metadata URL" width="100%" />
+
+- Logto will fetch the metadata from the URL and configure the SAML SSO integration automatically.
+
+<br />
+
+## Step 3: Configure user attributes mapping
+
+Logto provides a flexible way to map the user attributes returned from IdP to the user attributes in Logto. Logto will sync the following user attributes from IdP by default:
+
+- id: The unique identifier of the user. Logto will read the `nameId` claim from the SAML response as the user id by default. You may leave this field as default unless you want to use a different claim.
+- email: The email address of the user. Logto will read the `email` claim from the SAML response as the user primary email by default.
+- name: The name of the user.
+
+You may manage the user attributes mapping logic either on the Azure AD side or Logto side.
+
+1. Map the AzureAD user attributes to Logto user attributes at Logto side.
+
+   Visit the `Attributes & Claims` tab of your Azure AD SSO application.
+
+   <img src={defaultAttributesMapping} alt="Default Attributes Mapping" width="100%" />
+
+   Copy the following attribute names (with namespace prefix) from the `Attributes & Claims` section of your Azure AD SSO application and paste them into the corresponding fields in Logto.
+
+   - `http://schemas.xmlsoap.org/ws/2005/05/identity/claims/email`
+   - `http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name` (Recommend: update the attribute value map to `user.displayname` for better user experience)
+
+2. Map the AzureAD user attributes to Logto user attributes at AzureAD side.
+
+   Visit the `Attributes & Claims` section of your Azure AD SSO application. Click on `Edit`. Update the `Additional claims` fields based on the Logto user attributes settings:
+
+   - update the claim name value based on the Logto user attributes settings.
+   - remove the namespace prefix.
+   - click `Save` to continue.
+
+   You should end up with the following settings:
+
+   <img src={logtoAttributes} alt="Logto Attributes" width="100%" />
+
+> You may also specify additional user attributes on the Azure AD side. Logto will keep a record of the original user attributes returned from IdP under the user's `sso_identity` field.
+
+<br />
+
+## Step 4: Assign users to the Azure AD SSO application
+
+Visit the `Users and groups` section of your Azure AD SSO application. Click on `Add user/group` to assign users to the Azure AD SSO application. Only users assigned to your Azure AD SSO application will be able to authenticate through the Azure AD SSO connector.
+
+<img src={assignUsers} alt="Assign Users" width="100%" />
+
+<br />
+
+## Step 5: Set email domains and enable the SSO connector
+
+Provide the email domains of your organization at the Logto's SAML SSO connector experience tab. This will enable the SSO connector as an authentication method for those users.
+
+Users with email addresses in the specified domains will be restricted to use SAML SSO connector as their only authentication method.

packages/console/src/assets/docs/single-sign-on/index.ts

@@ -7,6 +7,7 @@ export type GuideComponentType = LazyExoticComponent<FunctionComponent<MDXProps>
 const ssoConnectorGuides: Readonly<{ [key in SsoProviderName]?: GuideComponentType }> = {
   [SsoProviderName.SAML]: lazy(async () => import('./SAML/README.mdx')),
   [SsoProviderName.OIDC]: lazy(async () => import('./OIDC/README.mdx')),
+  [SsoProviderName.AZURE_AD]: lazy(async () => import('./AzureAD/README.mdx')),
 };
 
 export default ssoConnectorGuides;