Erste Schritte mit dem privaten Einbetten

Auf dieser Seite erfahren Sie, wie Sie private Einbettung einrichten. Für die private Einbettung müssen Sie das <iframe> HTML-Element direkt verwalten, um Ihre Looker-Inhalte einzubetten. Außerdem muss sich der Nutzer separat von der Hostanwendung in Looker anmelden.

Wir gehen dieses Codebeispiel für die private Einbettung durch:

<iframe
    src="https://instance.looker.com/embed/dashboards/4?Timeframe=14+day"
    width="600"
    height="300"
    frameborder="0">
</iframe>

1. URL für eingebettete Inhalte erstellen

Nehmen wir als Beispiel Looker-Inhalte unter der URL https://instance.looker.com/dashboards/4?theme=red&Timeframe=14+day. Aus dieser Looker-Inhalts-URL erstellen wir die URL für eingebettete Inhalte und legen das src-Attribut des iFrames darauf fest. Sie können Ihre eigene Looker-Inhalts-URL verwenden, während Sie diese Schritte durchgehen.

Die URL für eingebettete Inhalte aus dem vorherigen Codebeispiel lautet:

https://instance.looker.com/embed/dashboards/4?theme=red&Timeframe=14+day

Die URL für eingebettete Inhalte besteht aus drei Teilen:

  • Hostname: der Hostname Ihrer Looker-Instanz
  • Pfad: URL-Pfad für Looker-Inhalte mit dem Präfix /embed (mit zusätzlichen Schritten für Abfragevisualisierungen)
  • Parameter: URL-Parameter, die Filter und Designs angeben

Das Protokoll muss immer https:// sein. Wir erstellen jeden Teil im Detail.

Teil 1: Hostname

  1. Rufen Sie Ihre Looker-Inhalte auf. Beispiel für eine Looker-Inhalts-URL: https://instance.looker.com/dashboards/4?theme=red&Timeframe=14+day.
  2. Der Hostname Ihrer URL für eingebettete Inhalte ist instance.looker.com.

Teil 2: Pfad

Der Pfad Ihrer URL für eingebettete Inhalte hängt von den Looker-Inhalten ab, die Sie einbetten.

Alle Looker-Inhalte außer Abfragevisualisierungen einbetten

  1. Rufen Sie Ihre Looker-Inhalte auf. Beispiel für eine Looker-Inhalts-URL: https://instance.looker.com/dashboards/4?theme=red&Timeframe=14+day
  2. Ermitteln Sie den Pfad Ihrer Looker-Inhalts-URL: /dashboards/4.
  3. Fügen Sie dem Pfad Ihrer Looker-Inhalts-URL das Präfix /embed hinzu. Der Pfad Ihrer URL für eingebettete Inhalte ist /embed/dashboards/4.

Abfragevisualisierung einbetten

  1. Rufen Sie Ihre Abfragevisualisierung auf. Beispiel-URL: instance.looker.com/explore/my_model/my_explore?qid=1234567890abcdefghij12
  2. Ermitteln Sie die Client-ID Ihrer Abfrage. Der Parameter qid: 1234567890abcdefghij12 ist die Client-ID Ihrer Abfrage, die die Abfrage und die Visualisierungseinstellungen darstellt.
  3. Der Pfad Ihrer URL für eingebettete Inhalte ist /embed/query-visualization/ gefolgt von der Client-ID Ihrer Abfrage. Der Pfad der Beispiel-URL für eingebettete Inhalte ist /embed/query-visualization/1234567890abcdefghij12.

Teil 3: Parameter

Mit den Parametern der URL für eingebettete Inhalte steuern Sie die Filter und das Design Ihrer eingebetteten Inhalte.

Filter

  1. Rufen Sie die URL Ihrer Looker-Inhalte auf.
  2. Passen Sie die Filter der Inhalte manuell an. In diesem Beispiel lautet die resultierende Looker-Inhalts-URL: https://instance.looker.com/dashboards/4?Timeframe=14+day.
  3. Die Parameter Ihrer URL für eingebettete Inhalte sind die Parameter der Looker-Inhalts-URL, z. B. Timeframe=14+day.

In diesem Beispiel legt der Parameter Timeframe=14+day den Wert des Filters Timeframe des Dashboards fest.

Designs

Im Leitfaden zu Designs erfahren Sie, wie Sie das Erscheinungsbild Ihrer eingebetteten Inhalte steuern.

2. URL für eingebettete Inhalte testen

Öffnen Sie die URL für eingebettete Inhalte in Ihrem Browser, um eine Vorschau des Verhaltens und des Erscheinungsbilds Ihrer eingebetteten Inhalte zu sehen.

3. iFrame erstellen

  1. Erstellen Sie das iFrame-Element in Ihrer Hostanwendung.
  2. Legen Sie das src-Attribut auf Ihre URL für eingebettete Inhalte fest.
  3. Definieren Sie width, height und andere Attribute so, dass Ihre eingebetteten Looker-Inhalte optimal angezeigt werden.

4. Probleme mit dem Nutzerzugriff berücksichtigen

Der Nutzer muss in Looker angemeldet sein, um Ihre eingebetteten Inhalte zu sehen. Im iFrame wird eine 401-Fehlerseite angezeigt, wenn der Nutzer nicht angemeldet ist.

Optionen für die Nutzeranmeldung

Nutzer können sich auf zwei Arten in Looker anmelden:

1. Vorher in Looker anmelden

Der Nutzer muss sich im selben Browser in Looker anmelden, bevor er die eingebetteten Inhalte sehen kann.

2. Optionalen Looker-Anmeldebildschirm für die Einbettung aktivieren

Fügen Sie den Parametern Ihrer URL für eingebettete Inhalte allow_login_screen=true hinzu, um einen Looker-Anmeldebildschirm im iFrame anzuzeigen, wenn der Nutzer nicht angemeldet ist. Unsere Beispiel-URL für eingebettete Inhalte lautet dann: https://instance_name.looker.com/embed/dashboards/4?Timeframe=14+day&allow_login_screen=true.

Beachten Sie zwei Einschränkungen:

  • Sie müssen die Einstellung Same-Origin-Schutzmaßnahmen für Looker-Anmeldeseiten deaktivieren, um den Looker-Anmeldebildschirm in der iFrame-Einbettung zu aktivieren.
  • Wenn Ihre Looker-Instanz Nutzer mit Einmalanmeldung (SSO) über einen Identitätsanbieter authentifiziert, kann Ihr Identitätsanbieter den Anmeldebildschirm in Ihrem iFrame blockieren. In diesem Fall müssen Sie Option 1 verwenden.

Looker verwendet Cookies für die Nutzerauthentifizierung und die Sitzungsspeicherung. Im Browser des Nutzers müssen Drittanbieter-Cookies aktiviert sein, wenn der Hostname der URL für eingebettete Inhalte Ihrer Looker-Instanz zu einer anderen Domain gehört als Ihre Hostanwendung.

In einigen Browsern wie Firefox und Safari ist standardmäßig eine Cookierichtlinie festgelegt, die Drittanbieter-Cookies blockiert. Wenn der Browser des Nutzers keine Drittanbieter-Cookies zulassen kann, können Sie Ihrer Looker-Instanz eine benutzerdefinierte Domain hinzufügen, damit sich Ihre Hostanwendung und der Hostname der URL für eingebettete Inhalte der Looker-Instanz in derselben Domain befinden.

5. Mit dem iFrame interagieren

Erste Schritte mit der Messaging-Funktion für eingebettete Looker-iFrames.

Nächste Schritte

Erste Schritte mit der signierten Einbettung mit unserem Embed SDK und Beispiele für die Möglichkeiten der Looker-Einbettung.