@blackforestsentinel/种子-网络-人民

React-Kombonnenten rund um Personen für Frontends aus (英语) 哨兵种子:Profilbild, Name, Rolle, Abmelden, Personenauswahl, Karten, Anmelde- und Kein-Zugriff-Seite (英语). Die Daten kommen aus Microsoft Graph, mit dem Token der angemeldeten Person servt im 浏览器; einen eigenen Server-Endpunkt bracht es nicht. 互联网档案馆的存檔,存档日期2013-12-22.

• Optik a Flent 2 Angelehnt(团队,展望),Ohne Abhängigkeit von @fluentui/*。 。 。 .
• Ein statisches Styleshet, keine eingefügten Styles; passt zur CSP der Seed-Apps (英语:style-src 'self') (中文(简体) ).
• 比尔德阿尔斯 data:- URL;死亡 CSP erlaubt img-src 'self' data: 士诚.
• 运行了 16 KB JavaScript und 6 KB CSS nach gzip, ohne React. Einzelne Komponenten lassen sich per Tree-Shaking einbinden. 中国植物物种信息数据库. 中国植物物种信息数据库.

埃因鲍

npm install @blackforestsentinel/seed-web-people

死亡版本传出子 @blackforestsentinel/seed-web-auth (Peer-Abhängigkeit, ebenso React ab 18.) (英语).

// main.tsx
import '@blackforestsentinel/seed-web-people/styles.css';
import { SeedUserProvider } from '@blackforestsentinel/seed-web-auth/react';
import { DirectoryProvider, SignInPage } from '@blackforestsentinel/seed-web-people';

const config = await loadRuntimeConfig<AppConfig>();
const auth = await startAuth(config.auth); // createSeedAuth oder null (lokal, ohne sso)

if (auth && !auth.account) {
  root.render(
    <DirectoryProvider config={config.auth} auth={auth}>
      <SignInPage appName="Kundenportal" />
    </DirectoryProvider>,
  );
} else {
  root.render(
    <SeedUserProvider load={api.getMe}>
      <DirectoryProvider config={config.auth} auth={auth}>
        <App />
      </DirectoryProvider>
    </SeedUserProvider>,
  );
}

• DirectoryProvider 切入手冯 config.auth编号 : auth.directory (原始内容存档于2018-10-21) (英语). und Anmeldung Graph, im lokalen Modus die Liste aus config.json儿子们 欧恩 auth.directory seigen die Komponenten Namen und Instituten, die App übergibt, und rufen Graph nie auf. 中国植物物种信息数据库.
• DirectoryProvider 热尔特英寸 SeedUserProvider达米特·罗伦 /api/me 安可门.
• Die CSP der App raucht (英语) connect-src https://graph.microsoft.com; das Template trägt das mit (英语: auth.directory 爱因.

目标

<CurrentUserMenu menuItems={[{ label: 'Hilfe', href: '/hilfe' }]} />
<PersonLabel id={invoice.approvedBy} secondary={formatDate(invoice.approvedAt)} card />
<PeoplePicker multiple value={reviewers} onChange={setReviewers} onlyWithAppRole roles={['Admin']} />
<PeoplePicker multiple value={writers} onChange={setWriters} principalTypes={['user', 'servicePrincipal']} />
<AvatarGroup people={task.participants} max={4} />

选手

• ARIA-Muster“Combobox”:Pfeiltasten wählen den Vorschlag, Enter übernimt ihn, Escape schließt die Liste und leert dans Feld, Rücktaste im Leeren Feld entfernt den letzten Chip.
• (原始内容存档于2019-09-25). Suche ab zwei Zeichen mit 250 ms Verzögerung. 与Kontakte有关的人/me/people), Dann das Verzeichnis (英语:/users?$search),以einm为单位的饮料 $batch。 。 。 .
• filter (原始内容存档于2019-09-21) (英语). Mindet Vorschläge aus, renderOption 斯特尔特·塞尔布斯特·达尔.
• onlyWithAppRole seigt nur Personen mit einer App-Rolle der API, mit 互联网档案馆的存檔,存档日期2013-10-02 roles (原始内容存档于2018-09-21). Nur mit Diesen Rollen. Das Paket liet die Zuweisungen der API-Registrierung (英语:/servicePrincipals(appId='…')/appRoleAssignedTo(原始内容存档于2017-10-09) (英语). und löst Gruppen samt verschachtelter Gruppen auf (英语)/groups/{id}/transitiveMembers) (中文(简体) ). (原始内容存档于2018-10-21). Das Ergebnis bleibt sehn Minutern im Zwischenspeicher.
• 欧恩 auth.directory.roleFilter 皮克电玩 onlyWithAppRole 尼曼登、埃宁·费勒data-state="error"und in der Konsole. (原始内容存档于2019-09-29). Im lokalen Modus 过滤器 er nach roles (原始内容存档于2018-10-21). der erfunden Personen.

(原始内容存档于2018-10-03) (英语). Anwendungen und verwalte Identitäten

Wer einen Datensatz bearbeiten darf, ist tot nicht nur eine Person, sonden auch eine verwalte Identität (managed Identität) (管理身份) oder eine andere Anwendung. 轻点 auth.directory.servicePrincipals (单位:千美元) project.yaml auth.directory.servicePrincipals: trueKennn die Komponenten auch diese Service Professors: (原始内容存档于2018-09-29). Kennn die Komponenten auch diese Service Professors:

<PeoplePicker
  multiple
  principalTypes={['user', 'servicePrincipal']}
  servicePrincipalTypes={['ManagedIdentity', 'Application']}
  value={writers}
  onChange={setWriters}
/>
<PersonLabel id={record.updatedBy} secondaryField="jobTitle" card />

• Person.kind 谓 user 欧德 servicePrincipalKommen校长 appId ( client-ID) 未读取 servicePrincipalType (单位:千美元)ManagedIdentity, (中文(简体) ), Application)达祖. Gespeicherte Daten Ohne (英语) kind gelten als Person. (原始内容存档于2018-09-29).
• principalTypes im Picker, 默认 ['user']关闭 servicePrincipal {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}这样的话 {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你应该知道 /servicePrincipals?$search="displayName:…", imm selben (英语) $batch (原始内容存档于2018-10-21). Wie die Personen. servicePrincipalTypes (原始内容存档于2018-10-21) (英语). beschränkt die Suche, etwa auf ['ManagedIdentity']. Ohne Beschränkung erscheinen auch Anwendungen von 微软(etwa “微软图”); filter 搅拌机 weitere aus.
• (原始内容存档于2018-09-29). Personen und Anwendungen stehen abwechselnd in den Vorschlägen. Anwendungen zeigen ihre Art und die App-ID als zweite Zeile. 中国植物物种信息数据库.
• 轻点 onlyWithAppRole service Service 校长,Denen eine Role der API 恶作剧 苏克维森是。 (原始内容存档于2018-10-21). Gruppen löst der Filter nur nach Personen auf.
• PersonLabel, (中文(简体) ), PersonCard, (中文(简体) ), Avatar erkennan 服务负责人:/users/{id}(原始内容存档于2013-10-12). fragen sie /servicePrincipals/{id}. Statt Instituten zeigen sie ein system auf einem Quadrat, einen Schlüssel für verwalte Identitäten, sonst vier Kacheln. 中国植物物种信息数据库. Foto und Teams - Statistics es für Anwendungen nicht, Mail und Chat auf der Karte auch nicht; die Karte Nennt Art und App-ID. 存档副本.
• 德姆·沙尔特·莱德特·杰德斯 PersonLabel 攻击 Avatar 光标 id das Profil, um die Art zu kennen, arch wenn(英语:Art zu kenn (film)), (中文(简体) ) name 格鲁塞特是(他为塞尔本) $batch(原始内容存档于2013-10-12). 30 Minuten im Zwischenspeicher. (原始内容存档于2018-10-25) (英语). Den Teams - Status lädt das Label erst, wenn festesteht, dass es eine Person ist. Art schon kennt, gibt sie mit und spart die Abfrage: 亚特·斯克恩·克恩特(英语:Art schon kennt, Gibt sie mit und spart die Abfrage: 亚特·克恩特(英语: person={{ kind: 'user' }} z. kind 已经 Avatar。 。 。 .
• secondaryField ("Verwalte Identität","Anwendung"),Wenn das Feld leer ist.
• 欧恩 auth.directory.servicePrincipals 皮克电玩 principalTypes einen Fehler im Feld und in der Konsole, start nur Personen zu zeigen. 中国植物物种信息数据库. Labels und Karten bleiben wie biher: Für die ID einer Anwendung zeigen sie den übergebenen nameen mit Inginden. 中国植物物种信息数据库.
• 伊克兰·莫多斯·斯蒂亨·安文登根·米特 "kind": "servicePrincipal" 内 auth.directory.people。 。 。 .

钩子

Oberflächen gibt es nur die Daten: 欧巴马

status 谓 idle {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}我.., loading, (中文(简体) ), ready 欧德 error。Ohne反应: createGraphDirectory() ưμ㼯a createLocalDirectory()。 。 。 .

密码

• CSS - 变量 sichtbare,一位女演员:

  :root {
    --seed-accent: #8a2be2;
    --seed-font: Inter, sans-serif;
    --seed-avatar-radius: 8px;
  }
  

  死神之门: --seed-font, (中文(简体) ), --seed-accent (关) -hover, (中文(简体) ), -pressed, (中文(简体) ), --seed-text (关) -secondary, (中文(简体) ), -tertiary, (中文(简体) ), --seed-surface, (中文(简体) ), --seed-stroke, (中文(简体) ), --seed-focus, (中文(简体) ), --seed-radius-*, (中文(简体) ), --seed-shadow-*, (中文(简体) ), --seed-presence-*, (中文(简体) ), --seed-palette-<farbe>-bg编号 :-fgDie Werte entsprechen den Tokens von Fluent 2 (布兰德) #0F6CBD) (中文(简体) ).
• @layer seed数字 : Alle Standards-Styles liegen in dieser Ebene. (原始内容存档于2018-09-29) (英语). Jede Regel der App Gewont ohne (英语:Jede Regel der App Gewint ohne) (美国英语) !important{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}这太夸张了.
• Feste 克莱森纳姆 纳克 BEM, etwa seed-avatar, (中文(简体) ), seed-avatar__image, (中文(简体) ), seed-picker__option, (中文(简体) ), seed-user-menu__role二. Zustände als data-*数字 : data-state="loading", (中文(简体) ), data-active, (中文(简体) ), data-open, (中文(简体) ), data-presence="busy", (中文(简体) ), data-color="cranberry"。 。 。 .
• className ưμ㼯a classNames数字 : 杰德·科姆蓬特·尼姆特 className für das Wurzelelement und (法语) classNames für ihre Teile, z. B. (原始内容存档于2017-09-21). classNames={{ option: 'px-2 py-1' }}{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}我们很兴奋 {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}我们很兴奋.
• 伊根·达斯特伦: renderOption 皮克,我爱他 Impicker, renderTrigger ưμ㼯a menuItems (原始内容存档于2017-10-21). im Benutzermenü, die Hooks für alles andere.
• 地狱出邓克尔 费尔根 prefers-color-scheme。 。 。 . data-seed-theme="light" 欧德 "dark" 已经 html- 节日节日 节日 节日 节日 节日 节日 节日 节日.
• 贝迪恩巴克特: Picker als Combobox, Benutzermenü als Menu Button, Bilder mit Alternativtext über (英语) role="img" ưμ㼯a aria-label,所有mit der Tastatur 床边酒吧, Fokusrahmen wie Fluent, forced-colors (原始内容存档于2017-10-29). berücksichtigt.

贝雷希蒂贡根恩德恩维利翁

Alle Berechtigungen sind delegiert: Das Frontend sieht nur, 是Outlook oder Teams ohnehin sieht中死亡的死因。 达斯地平线 sso (原始内容存档于2013-10-12). trägt sie a der SPA-Registrierung ein; einwilligen muss ein Mensch.

• (原始内容存档于2018-09-26). Viele tenants erlauben keine eigene Einwilligung der Personen. Dann erteilt e in Admin sie einmal für alle: Entra ID, App-Registrierungen, die SPA-Registrierung, “API-Berechtigungen”, “行政学家zustimung ertelen”.
• Das Paket holt ein Token für alle 范围 auth.directory.scopes 苏格利克。 Fehlt die Einwilligung für einen davon, bleibt Graph ganz aus. 中国植物物种信息数据库. 轻点 roleFilter: true 欧德 servicePrincipals: true (原始内容存档于2018-09-21) (英语). Darher erst die Edministratorzustimmung ertelen, dann ausrollen.
• Fehlt die Einwilligung, leitet种子-web-auth je Tab einmal ohne und einmal mit Dialog zu Entra IDum, damit die Person sustimen Kann. 维基语录链接:名人名言 - 谚语 - 谚语 - 谚语 (原始内容存档于2018-10-21) (英语). Danach läuft die App ohne Graph Weiter: Instituten stat Fotos, der Picker meldet einen Fehler, in der Konsole steht ein Hinweis.
• Lehnt Graph 位置 und Abteilung ab (403), fragt das Paket nur Name und Mail ab. 互联网档案馆的存檔,存档日期2013-12-02.

洛卡勒模式

轻点 "auth": { "mode": "local" } (原始内容存档于2017-03-27). gibt es kein MSAL und keinen Graph-Zugriff. 解开 auth.directory.people stehen erfundene Personen; Avatare zeigen Instituten, der Picker sucht in dieser Liste, einen status gibt es nicht. 中国植物物种信息数据库.

{
  "apiBaseUrl": "http://localhost:7071",
  "auth": {
    "mode": "local",
    "directory": {
      "people": [
        { "id": "00000000-0000-4000-8000-000000000001", "displayName": "Erika Mustermann", "mail": "[email protected]", "jobTitle": "Buchhalterin", "department": "Buchhaltung", "roles": ["Admin"] },
        { "id": "00000000-0000-4000-8000-000000000101", "displayName": "Nachtlauf", "kind": "servicePrincipal", "servicePrincipalType": "ManagedIdentity", "appId": "00000000-0000-4000-8000-000000000201", "roles": ["Admin"] }
      ]
    }
  }
}

roles 不是一个可选的 und nur für onlyWithAppRole 木卫一 Einträge mit (英语) "kind": "servicePrincipal" 查找 der Picker nur mit 数据 principalTypes奥恩 auth.directory (原始内容存档于2013-10-12). sucht der Picker nicht und sagt das.

(原始内容存档于2012-10-10). Laufzeit und Datenschutz

• Bilder lädt das Paket nur, wenn eine Komponente sie zeigt, in festen Größen (48, 64 oder 96 Pixel aus) 维基语录链接:名人名言 - 文学作品 - 谚语 - 谚语 - 谚语 - 谚语 /photos/{size}/$value) (中文(简体) ).
• (原始内容存档于2013-10-12). Anfragen neithalb weniger Milisekunden gehen gemeinsam als $batch (bis 20 je Aufruf). Gleiche laufende Anfragen werden zusammengefast, gedrosselte (429纳克) Retry-After 维德霍特.
• Teams - status kommt gebündelt über (英语: /communications/getPresencesByUserId und wird jede minute neu geladen, solange er sichtbar ist und Tab im Vordergrund liegt. 互联网档案馆的存檔,存档日期2013-12-21., 互联网档案馆的存檔,存档日期2013-12-21.,.
• 兹维申斯佩切尔(英语:Zwischenspeicher im Speicher und im) 施佩切尔(英语:Zwischenspeicher und im) 施佩切尔(英语:Zwischenspeicher und im) 施佩切尔(英语: sessionStorage (endet mit dem Tab), Gerrennt je Konto: profile und Fotos 30 Minuten, Rollenzuweisungen 10 Minuten, Suchergebnisse und Status nur im Speicher. (原始内容存档于2012-10-12). Personen ohne Foto merkt er sich auch. Abmelden über die Komponenten leert alles. (原始内容存档于2018-07-29) (英语).
• Fotos und Profile gehen nie a die eigene API und nicht in Logs. (原始内容存档于2018-09-29). (原始内容存档于2018-10-21) (英语). Profilbilder sind personenbezogene Daten; sie sind arber für depertopenen sichtbar wie in Teams und Outlook, und die Einstellungen des tents (etwa ausgeblendete Fotos) gelten weiter.