reactjs 为多租户SSO登录配置Azure AD应用程序

mfpqipee  于 5个月前  发布在  React
关注(0)|答案(1)|浏览(71)

我和我的同事目前正在开发一个React应用程序，该应用程序应该在Teams应用程序商店上发布。
我们从Teams Toolkit在VS Code中提供的React模板开始，并设法让SSO与Teams Toolkit创建的Azure AD应用程序注册一起使用。下面是我们用于记录用户的代码的简化版本：

import { TeamsUserCredential } from "@microsoft/teamsfx";
import { useNavigate } from "react-router-dom";

interface IProps {
    teamsUserCredential?: TeamsUserCredential
}

const LoginPage = (props: IProps) => {

    const navigate = useNavigate();

    const login = async () => {
        try {
            await props.teamsUserCredential?.login(["User.Read", "User.ReadBasic.All"]);
            navigate("/home");
        }
        catch(e: any) {
            console.log("User did not logged", e);
        }
    }
    
    return (
        <div >
            <p>You need to login</p>
            <button onClick={login}>Login</button>
        </div>
    )
}

export default LoginPage;

字符串
由Teams Toolkit创建的Azure AD应用程序注册仅为单租户，我们无法在其上启用多租户，因此我们决定手动创建一个新的多租户。从那里，我们编辑了应用程序清单，以便它与需要使用的新Azure AD应用程序相匹配。
在此之后，SSO身份验证不再工作，每次用户单击按钮时都会生成以下错误：Get SSO token failed with error: App resource defined in manifest and iframe origin do not match
我们已经检查了应用程序清单和Azure AD应用程序注册清单，但找不到问题。我们联系了Microsoft以获取此问题的帮助，他们告诉我们将此发布在StackOverflow上，所以我们在这里：）
需要注意的是，我们的应用托管在Azure存储帐户上，我们使用如下URL访问它：https://m365tabxxxxxx.z6.web.core.windows.net
下面是应用清单和Azure AD应用注册清单，也许你可以找到我们遗漏的错误：
应用程序清单

{
    "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.12/MicrosoftTeams.schema.json",
    "version": "1.0.15",
    "manifestVersion": "1.12",
    "id": "myappid",
    "packageName": "fr.mycompanyname.myappname",
    "name": {
        "short": "myappname",
        "full": "myappname"
    },
    "developer": {
        "name": "mycompanyname",
        "mpnId": "0000000",
        "websiteUrl": "https://www.mycompanyname.fr/en/",
        "privacyUrl": "https://www.mycompanyname.fr/privacy-policy/",
        "termsOfUseUrl": "https://www.mycompanyname.fr/en/legal-informations/"
    },
    "description": {
        "short": "My app is nice",
        "full": "My app is nice but longer..."
    },
    "icons": {
        "outline": "outline.png",
        "color": "color.png"
    },
    "accentColor": "#FFFFFF",
    "staticTabs": [
        {
            "entityId": "index0",
            "name": "Personal Tab",
            "contentUrl": "https://m365tabxxxxxx.z6.web.core.windows.net/index.html#/tab",
            "websiteUrl": "https://m365tabxxxxxx.z6.web.core.windows.net/index.html#/tab",
            "scopes": [
                "personal"
            ]
        }
    ],
    "validDomains": [
        "myappname.mycompanyname.fr",
        "m365tabxxxxxx.z6.web.core.windows.net"
    ],
    "webApplicationInfo": {
        "id": "myMultiTenantAzureADAppId",
        "resource": "api://myappname.mycompanyname.fr/myMultiTenantAzureADAppId"
    },
    "localizationInfo": {
        "defaultLanguageTag": "en-us",
        "additionalLanguages": [
            {
                "languageTag": "fr",
                "file": "fr.json"
            }
        ]
    },
    "publisherDocsUrl": "https://www.mycompanyname.fr/en/help-page/"
}

型
Azure AD应用注册清单

{
    "id": "MyAADAppObjectId",
    "acceptMappedClaims": null,
    "accessTokenAcceptedVersion": 2,
    "addIns": [],
    "allowPublicClient": true,
    "appId": "myMultiTenantAzureADAppId",
    "appRoles": [],
    "oauth2AllowUrlPathMatching": false,
    "createdDateTime": "2023-12-12T16:41:59Z",
    "description": null,
    "certification": null,
    "disabledByMicrosoftStatus": null,
    "groupMembershipClaims": null,
    "identifierUris": [
        "api://myappname.mycompanyname.fr/myMultiTenantAzureADAppId"
    ],
    "informationalUrls": {
        "termsOfService": "https://www.mycompanyname.fr/en/legal-informations/",
        "support": null,
        "privacy": "https://www.mycompanyname.fr/privacy-policy/",
        "marketing": null
    },
    "keyCredentials": [],
    "knownClientApplications": [],
    "logoUrl": "https://mylogourl",
    "logoutUrl": null,
    "name": "myappname-multi-tenant",
    "notes": null,
    "oauth2AllowIdTokenImplicitFlow": true,
    "oauth2AllowImplicitFlow": true,
    "oauth2Permissions": [
        {
            "adminConsentDescription": "Allows Teams to call the app's web APIs as the current user.",
            "adminConsentDisplayName": "Teams can access app's web APIs",
            "id": "my_access_as_user_id",
            "isEnabled": true,
            "lang": null,
            "origin": "Application",
            "type": "User",
            "userConsentDescription": "Enable Teams to call this app's web APIs with the same rights that you have",
            "userConsentDisplayName": "Teams can access app's web APIs and make requests on your behalf",
            "value": "access_as_user"
        }
    ],
    "oauth2RequirePostResponse": false,
    "optionalClaims": null,
    "orgRestrictions": [],
    "parentalControlSettings": {
        "countriesBlockedForMinors": [],
        "legalAgeGroupRule": "Allow"
    },
    "passwordCredentials": [
        {
            "customKeyIdentifier": null,
            "endDate": "2025-12-12T10:10:24.569Z",
            "keyId": "myKeyId",
            "startDate": "2023-12-13T10:10:24.569Z",
            "value": null,
            "createdOn": "2023-12-13T10:10:42.6188671Z",
            "hint": "---",
            "displayName": "Password uploaded on Wed Dec 13 2023"
        }
    ],
    "preAuthorizedApplications": [
        {
            "appId": "5e3ce6c0-2b1f-4285-8d4b-75ee78787346", /*Microsoft Teams Web Client*/
            "permissionIds": [
                "my_access_as_user_id"
            ]
        },
        {
            "appId": "1fec8e78-bce4-4aaf-ab1b-5451cc387264", /*Microsoft Teams*/
            "permissionIds": [
                "my_access_as_user_id"
            ]
        }
    ],
    "publisherDomain": "mycompanyname.fr",
    "replyUrlsWithType": [
        {
            "url": "https://m365tabxxxxxx.z6.web.core.windows.net",
            "type": "Web"
        },
        {
            "url": "https://m365tabxxxxxx.z6.web.core.windows.net/blank-auth-end.html",
            "type": "Spa"
        },
        {
            "url": "https://m365tabxxxxxx.z6.web.core.windows.net/auth-end.html",
            "type": "Web"
        }
    ],
    "requiredResourceAccess": [
        {
            "resourceAppId": "00000003-0000-0000-c000-000000000000", /*Microsoft Graph*/
            "resourceAccess": [
                {
                    "id": "e1fe6dd8-ba31-4d61-89e7-88639da4683d", /*User.Read*/
                    "type": "Scope"
                },
                {
                    "id": "b340eb25-3456-403f-be2f-af7a0d370277", /*User.ReadBasic.All*/
                    "type": "Scope"
                }
            ]
        }
    ],
    "samlMetadataUrl": null,
    "signInUrl": "https://www.mycompanyname.fr/en",
    "signInAudience": "AzureADandPersonalMicrosoftAccount",
    "tags": [],
    "tokenEncryptionKeyId": null
}

型
谢谢

reactjs

1条答案

按热度按时间
bkhjykvo

bkhjykvo1#

错误消息“Get SSO token failed with error：App resource defined in manifest and iframe origin do not match”指示应用清单中定义的应用资源与iframe origin之间不匹配。
要解决此问题，您需要确保应用清单中定义的应用资源与iframe origin匹配。
1.检查应用程序清单：打开应用清单文件（manifest.json）并验证webApplicationInfo部分是否包含正确的ID和资源值。ID应与Azure AD应用注册的应用程序（客户端）ID匹配，资源应与Azure存储帐户（https://m365tabxxxxxx.z6.web.core.windows.net）上托管的React应用的URL匹配。
2.验证Azure AD应用程序注册：转到Azure门户并导航到您手动创建的Azure AD应用程序注册。确保应用程序（客户端）ID与应用程序清单中的ID值匹配。此外，检查重定向URI并确保React应用程序的URL被列为有效的重定向URI。
3.更新应用程序清单：如果对Azure AD应用程序注册进行了任何更改（例如更新重定向URI），则需要相应地更新应用程序清单。请使用正确的ID和资源值更新应用程序清单中的webApplicationInfo部分。
4.测试应用程序：在进行必要的更改后，重新构建应用并将其重新部署到Teams。再次测试SSO身份验证流程，看看问题是否得到解决。
以下是webApplicationInfo部分在应用清单中的外观示例：

"webApplicationInfo": {
  "id": "<Azure AD app registration Application (client) ID>",
  "resource": "https://m365tabxxxxxx.z6.web.core.windows.net"
}

字符串
另请参考：在具有Microsoft Entra ID的团队中使用SSO对选项卡进行身份验证的概述

赞(0）分享  回复(0）举报  5个月前
我来回答

相关问题

    查看更多
    微信公众号

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com