Domänenübergreifende Bilder in vom Anbieter gehosteten SharePoint-Add-Ins
Domänenübergreifendes Verwenden von Images in vom Anbieter gehosteten Add-Ins.
Gilt für: SharePoint 2013 | SharePoint-Add-Ins | SharePoint Online
Möglicherweise möchten Sie Bilder von einer SharePoint-Website in Ihren vom Anbieter gehosteten Add-Ins anzeigen. Da vom Anbieter gehostete Add-Ins in einem Remoteweb ausgeführt werden, unterscheiden sich die Domänen für Ihr vom Anbieter gehostetes Add-In und Ihre SharePoint-Website. Ihr Add-In kann beispielsweise in Microsoft Azure ausgeführt werden, und Sie versuchen, ein Bild aus Office 365 anzuzeigen. Da Ihr vom Anbieter gehostetes Add-In domänenübergreifend auf das Image zugreifen kann, erfordert SharePoint eine Benutzerautorisierung, bevor das vom Anbieter gehostete Add-In das Bild anzeigt.
Das Core.CrossDomainImages-Codebeispiel zeigt, wie ein vom Anbieter gehostetes Add-In ein SharePoint-Zugriffstoken und einen REST-Dienst verwenden kann, um Bilder aus SharePoint abzurufen. Der REST-Dienst gibt eine Base64-codierte Zeichenfolge zurück, die verwendet wird, um das Bild im Browser anzuzeigen. Verwenden Sie die Lösung in diesem Beispiel, um Bilder anzuzeigen, die in SharePoint in vom Anbieter gehosteten Add-Ins gespeichert sind, indem Sie entweder serverseitigen oder clientseitigen Code verwenden.
Hinweis
Da im Beispiel ein REST-Endpunkt verwendet wird, können Sie entweder serverseitigen oder clientseitigen Code verwenden, um Ihr Image abzurufen.
Bevor Sie beginnen
Laden Sie zunächst das Beispiel-Add-In Core.CrossDomainImages aus dem Projekt Office 365 Developer patterns and practices auf GitHub herunter.
Verwenden des Core.CrossDomainImages-Codebeispiels
Wenn Sie dieses Beispiel ausführen, versucht Default.aspx Folgendes zu laden:
Abbildung 1 unter Verwendung der absoluten URL.
Abbildung 2: Mithilfe eines serverseitigen Aufrufs eines REST-Endpunkts, der eine Base64-codierte Zeichenfolge zurückgibt.
Abbildung 3: Mithilfe eines clientseitigen Aufrufs eines REST-Endpunkts, der eine Base64-codierte Zeichenfolge zurückgibt.
Hinweis
Bild 1 wird nicht gerendert, da das Add-In Domänen überschreitet, um auf das Bild in SharePoint zu gelangen. Beachten Sie, dass die URL des vom Anbieter gehosteten Add-Ins auf localhost ausgeführt wird. Öffnen Sie das Kontextmenü (Rechtsklick) für Bild 1, und wählen Sie dann Eigenschaften aus. Beachten Sie, dass die Adresse (URL) versucht, das Bild aus dem Add-In-Web abzurufen, nicht aus localhost. Da das vom Anbieter gehostete Add-In domänenübergreifend ist, um das Add-In-Web zu erreichen, ist eine Authentifizierung erforderlich, um auf das Image zuzugreifen. Stellen Sie sicher, dass der direkte Zugriff auf die URL von Image 1 im Gegensatz zum domänenübergreifenden Aufruf im vom Anbieter gehosteten Add-In ohne Fehler aufgelöst wird, indem Sie Adresse (URL) in ein neues Browserfenster kopieren und einfügen. Beachten Sie, dass Bild 1 ohne Fehler angezeigt wird. Vergleichen Sie die Quelle von Image 1 mit der Quelle von Image 2. Beachten Sie, dass die Adresse (URL) auf eine Base64-codierte Zeichenfolge verweist.
Wenn Default.aspx geladen wird, wird Page_Load ausgeführt und führt Folgendes aus:
Legt Image1.ImageUrl auf den absoluten Pfad des Bilds fest.
Instanziiert ImgService. ImgService ist ein REST-Endpunkt, der in derselben Domäne wie das vom Anbieter gehostete Add-In ausgeführt wird.
Legt Image2.ImageUrl auf die Base64-codierte Zeichenfolge fest, die ImgService.GetImage zurückgibt. Zugriffstoken, Website, Ordner und Dateiname werden als Parameter an ImgService.GetImage übergeben.
Hinweis
Der Code in diesem Artikel wird wie besehen und ohne jegliche Garantie zur Verfügung gestellt, gleich ob ausdrücklich oder konkludent, einschließlich jedweder stillschweigenden Gewährleistung der Eignung für einen bestimmten Zweck, Marktgängigkeit oder Nichtverletzung von Rechten.
protected void Page_Load(object sender, EventArgs e)
{
var spContext = SharePointContextProvider.Current.GetSharePointContext(Context);
using (var clientContext = spContext.CreateUserClientContextForSPAppWeb())
{
// Set the access token in a hidden field for client-side code to use.
hdnAccessToken.Value = spContext.UserAccessTokenForSPAppWeb;
// Set the URLs to the images.
Image1.ImageUrl = spContext.SPAppWebUrl + "AppImages/O365.png";
Services.ImgService svc = new Services.ImgService();
Image2.ImageUrl = svc.GetImage(spContext.UserAccessTokenForSPAppWeb, spContext.SPAppWebUrl.ToString(), "AppImages", "O365.png");
}
}
GetImage führt Folgendes aus:
Verwendet url zum Speichern des GetFolderByServerRelativeUrl-REST-Endpunkt-URI, der zum Abrufen des Bilds aus SharePoint verwendet wird. Weitere Informationen finden Sie unter Rest-API-Referenz für Dateien und Ordner.
Instanziiert ein HttpWebRequest-Objekt mithilfe der URL .
Fügt dem HttpWebRequest-Objekt, das das Zugriffstoken enthält, einen Authorization-Header hinzu.
Nachdem der GET-Aufruf an den Endpunkt-URI erfolgt ist, ist der zurückgegebene Stream eine Base64-codierte Zeichenfolge. Die zurückgegebene Zeichenfolge wird auf das src-Attribut des Bilds festgelegt.
public string GetImage(string accessToken, string site, string folder, string file)
{
// Create the HttpWebRequest to call the REST endpoint.
string url = String.Format("{0}_api/web/GetFolderByServerRelativeUrl('{1}')/Files('{2}')/$value", site, folder, file);
HttpWebRequest request = WebRequest.Create(url) as HttpWebRequest;
request.Headers.Add("Authorization", "Bearer" + " " + accessToken);
using (HttpWebResponse response = request.GetResponse() as HttpWebResponse)
{
using (var sourceStream = response.GetResponseStream())
{
using (var newStream = new MemoryStream())
{
sourceSteam.CopyTo(newStream);
byte[] bytes = newStream.ToArray();
return "data:image/png;base64, " + Convert.ToBase64String(bytes);
}
}
}
}
Nachdem Page_Load abgeschlossen ist, führt Default.aspx den clientseitigen Code in Default.aspx aus, wodurch Image 3 geladen wird. Der clientseitige Code ruft GetImage mithilfe von jQuery Ajax auf. Wenn GetImage die Base64-codierte Zeichenfolge erfolgreich zurückgibt, wird das src-Attribut auf Image3 auf die zurückgegebene Zeichenfolge festgelegt.
...
$.ajax({
url: '../Services/ImgService.svc/GetImage?accessToken=' + $('#hdnAccessToken').val() + '&site=' + encodeURIComponent(appWebUrl + '/') + '&folder=AppImages&file=O365.png',
dataType: 'json',
success: function (data) {
$('#Image3').attr('src', data.d);
},
error: function (err) {
alert('error occurred');
}
});
...