Überlegungen zum Webauthentifizierungsbroker für Onlineanbieter (HTML)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Als Authentifizierungsanbieter müssen Sie bestimmte Details beachten, wenn Sie Ihren Authentifizierungsdienst zur Nutzung durch Windows Store-Apps einrichten. Darüber hinaus können Sie die für den Benutzer der Windows Store-App angezeigte Webseite mit dem von Ihnen bevorzugten Markup anpassen.

Überlegungen für Onlineauthentifizierungsanbieter

Der Webauthentifizierungsbroker basiert auf denselben Technologien wie Internet Explorer in Windows. Aufgrund des sehr speziellen Verwendungszwecks dieser Komponente wurden aber einige Features von Internet Explorer deaktiviert oder bestimmte Konfigurationswerte gesperrt. Zudem bietet der Webauthentifizierungsbroker zur Behandlung von Problemen mit den verarbeiteten Seiten einen dedizierten Ereignisprotokollierungskanal.

Standarddokumentmodus von Internet Explorer

Der Webauthentifizierungsbroker zeigt alle Seiten im IE-Standards-Modus der jeweiligen Windows-Version an. In Windows 8 zeigt der Webauthentifizierungsbroker Seiten z. B. im "IE10-Standards-Modus" an. Mit den Entwicklertools in Internet Explorer können Sie überprüfen, wie Ihre Seite in verschiedenen Dokumentmodi funktioniert. Weitere Informationen zur Kompatibilität von Internet Explorer finden Sie in den MSDN-Themen zu Internet Explorer.

Deaktivierte und gesperrte Features

Mehrere Features von Internet Explorer sind entweder komplett deaktiviert, oder es sind bestimmte Werte gesperrt, die nicht in den Internetoptionen des Betriebssystems geändert werden können.

HTTPS-Anforderung

Die erste URL, die eine App zum Kommunizieren mit dem Onlineanbieter verwendet, muss eine HTTPS-Adresse sein.

Größe für verschiedene Ansichtszustände

Eine Windows 8-App kann in verschiedenen Größen, im Hoch- oder Querformat oder in einem Charm wie dem Charm "Teilen" angezeigt werden. Je nachdem, in welcher Ansicht der Webauthentifizierungsbroker angezeigt wird, kann sich die Größe, mit der die Webseiten arbeiten müssen, unterscheiden. Weitere Informationen finden Sie unter Richtlinien für Fenstergrößen und die Skalierung für Bildschirme und Richtlinien für das Teilen von Inhalten.

Die Webseite sollte die Größe mit CSS-Medienabfragen ermitteln und ihr Layout entsprechend anpassen. Die Seite sollte aber nicht auf Grundlage der hier dokumentierten genauen Pixelzahlen entworfen werden. Sie muss für unterschiedliche Größen skalierbar sein. Die in diesem Dokument angegebenen Größen können sich in zukünftigen Betriebssystemversionen ändern.

Falls der vorgesehene Platz auf einer Seite nicht für alle Informationen ausreicht (z. B. bei einer langen Liste von Berechtigungen, die eine App anfordert), stellt der Webauthentifizierungsbroker Bildlaufleisten bereit, damit der Benutzer per Bildlauf wie gewünscht die ganze Seite anzeigen kann. Das Zoomen ist bei Fingereingabegeräten durch Zusammendrücken und bei Desktop- und Laptop-PCs mit STRG+Mausrad möglich.

Mit der App Beispiel für einen Webauthentifizierungsbroker können Sie in Microsoft Visual Studio Professional 2012 verschiedene Ansichtsgrößen simulieren und so unterschiedliche Skalierungsfaktoren testen.

Beispielansicht

Das folgende Beispiel zeigt die Webauthentifizierungsbroker-UI mit der folgenden Webseitengröße:

• Breite: 260 Pixel
• Höhe: Bildschirmhöhe (abhängig von der Bildschirmauflösung)

Beachten Sie, dass die Webauthentifizierungsbroker-UI nur auf der rechten Seite der Bildschirmaufnahme zu sehen ist.

Charmansicht

Für die Charmansicht gilt folgende Webseitengröße:

• Breite: 566 Pixel
• Höhe: Bildschirmhöhe (abhängig von der Bildschirmauflösung)

Das folgende Beispiel zeigt die Webauthentifizierungsbroker-UI in der Charmansicht.

Dateiauswahlansicht

Für die Dateiauswahlansicht gilt folgende Webseitengröße:

• Breite: 566 Pixel
• Höhe: Bildschirmhöhe (abhängig von der Bildschirmauflösung)

Das folgende Beispiel zeigt die Webauthentifizierungsbroker-UI in der Dateiauswahlansicht.

Standardmäßig keine neuen Fenster

Für URLs werden standardmäßig keine neuen Fenster geöffnet. Sie werden stattdessen im Fenster des Webauthentifizierungsbrokers angezeigt. Dies gilt auch für die JavaScript-Methode "window.open", das "target"-Attribut der Links und die Verwendung des STRG+Klick-Mechanismus, mit dem Benutzer das Öffnen eines neuen Fensters erzwingen können. Einzige Ausnahme von dieser Regel: Eine Webseite deklariert einen Link wie unter "Anpassen des Linkziels" beschrieben als sicher für die Navigation im Browser.

Anpassen von Webauthentifizierungsseiten

Eine Webseite passt die Benutzeroberfläche (User Interface, UI) anhand der für die Webseite definierten Metadatentags mit dem Titel, dem Symbol und der Kopfzeilenfarbe an. Webentwickler können die Persönlichkeit und Marke des Anbieters mithilfe von HTML-<meta>-Tags in der Webauthentifizierungsbroker-UI darstellen. Außerdem können Entwickler kompliziertere Benutzeraktionen steuern, z. B. die Anmeldung und die Wiederherstellung von Kennwörtern. Das Konzept ähnelt dem Feature "Angeheftete Sites" von Windows Internet Explorer 9 und Windows 7.

Neben dem Anpassen der UI rund um den Webseitenbereich sollte die Webseite auch die Windows 8-Steuerelementstile nutzen, Fingereingabe unterstützen und ggf. das Öffnen von Links im Browser ermöglichen.

Das folgende Beispiel zeigt eine Webseite, bei der das Anpassungsmodell des Webauthentifizierungsbrokers genutzt wurde.

Anpassen des Symbols

Die Webseite kann mithilfe eines mswebdialog-logo-Metatags ein Symbol bereitstellen.

<meta name="mswebdialog-title" content="Contoso Social"/>

Der Inhalt ist eine URL, bei der es sich um eine relative oder eine absolute Seite handeln kann. Als URL-Schema kann HTTP oder HTTPS verwendet werden. Das Format der Datei muss PNG oder JPG sein. Das Bild sollte 30 x 30 Pixel groß sein. Im Fall einer anderen Bildgröße wird das Bild vom Betriebssystem auf 30 x 30 skaliert. Um Bildschirmen mit höherer Auflösung Rechnung zu tragen, sollte das Bild bei einer Skalierung bis zu 140 % und 180 % gut gerendert werden. Mit der App Beispiel für einen Webauthentifizierungsbroker können Sie in Visual Studio 11 im Fenster "Gerät" des Entwurfsmodus verschiedene Auflösungen und Skalierungsfaktoren simulieren und testen.

Anpassen des Titeltextes

Die Webseite kann den Titel mit dem mswebdialog-title-Metatag bereitstellen.

<meta name="mswebdialog-title" content="Contoso Social"/>

Der Titel sollte kurz sein und die Marke des Anbieters wiedergeben (z. B. Contoso).

Anpassen der Kopfzeilenfarbe

Die Webseite kann die Farbe, die die Markenidentität darstellt und für die Kopfzeile des Dialogfelds verwendet werden soll, mit dem mswebdialog-header-color-Metatag bereitstellen.

<meta name="mswebdialog-header-color" content="#1267DF"/>

Für die Farbe kann jeder der hier angegebenen Werte verwendet werden. Alphakanalwerte werden allerdings vom Webauthentifizierungsbroker ignoriert. Für diese Farbe und auf der Seite verwendete Farben im Allgemeinen wird empfohlen, die gleichen Farben wie in der Windows 8-App des Anbieters zu verwenden (sofern vorhanden).

Hinweis  Symbole und Farben werden pro Server auf dem Client zwischengespeichert, nachdem die META-Tags analysiert wurden. Löschen Sie den Clientcache vor dem Starten der UI, damit die Änderungen wirksam werden. Zu diesem Zweck ändern Sie die folgenden Registrierungseinstellungen.

// Registry location under HKLM used for setting various AuthHost parameters.
#define AUTH_HOST_LOCAL_MACHINE_REGPATH \
    L"SOFTWARE\\Microsoft\\Windows NT\\CurrentVersion\\Image File Execution Options\\authhost.exe"
// MaxAge to use for downloading logo images
#define AUTH_HOST_LOGO_IMAGE_MAX_AGE_SECONDS_REG_VALUE_NAME \
    L"LogoImageMaxAgeSeconds"
// 24 hours
#define AUTH_HOST_LOGO_IMAGE_MAX_AGE_SECONDS_DEFAULT        \
    (24 * 60 * 60)

Nachdem ein Symbol heruntergeladen wurde, wird es in den nächsten 24 Stunden nicht noch einmal abgerufen. Wenn Sie die Seite mit Logobildern testen möchten, legen Sie den obigen Registrierungsschlüssel auf einen niedrigeren Wert fest.

Anpassen der Webseite

Neben dem Anpassen der UI rund um die Webseite sollten Entwickler sicherstellen, dass sich ihre Webseiten nahtlos in die allgemeine Windows 8-Benutzeroberfläche integrieren. Dies beinhaltet die Verwendung der empfohlenen Stile, und es muss sichergestellt werden, dass Webseiten einwandfrei auf Fingereingabegeräten funktionieren und bestimmte Seiten im Webbrowser öffnen.

• Formatieren

  Damit die Benutzeroberfläche eine optische Einheit mit anderen Webauthentifizierungsbroker-Webseiten und UI-Komponenten von Windows 8 bildet, sollten unbedingt die hier empfohlenen Stile verwendet werden. Für die Webseite sollte ein weißer Hintergrund ohne Rahmen verwendet werden. Schaltflächen wie "Anmelden" oder "Abbrechen" sollten in der unteren rechten Ecke platziert werden und dieselbe Farbe wie die Kopfzeile haben. Da im Webauthentifizierungsbroker eine Schaltfläche "Zurück" verfügbar ist, sollte die Webseite ggf. gar keine Schaltfläche "Abbrechen" enthalten.

• Ermöglichen der Fingereingabe

  Bei der Entwicklung der Webseite muss die Benutzerinteraktion mittels Fingereingabe berücksichtigt werden. Weitere Informationen zum Entwerfen für die Toucheingabe in Windows 8 finden Sie unter Design für Interaktion per Toucheingabe.

• Anpassen des Linkziels

  Der Webauthentifizierungsbroker eignet sich hervorragend für Webseiten, bei denen nur eine Benutzeraktion erforderlich ist (z. B. die Anmeldung), oder OAuth-Autorisierungsseiten. Bei komplizierteren Benutzeraktionen (z. B. Kontoerstellung, Wiederherstellung eines verlorenen oder vergessenen Kennworts, Anzeige der Datenschutzbestimmungen usw.), bei denen davon ausgegangen wird, dass der Benutzer sich die Zeit nimmt, den Aktionsfluss zu verstehen und auszuführen, sollten die Seiten nach Möglichkeit im bevorzugten Browser des Benutzers geöffnet werden, um vollständige und umfassende Navigationsfunktionen zu unterstützen. Der Webauthentifizierungsbroker lässt das Öffnen neuer Browserfenster über eine Webseite standardmäßig nicht zu (weitere Informationen finden Sie im Abschnitt "Standardmäßig keine neuen Fenster"). Die Webseite kann aber mithilfe des mswebdialog-newwindowurl-Metatags deklarieren, welche URLs im Browser geöffnet werden sollen.

  Mit dem mswebdialog-newwindowurl-Metatag kann die Webseite eine URL oder einen URL-Teil angeben, die bzw. den der Webauthentifizierungsbroker jedes Mal abgleicht (Abgleich mit der Zeichenfolge auf der linken Seite), wenn er mit dem target-Attribut oder der window.open()-Methode aufgefordert wird, eine URL in einem neuen Fenster zu öffnen. Bei einer Übereinstimmung wird die URL im Standardbrowser des Benutzers geöffnet. Liegt keine Übereinstimmung vor, navigiert der Webauthentifizierungsbroker selbst zur URL (Standardverhalten). Beispiel: <meta name="mswebdialog-newwindowurl" content="https://www.contoso.com/privacy"/>

  Im Fall dieses Metatags öffnet der Webauthentifizierungsbroker die Seite "https://www.contoso.com/privacy/policy.html" im Browser, navigiert aber direkt zu "https://www.contoso.com/termsofuse.html". Dieses Metatag hat keinen Einfluss auf Links, die nicht versuchen, die Seite in einem neuen Fenster zu öffnen (z. B. Links ohne target-Attribut oder window.open()-Methode). Der Inhalt ist eine URL, bei der es sich um eine relative oder eine absolute Seite handeln kann. Als URL-Schema kann HTTP oder HTTPS verwendet werden. Definieren Sie nach Möglichkeit mswebdialog-newwindowurl-Metatags für alle Links, die nicht Teil des grundlegenden Benutzeraktionsflusses sind, z. B. Datenschutzbestimmungen, Anmeldeformulare usw. Falls Sie die Anmeldung mit einem Drittauthentifizierungsanbieter (z. B. OpenID-Anbieter) unterstützen, müssen die zugehörigen Interaktionen innerhalb des Webauthentifizierungsbrokers stattfinden. Wenn alle Links auf Ihrer Seite sicher für das Öffnen im Browser sein sollen, verwenden Sie eine Syntax mit Sternchen, z. B. <meta name="mswebdialog-newwindowurl" content="*"/>. Beachten Sie, dass das Sternchen (*) nur allein verwendet und nicht mit einer anderen URL kombiniert werden kann. "https://www.contoso.com/*" ist z. B. keine gültige Syntax.

Für alle Metatags geltende Regeln

Bei der Verarbeitung von Metatags durch den Webauthentifizierungsbroker gelten folgende Regeln:

• Das Metatag bzw. seine Auswirkung gilt für alle Seiten unter der jeweiligen Domäne der zweiten Ebene (z. B. "contoso.com"), sofern kein anderes Metatag mit demselben Namen und anderem Inhalt gefunden wird.
• Sind für eine Seite mehrere Metatags mit demselben Namen vorhanden, wendet der Webauthentifizierungsbroker nur eines der Tags an und ignoriert die übrigen. Welches Metatag in einem solchen Fall angewendet wird, ist nicht definiert. Hinweis  Diese Regel gilt nicht für das mswebdialog-newwindowurl-Metatag, bei dem mehrere Instanzen auf einer Seite möglich sind.  

Verwandte Themen

Webauthentifizierungsbroker

Beispiel für einen Webauthentifizierungsbroker

Windows.Security.Authentication.Web