Einrichten und Konfigurieren der SharePoint Embedded-Umgebung und des Web-App-Projekts
In dieser Übung erstellen Sie ein Projekt, das eine server- und clientseitige Komponente enthält. Die serverseitige Komponente ist eine REST-API, die sich mit der Microsoft Entra-ID authentifiziert und über die Microsoft Graph-API auf SharePoint Embedded-Container zugreift. Die clientseitige Komponente ist eine Einseiten-React-App, die die REST-API aufruft, die den Inhalt des SharePoint Embedded-Containers verfügbar macht.
Am Ende dieser Übung verfügen Sie über ein Vorlagenprojekt, mit dem Sie in den folgenden Abschnitten weitere Funktionen hinzufügen können.
Aktivieren von SharePoint Embedded in Ihrem Microsoft 365 SharePoint Online-Mandanten
Um SharePoint Embedded zum Erstellen und Registrieren von Containertypen zu verwenden, müssen Sie es zuerst auf Ihrem SharePoint Online-Mandanten aktivieren. Dieser Prozess muss sowohl für den Anbieter als auch für die nutzenden Mandanten erfolgen, in denen Sie Ihre Anwendung definieren, sowie für alle nutzenden Mandanten, die Ihre SharePoint Embedded-App verwenden.
Hinweis
Sie können denselben SharePoint Online-Mandanten sowohl als Anbieter/Entwickler als auch als Nutzen-Mandant verwenden.
Das Aktivieren von SharePoint Embedded auf einem SharePoint Online-Mandanten ist ein unidirektionales Verfahren. sie kann nicht deaktiviert werden. Dadurch wird sichergestellt, dass alle Apps, die Sie auf dem nutzenden Mandanten erstellt haben, weiterhin funktionieren.
Nachdem Sie SharePoint Embedded auf einem SharePoint Online-Mandanten aktiviert haben, können Sie einen Containertyp in Ihrem Anbietermandanten erstellen und den Containertyp in einem nutzenden Mandanten registrieren.
Um SharePoint Embedded zu aktivieren, navigieren Sie zum Microsoft 365 Admin Center (https://portal.microsoft.com), und melden Sie sich mit dem Administratorkonto Ihres Microsoft 365-Mandanten an.
Wählen Sie unten im linken Navigationsbereich Alle anzeigen und dann Admin Center > SharePoint aus.
Wählen Sie als Nächstes im SharePoint Admin Center im linken Navigationsbereich Einstellungen aus. Suchen Sie SharePoint Embedded, und wählen Sie es aus. Überprüfen Sie die Nutzungsbedingungen, und wählen Sie Aktivieren aus, um sie in Ihrem SharePoint Online-Mandanten zu aktivieren.
Erstellen einer Microsoft Entra ID-Anwendung
Erstellen Sie zunächst die Microsoft Entra ID-Anwendung. Dies wird verwendet, um sich zu authentifizieren und die erforderlichen Berechtigungen zum Aufrufen der Microsoft Graph- und Microsoft SharePoint-APIs zu erhalten.
Öffnen Sie einen Browser, und navigieren Sie zum Microsoft Entra Admin Center (https://entra.microsoft.com). Melden Sie sich mit einem Geschäfts-, Schul- oder Uni-Konto an, das über globale Administratorrechte für den Mandanten verfügt.
Wählen Sie im linken Navigationsbereich > App-Registrierungen verwalten und dann Neue Registrierungaus.
Legen Sie auf der Seite Anwendung registrieren die Werte wie folgt fest, und wählen Sie dann Registrieren aus:
- Name: My SharePoint Embedded
- Unterstützte Kontotypen: Nur Konten in diesem Organisationsverzeichnis (nur Andrew Connell Inc. – Einzelner Mandant)
Microsoft Entra ID zeigt dann die Details der neuen App an. Erstellen Sie eine Textdatei, um mehrere Werte nachzuverfolgen, die Sie später in diesem Modul benötigen. Kopieren Sie die Anwendungs-ID (Client-ID) & Verzeichnis-ID (Mandant) von der Übersichtsseite der App in die Textdatei.
Konfigurieren einer Authentifizierung
Als Nächstes konfigurieren Sie die Authentifizierungseinstellungen der App. Wählen Sie im linken Navigationsbereich > Authentifizierung verwalten aus.
Wählen Sie Plattform hinzufügen und dann Single-Page-Anwendung aus.
Legen Sie im Bereich Single-Page-Anwendung konfigurieren die Umleitungs-URIs auf fest http://localhost:3000 , und wählen Sie Konfigurieren aus.
Konfigurieren von API-Berechtigungen
Legen Sie als Nächstes die Berechtigungen fest, die die App benötigt, damit sie Containertypen und Container erstellen und darauf zugreifen kann.
Hinweis
Zum Zeitpunkt der Veröffentlichung dieses Moduls während der öffentlichen Vorschau von SharePoint Embedded sind die beiden Berechtigungen, die die App benötigt, noch nicht in der Liste der Berechtigungen auf der auszuwählenden Microsoft Entra ID-Weboberfläche sichtbar. Um diese Einschränkung zu umgehen, fügen Sie sie manuell zum Manifest der App hinzu.
Suchen Sie auf der Seite Manifest verwalten > die Eigenschaft requiredResourceAccess.
Die vorhandene Ressource, bei der auf resourceAppId00000003-0000-0000-c000-000000000000 festgelegt ist, ist Microsoft Graph. Fügen Sie die folgende Anwendung & delegierte Berechtigung für den Bereich FileStorageContainer.Selected hinzu. Die vorhandene Berechtigung, die bereits vorhanden ist, gilt für den User.Read-Bereich .
{
"resourceAppId": "00000003-0000-0000-c000-000000000000",
"resourceAccess": [
{
"id": "085ca537-6565-41c2-aca7-db852babc212",
"type": "Scope"
},
{
"id": "40dc41bc-0f7e-42ff-89bd-d9516947e474",
"type": "Role"
}
]
}
Fügen Sie als Nächstes eine neue resourceAppId für SharePoint hinzu, deren ID lautet 00000003-0000-0ff1-ce00-000000000000, und fügen Sie die folgende Anwendung & delegierten Berechtigungen für den Bereich Container.Selected hinzu:
{
"resourceAppId": "00000003-0000-0ff1-ce00-000000000000",
"resourceAccess": [
{
"id": "4d114b1a-3649-4764-9dfb-be1e236ff371",
"type": "Scope"
},
{
"id": "19766c1b-905b-43af-8756-06526ab42875",
"type": "Role"
}
]
},
Hinzufügen einer benutzerdefinierten Berechtigung zur Microsoft Entra ID-App
Fügen Sie der Anwendung als Nächstes eine benutzerdefinierte Berechtigung hinzu, damit ein Administrator den Benutzer auffordern kann, der App das Verwalten von Containern zu erlauben.
Wählen Sie auf der Seite Verwalten > Eine API verfügbar machen den Link Festlegen neben dem Anwendungs-ID-URI aus. Dadurch wird die ID der App standardmäßig auf api://<app-id> festgelegt.
Wählen Sie anschließend Bereich hinzufügen aus, um eine neue Berechtigung für die App hinzuzufügen. Erstellen Sie einen neuen Bereich mit den folgenden Einstellungen, und wählen Sie dann Bereich hinzufügen aus:
- Bereichsname: Container.Manage
- Wer kann zustimmen? Nur Administratoren
- Administrator (& Benutzer) Zustimmungstitel: Verwalten von SharePoint Embedded-Containern.
- Beschreibung der Administratoreinwilligung (& Benutzer): Die Anwendung kann die API dieser App aufrufen, um SharePoint Embedded Storage-Container zu verwalten.
- Status: Aktiviert
In der Web-API fügen Sie Code hinzu, um sicherzustellen, dass diese Berechtigung für die Anwendung erteilt wurde.
Erteilen der Administratoreinwilligung für die neuen Berechtigungen
Einige der Berechtigungen erfordern die Administratoreinwilligung. Scrollen Sie auf der Seite API-Berechtigungen zum Ende der Seite, und wählen Sie den Link Unternehmensanwendungen aus.
Wählen Sie auf der Seite Berechtigungen die Option Administratoreinwilligung für Contoso erteilen und dann die Aufforderung zum Erteilen der Administratoreinwilligung für die beiden Berechtigungspaare akzeptieren : FileStorageContainer.Selected für Microsoft Graph und Container.Selected für SharePoint. Die beiden Paare stellen die Anwendung & delegierten Optionen für jede der beiden Berechtigungen dar.
Erstellen eines geheimen Clientschlüssels
Damit sich eine App mit dem OAuth2-Clientanmeldeinformationsflow mit Microsoft Entra ID authentifizieren kann, benötigt sie sowohl die Client-ID als auch einen geheimen Clientschlüssel.
Wählen Sie im linken Navigationsbereich > Zertifikate und Geheimnisse verwalten aus.
Wählen Sie auf der Seite Zertifikate & Geheimnisse die Registerkarte Geheime Clientschlüssel und dann Neuer geheimer Clientschlüssel aus. Legen Sie eine Beschreibung fest, wählen Sie eine Ablaufdauer aus, und wählen Sie dann Hinzufügen aus.
Wenn das Geheimnis erstellt wird, wird es einmal angezeigt. Stellen Sie daher sicher, dass Sie es als geheimen Clientschlüssel in Ihre lokale Textdatei kopieren und später in diesem Modul verwenden können. Wenn Sie diesen Wert nicht kopieren, müssen Sie einen neuen geheimen Schlüssel erstellen, da ein zuvor erstellter geheimer Schlüssel nicht mehr angezeigt werden kann.
Erstellen des Containertyps
Der letzte Schritt besteht darin, einen neuen Containertyp zu erstellen. Dies kann mithilfe des SharePoint Online PowerShell-Moduls erfolgen. Stellen Sie sicher, dass die neueste Version installiert ist, indem Sie entweder installieren...
Install-Module "Microsoft.Online.SharePoint.PowerShell"
... oder indem Sie die zuvor installierte Version aktualisieren, um sicherzustellen, dass Sie über die neueste Version verfügen...
Update-Module "Microsoft.Online.SharePoint.PowerShell"
Sobald Sie über die neueste Version verfügen, stellen Sie eine Verbindung mit Ihrer SharePoint Online-Website her, und erstellen Sie einen neuen Containertyp:
Aktualisieren Sie die folgenden Werte im folgenden PowerShell-Skript, und führen Sie dann das Skript aus:
-
{{SPO_ADMIN_URL}}: Dies ist die URL Ihres SharePoint Online Admin Centers. Sie können dies erhalten, indem Sie sich beim Microsoft 365-Portal anmelden (https://portal.microsoft.com) wählen Sie mit dem Geschäfts-, Schul- und Unikonto des Administratorkontos Ihres Mandanten die Option Alle anzeigen unten im linken Navigationsbereich und dann Admin Center > SharePoint aus. Kopieren Sie die URL des SharePoint Admin Centers, und verwenden Sie diesen Wert. Wenn Ihre Mandanten-ID beispielsweise Contoso123 lautet, lautethttps://contoso123-admin.sharepoint.comIhre Administrator-URL . -
{{CONTAINER_TYPE_NAME}}: Wählen Sie einen Namen für Ihren neuen Containertyp aus. Verwenden SieMyFirstSpeContainerTypebeispielsweise . -
{{AZURE_ENTRA_APP_ID}}: Legen Sie dies auf den Wert der Microsoft Entra ID-App-ID fest, der auch als "Client-ID" bezeichnet wird, die Sie zuvor erstellt haben. Dieser Wert sollte sich in Ihrer lokalen Textdatei befinden.
Import-Module "Microsoft.Online.SharePoint.PowerShell"
Connect-SPOService -Url "https://{{SPO_ADMIN_URL}}"
New-SPOContainerType -TrialContainerType
-ContainerTypeName "{{CONTAINER_TYPE_NAME}}"
-OwningApplicationId "{{AZURE_ENTRA_APP_ID}}"
Das PowerShell-Skript zeigt die Details für Ihren neuen Containertyp an, z. B.:
Container Type ID:
===============================================================================
ContainerTypeId : 1e59a44b-b77e-051e-3cba-dbf83007b520
ContainerTypeName : MyFirstSpeContainerType
OwningApplicationId : 520e6e65-1143-4c87-a7d3-baf242915dbb
Classification : Trial
AzureSubscriptionId : 00000000-0000-0000-0000-000000000000
ResourceGroup :
Region :
Kopieren Sie die ContainerTypeId lokale Textdatei zur späteren Verwendung.
Registrieren des Containertyps beim Verbrauch des Mandanten
Schließlich müssen Sie im letzten Schritt den Containertyp (der derzeit im Anbietermandanten definiert ist) in den Consumermandanten registrieren. Dies gilt sowohl für Einzelmandantenanwendungen als auch für mehrinstanzenfähige Anwendungen und stellt sicher, dass nur bestimmte Anwendungen Zugriff auf die Container in ihrem Mandanten haben.
Wenn dieser Schritt nicht abgeschlossen ist, erhält die SharePoint Embedded-Anwendung beim Versuch eines Vorgangs mit einem Container einen Fehler vom Typ Zugriffsverweigerung .
Registrieren Sie einen Containertyp mit der SharePoint Online-REST-API. Die SharePoint Online-REST-API erfordert, dass sich eine Anwendung mit einem Zertifikat und nicht nur mit einem geheimen Clientschlüssel authentifiziert.
Erstellen eines selbstsignierten Zertifikats
Erstellen Sie zunächst mithilfe des PowerShell-Cmdlets ein neues selbstsigniertes New-SelfSignedCertificate Zertifikat. Aktualisieren Sie die folgenden Werte im folgenden PowerShell-Skript, und führen Sie dann das Skript aus:
-
{{CERT NAME}}: Der Name des Zertifikats. Dies kann alles sein, was Ihnen gefällt. -
{{CERT_PATH}}: Der vollqualifizierte Pfad zum Speicherort der Datei *.cer , z. B. c:\mycert.cer.
$cert = New-SelfSignedCertificate -Subject "CN={{CERT_NAME}}" -CertStoreLocation "Cert:\CurrentUser\My" -KeyExportPolicy Exportable -KeySpec Signature -KeyLength 2048 -KeyAlgorithm RSA -HashAlgorithm SHA256
Export-Certificate -Cert $cert -FilePath "{{CERT_PATH}}" -Force
# Private key to Base64
$privateKey = [System.Security.Cryptography.X509Certificates.RSACertificateExtensions]::GetRSAPrivateKey($cert)
$privateKeyBytes = $privateKey.Key.Export([System.Security.Cryptography.CngKeyBlobFormat]::Pkcs8PrivateBlob)
$privateKeyBase64 = [System.Convert]::ToBase64String($privateKeyBytes, [System.Base64FormattingOptions]::InsertLineBreaks)
$privateKeyString = @"
-----BEGIN PRIVATE KEY-----
$privateKeyBase64
-----END PRIVATE KEY-----
"@
# Print private key to output
Write-Host $privateKeyString
Speichern Sie den Wert des privaten Schlüssels im Base64-Format, das auch als PEM-Format bezeichnet wird, in einer neuen *.key-Datei mit dem gleichen Namen wie die generierte *.cer-Datei .
Wichtig
Der Inhalt der Datei muss die -----BEGIN PRIVATE KEY----- Zeichenfolgen und -----END PRIVATE KEY----- enthalten.
Wählen Sie auf der Seite Zertifikate & Geheimnisse verwalten >die Option Zertifikate und dann Zertifikat hochladen aus. Wählen Sie die Datei *.cer und dann Hinzufügen aus.
Kopieren Sie nach dem Hochladen des Zertifikats den Fingerabdruck , der im Microsoft Entra ID-Portal auf der Seite Zertifikate & Geheimnisse angezeigt wird:
Registrieren des Containertyps im Consumermandanten
Registrieren Sie als Nächstes den Containertyp mithilfe des SharePoint-REST-Endpunkts /_api/v2.1/storageContainerTypes/{{ContainerTypeId}}/applicationPermissions beim Mandanten des Consumers. Das SharePoint Embedded-Team hat dies vereinfacht, indem es eine Postman-Sammlung mit vielen Beispielen zum Aufrufen der verschiedenen SharePoint Online & Microsoft Graph-Endpunkte bereitstellt.
Suchen Sie im Repository SharePoint Embedded Samples nach der Postman-Sammlung, rufen Sie die unformatierte URL ab, und importieren Sie sie als neue Sammlung in Postman:
Beachten Sie, dass die Übersicht über die Sammlung eine Reihe von Dokumentationen enthält. Ein wichtiger Abschnitt behandelt das Erstellen einer Postman-Umgebungsdatei, um das Festlegen der erforderlichen Werte zu vereinfachen. Ich habe bereits eine erstellt und muss nur die Werte auffüllen:
- ClientID: Die Anwendung oder Client-ID der Microsoft Entra ID-Anwendung.
- ClientSecret: Der geheime Clientschlüssel der Microsoft Entra ID-Anwendung.
- ConsumingTenantId: Die ID des Microsoft 365-Mandanten des Consumermandanten, auf den Sie abzielen möchten.
- TenantName: Der Name Ihres Mandanten. Dies ist ein Unterdomänenteil Ihrer SharePoint Online-Website.
- RootSiteUrl: Die Stamm-URL Ihres Mandanten.
- ContainerTypeID: Die GUID des Containertyps, der im Anbietermandanten erstellt wurde.
- CertThumbprint: Der Fingerabdruck des Zertifikats Microsoft Entra ID, der nach dem erfolgreichen Hochladen des Zertifikats in die Microsoft Entra ID-Anwendung angezeigt wird.
- CertPrivateKey: Der private Schlüssel des Zertifikats. Dies ist der Schlüssel im PEM-Format.
Nachdem die Postman-Sammlung und -Umgebung eingerichtet wurden, führen Sie die Anforderung ContainerType registrieren im Ordner Anwendungscontainer > aus . Nach Abschluss der Anforderung kann die App, die Sie im restlichen Teil dieses Moduls erstellen, Speichercontainer in meinem Microsoft 365-Mandanten verwalten und darauf zugreifen.
Erstellen einer Web-App für den Zugriff auf SharePoint Embedded-Container
Beim Einrichten von SharePoint Embedded im Anbieter- und Consumermandanten, einschließlich des Erstellens und Registrierens des Containertyps, besteht der nächste Schritt darin, die Anwendung zu erstellen. Diese Anwendung besteht aus zwei Projekten:
- Ein Webprojekt zum Erstellen und Rendern der React SPA-Front-End-App
- Eine serverseitige API zum Hosten der Methoden, die einen vertraulichen Client erfordern, der Vorgänge ausführt, die nicht über die Client-App ausgeführt werden können.
Beginnen wir mit dem Erstellen des Front-End-Teils des Projekts:
Erstellen einer Front-End-Anwendung
Navigieren Sie über eine Befehlszeile zu dem Ordner, in dem Sie die Anwendung erstellen möchten, und führen Sie den folgenden Befehl aus:
npx create-react-app my-first-spe-app --template typescript
Installieren Sie als Nächstes npm-Pakete, die die SPA-Benutzeroberfläche und die Authentifizierung mit Microsoft Entra ID vereinfachen. Navigieren Sie über die Befehlszeile in den Ordner my-first-spe-app , der mit dem vorherigen Befehl erstellt wurde, und führen Sie den folgenden Befehl aus:
npm install @azure/msal-browser @fluentui/react-components @fluentui/react-icons @microsoft/mgt-react @microsoft/mgt-element @microsoft/mgt-msal2-provider -SE
Mit diesem Befehl werden die folgenden npm-Pakete installiert:
- @azure/msal-browser: Wird für die Authentifizierung mit der Microsoft Entra-ID verwendet.
- @microsoft/mgt-element, @microsoft/mgt-react, & @microsoft/mgt-msal2-provider: Das Microsoft Graph Toolkit, das Benutzeroberflächenkomponenten für React enthält.
- @fluentui/react-components & @fluentui/react-icons: Ui-Komponenten aus der Fluent UI v9-Bibliothek.
Erstellen einer Back-End-Anwendung
Erstellen Sie als Nächstes das erforderliche Gerüst für den API-Server, und fügen Sie es hinzu. Führen Sie zunächst den folgenden Befehl aus, um weitere npm-Pakete zu installieren:
npm install restify @azure/msal-node @microsoft/microsoft-graph-client isomorphic-fetch jsonwebtoken jwks-rsa -SE
npm install @types/restify @types/jsonwebtoken @types/isomorphic-fetch -DE
Mit diesem Befehl werden die npm-Pakete installiert:
- restify & @types/restify: Ein Node.js-Basis-API-Server und zugehörige Typdeklarationen für TypeScript.
- @azure/msal-node: Wird für die Authentifizierung mit der Microsoft Entra-ID verwendet.
- @microsoft/microsoft-graph-client: Microsoft Graph JavaScript SDK.
-
isomorphic-fetch: Polyfill, das die Browser-API
fetchals global hinzufügt, sodass die API zwischen dem Client & Server konsistent ist. - jsonwebtoken: Implementierung von JSON-Webtoken.
- jwks-rsa: Bibliothek zum Abrufen von Signaturschlüsseln von einem JWKS-Endpunkt (JSON Web Key Set).
Fügen Sie eine TypeScript-Compilerkonfiguration für das serverseitige Projekt hinzu:
Erstellen Sie eine neue Datei , ./server/tsconfig.json-Projekt , und fügen Sie ihr den folgenden Code hinzu. Dadurch wird der TypeScript-Compiler für den serverseitigen API-Teil dieses Projekts konfiguriert.
{ "$schema": "http://json.schemastore.org/tsconfig", "compilerOptions": { "target": "ES2015", "module": "commonjs", "lib": [ "es5", "es6", "dom", "es2015.collection" ], "esModuleInterop": true, "moduleResolution": "node", "strict": true } }
Fügen Sie als Nächstes diesem Projekt einen Platzhalter für die serverseitige API hinzu.
Erstellen Sie eine neue Datei (./server/index.ts), und fügen Sie ihr den folgenden Code hinzu:
import * as restify from "restify"; const server = restify.createServer(); server.use(restify.plugins.bodyParser()); server.listen(process.env.port || process.env.PORT || 3001, () => { console.log(`\nAPI server started, ${server.name} listening to ${server.url}`); }); // add CORS support server.pre((req, res, next) => { res.header('Access-Control-Allow-Origin', req.header('origin')); res.header('Access-Control-Allow-Headers', req.header('Access-Control-Request-Headers')); res.header('Access-Control-Allow-Credentials', 'true'); if (req.method === 'OPTIONS') { return res.send(204); } next(); });
Dadurch wird ein neuer Restify-Server erstellt, für das Lauschen auf Anforderungen an Port 3001 konfiguriert und CORS auf dem Server aktiviert.
Hinzufügen globaler Projekteinstellungen und -konstanten
Fügen Sie als Nächstes einige Konstanten hinzu, um Ihre Bereitstellungseinstellungen zu speichern.
Erstellen Sie eine neue Datei ( ./.env), um Einstellungen für Ihren API-Server zu speichern. Fügen Sie Folgendes zur Datei hinzu:
API_ENTRA_APP_CLIENT_ID= API_ENTRA_APP_CLIENT_SECRET= API_ENTRA_APP_AUTHORITY= CONTAINER_TYPE_ID=Erstellen Sie eine neue Datei ./src/common/constants.ts , um Einstellungen für Ihre clientseitige App zu speichern. Fügen Sie Folgendes zur Datei hinzu:
export const CLIENT_ENTRA_APP_CLIENT_ID = ''; export const CLIENT_ENTRA_APP_AUTHORITY = ''; export const API_SERVER_URL = ''; export const CONTAINER_TYPE_ID = '';
Aktualisieren Sie die Werte in diesen beiden Dateien mithilfe der folgenden Anleitung:
- API_ENTRA_APP_CLIENT_ID: Dies ist die Anwendungs-ID (Client-ID) der Microsoft Entra ID-Anwendung, die Sie zuvor erstellt haben.
- API_ENTRA_APP_CLIENT_SECRET: Dies ist das Anwendungsgeheimnis (Client) der Microsoft Entra ID-Anwendung, die Sie zuvor erstellt haben.
-
API_ENTRA_APP_AUTHORITY: Dies ist die Autorität der Microsoft Entra ID-Anwendung. Verwenden Sie
https://login.microsoftonline.com/{{MS-ENTRA-TENANT-ID}}/. Die Mandanten-ID ist die ID des Microsoft Entra ID-Mandanten, in dem die Anwendung zuvor erstellt wurde. -
API_SERVER_URL: Dies ist die URL des serverseitigen API-Servers. Verwenden Sie
http://localhost:3001. - CLIENT_ENTRA_APP_CLIENT_ID: Dies ist die Anwendungs-ID (Client) der Microsoft Entra ID-Anwendung, die Sie zuvor erstellt haben.
Fügen Sie abschließend die neue Datei ./src/common/scopes.ts hinzu, um eine Liste von OAuth2-Bereichen (Berechtigungen) zu speichern, die wir in der clientseitigen Anwendung verwenden werden:
// microsoft graph scopes
export const GRAPH_USER_READ = 'User.Read';
export const GRAPH_USER_READ_ALL = 'User.Read.All';
export const GRAPH_FILES_READ_WRITE_ALL = 'Files.ReadWrite.All';
export const GRAPH_SITES_READ_ALL = 'Sites.Read.All';
export const GRAPH_OPENID_CONNECT_BASIC = ["openid", "profile", "offline_access"];
// SharePoint Embedded scopes
export const SPEMBEDDED_CONTAINER_MANAGE= 'Container.Manage';
export const SPEMBEDDED_FILESTORAGECONTAINER_SELECTED= 'FileStorageContainer.Selected';
Erstellen Sie einen Kopierer dieser Datei für den API-Server. Speichern Sie die kopierte Datei am folgenden Speicherort im Projekt: ./server/common/scopes.ts.
Konfigurieren des Projektbuilds
Nehmen wir nun einige Änderungen am Projekt vor, um Builds und Tests zu vereinfachen.
Aktualisieren Sie die Skripts, um die Erstellung der Projekte zu vereinfachen:
Öffnen Sie eine Eingabeaufforderung, legen Sie den aktuellen Ordner auf den Stamm Ihres Projekts fest, und führen Sie den folgenden Befehl aus, um einige npm-Pakete zu installieren, die in der Entwicklung verwendet werden:
npm install env-cmd npm-run-all -DESuchen Und öffnen Sie die Datei ./package.json , und aktualisieren Sie den
scriptsAbschnitt wie folgt:"scripts": { "build:backend": "tsc -p ./server/tsconfig.json", "start": "run-s build:backend start:apps", "start:apps": "run-p start:frontend start:backend", "start:frontend": "npm run start-cre", "start:backend": "env-cmd --silent -f .env node ./server/index.js", "start-cre": "react-scripts start", "build-cre": "react-scripts build", "test-cre": "react-scripts test", "eject-cre": "react-scripts eject" },
In der folgenden Liste wird die Funktionsweise der Skripts erläutert:
- Alle standardmäßigen Create-react-app-Skripts (CRE) wurden aktualisiert, um das Suffix -cre in ihren Namen aufzunehmen, um anzugeben, dass sie der create-react-app zugeordnet sind.
- Das Startskript verwendet die run-s-Methode aus dem npm-run-all-Paket , um zwei Skripts sequenziell auszuführen:
- Zuerst wird das Buildskript ausgeführt, um das gesamte Projekt von TypeScript in JavaScript zu transpilieren.
- Anschließend wird das Skript start:apps ausgeführt.
- Das Start:apps-Skript führt die start:frontend -& start:backend-Skripts parallel mit der run-p-Methode aus dem npm-run-all-Npm-Paket aus.
- Das start:backend-Skript verwendet das npm-Paket env-cmd , um die Umgebungsvariablen in die ./.env-Datei in den API-Serverprozess einzufügen.
An diesem Punkt verfügen Sie über ein Vorlagenprojekt, mit dem Sie in den folgenden Abschnitten weitere Funktionen hinzufügen können.
Zusammenfassung
In dieser Übung haben Sie ein Projekt erstellt, das eine server- und clientseitige Komponente enthält. Die serverseitige Komponente ist eine REST-API, die sich mit der Microsoft Entra-ID authentifiziert und über die Microsoft Graph-API auf SharePoint Embedded-Container zugreift. Die clientseitige Komponente ist eine Einseiten-React-App, die die REST-API aufruft, die den Inhalt des SharePoint Embedded-Containers verfügbar macht.