Read more about the project in my article 📰
C4Deployment
title
Deployment_Node(teams, "Teams") {
Container(Teams, "Teams", "", "")
}
Deployment_Node(github, "GitHub SPA host") {
Container(React, "React with MSAL", "Single Page Application", "")
}
Deployment_Node(azure, "Azure / Entra ID") {
Deployment_Node(organizationalResources, "Publishing Organization") {
ContainerDb(Organizational_Resources, "Organizational Resources", "")
Deployment_Node(publishingOrganization, "Local representation of registration") {
Container(Service_Principal, "Service Principal", "", "")
Container(Enterprise_Application, "Enterprise Application", "", "")
}
}
Deployment_Node(appRegistrations, "App Registrations") {
Container(helloworld_app, "helloworld-app", "Graph API permissions", "User.ReadWrite, Presence.ReadWrite")
}
}
Rel(helloworld_app, Enterprise_Application, "Exposes as")
Rel(React, Service_Principal, "Delegates to")
Rel(Teams, React, "Provides endpoint with loginHint")
BiRel(Service_Principal, Organizational_Resources, "Accesses")
BiRel(React, Organizational_Resources, "On behalf of user")
BiRel(Enterprise_Application, Service_Principal, "")
UpdateElementStyle(azure, $borderColor="gray")
UpdateElementStyle(github, $borderColor="gray")
UpdateElementStyle(teams, $borderColor="gray")
UpdateElementStyle(organizationalResources, $borderColor="gray")
UpdateElementStyle(appRegistrations, $borderColor="gray")
UpdateElementStyle(publishingOrganization, $borderColor="gray")
UpdateRelStyle(helloworld_app, Enterprise_Application, $textColor="white", $lineColor="gray", ,$offsetX="5")
UpdateRelStyle(React, Service_Principal, $textColor="white", $lineColor="gray", $offsetX="-40")
UpdateRelStyle(Teams, React, $textColor="white", $lineColor="gray", $offsetY="-20", $offsetX="-90")
UpdateRelStyle(Service_Principal, Organizational_Resources, $textColor="white", $lineColor="gray", $offsetY="-15", $offsetX="-40")
UpdateRelStyle(React, Organizational_Resources, $textColor="white", $lineColor="gray", $offsetY="-15", $offsetX="-40")
UpdateRelStyle(Enterprise_Application, Service_Principal, $textColor="white", $lineColor="gray")
flowchart TD
subgraph Azure
A(App Registrations)
end
B[Teams]
subgraph GitHub Pages
C([React web app])
D([MSAL])
end
subgraph Publishing Organization
E(Organizational Resources)
F(Service Principal)
end
G([user]) --> |email login hint|B
A --- |A trust over Application ID URI|B
A -. Sends Access Token at Runtime (SSO) .-> B
B -. Provides endpoint with login hint .-> C
C <--> D
D <-- Graph API remote calls --> F
E <--> F
linkStyle 0,2,3,4,5,6 stroke-width:.3px;
flowchart TD
subgraph App Owning Tenant
A(App Registrations)
subgraph Local representation of registration
I(Service Principal)
end
H(Organizational Resources)
B[Teams published for Organization]
G([user]) ----> |email login hint|B
end
subgraph GitHub Pages
C([React web app])
D([MSAL])
end
subgraph App Borrowing Tenant
L[Enterprise Application]
subgraph Local representation of registration
F(Service Principal)
end
J[Teams published for Organization]
K([user]) ---> |email login hint|J
E(Organizational Resources)
end
A --- |A trust over Application ID URI Sends Access Token at Runtime via SSO|B
B --> |Provides endpoint with login hint|C
C <--> D
D <-- Graph API remote calls --> F
F <--> E
D <-- Graph API remote calls --> I
J --> |Provides endpoint with login hint|C
A --- |Exposes as multi-tenant app|L
L --- |A trust over Application ID URI Sends Access Token at Runtime via SSO|J
I <--> H
linkStyle 0,1,3,4,5,6,7,8,11 stroke-width:.3px;