如何在Auth0 React应用中获取Azure企业连接的可选声明

你已在Azure AD应用中启用了family_name和given_name可选声明，但在Auth0示例应用里无法获取这些字段，可通过以下步骤解决：

1. 确认Auth0与Azure AD连接的范围配置 #

在Auth0的Azure AD身份提供者连接设置中，确保已勾选profile范围（该范围包含family_name、given_name等用户属性）。若需精准控制，也可在授权请求中显式指定对应字段的范围。

2. 添加Auth0规则映射声明到用户对象 #

Auth0默认不会自动同步上游身份提供者的所有声明到应用的user对象，需手动添加规则完成映射：

1. 登录Auth0控制台，进入规则页面
2. 创建新规则，选择「Empty Rule」模板
3. 替换为以下代码：

function (user, context, callback) {
  // 从Azure AD返回的ID Token中提取可选声明
  const familyName = context.idToken.family_name;
  const givenName = context.idToken.given_name;

  if (familyName) {
    user.family_name = familyName;
  }
  if (givenName) {
    user.given_name = givenName;
  }

  callback(null, user, context);
}

保存规则后重新登录应用，user对象即可包含这两个字段。

3. 直接从ID Token中获取声明（备选方案） #

若规则配置后仍未生效，可在React应用中使用Auth0 SDK的getIdTokenClaims()方法直接获取完整的ID Token声明：
修改你的ProfileComponent代码如下：

import React, { useEffect, useState } from "react";
import { Container, Row, Col } from "reactstrap";

import Highlight from "../components/Highlight";
import Loading from "../components/Loading";
import { useAuth0, withAuthenticationRequired } from "@auth0/auth0-react";

export const ProfileComponent = () => {
  const { user, getIdTokenClaims } = useAuth0();
  const [idTokenClaims, setIdTokenClaims] = useState(null);

  useEffect(() => {
    const fetchClaims = async () => {
      const claims = await getIdTokenClaims();
      setIdTokenClaims(claims);
    };
    fetchClaims();
  }, [getIdTokenClaims]);

  return (
    <Container className="mb-5">
      <Row className="align-items-center profile-header mb-5 text-center text-md-left">
        <Col md={2}>
          <img
            src={user.picture}
            alt="Profile"
            className="rounded-circle img-fluid profile-picture mb-3 mb-md-0"
          />
        </Col>
        <Col md>
          <h2>{user.name}</h2>
          <p className="lead text-muted">{user.email}</p>
          {idTokenClaims && (
            <p>
              名: {idTokenClaims.given_name} | 姓: {idTokenClaims.family_name}
            </p>
          )}
        </Col>
      </Row>
      <Row>
        <Highlight>{JSON.stringify({ ...user, ...idTokenClaims }, null, 2)}</Highlight>
      </Row>
    </Container>
  );
};

export default withAuthenticationRequired(ProfileComponent, {
  onRedirecting: () => <Loading />,
});

验证 #

完成配置后退出应用并重新登录，查看Profile页面的用户信息，即可看到family_name和given_name字段已正确显示。

内容的提问来源于stack exchange，提问作者kez