Ingesloten analyses gebruiken van Amazon QuickSight kan het proces van het uitrusten van uw applicatie vereenvoudigen met functionele visualisaties zonder enige complexe ontwikkeling. Er zijn meerdere manieren om QuickSight-dashboards in de applicatie te integreren. In dit bericht bekijken we hoe dit kan worden gedaan met behulp van React en de Amazon QuickSight Embedding-SDK.
Dashboardconsumenten hebben vaak geen gebruiker toegewezen aan hun AWS-account en hebben daardoor geen toegang tot het dashboard. Om hen in staat te stellen gegevens te consumeren, moet het dashboard toegankelijk zijn voor anonieme gebruikers. Laten we eens kijken naar de stappen die nodig zijn om een niet-geverifieerde gebruiker in staat te stellen uw QuickSight-dashboard in uw React-applicatie te bekijken.
Overzicht oplossingen
Onze oplossing maakt gebruik van de volgende belangrijke services:
Nadat de webpagina in de browser is geladen, roept de browser API Gateway aan, die een Lambda-functie oproept die de QuickSight API aanroept om een dashboard-URL voor een anonieme gebruiker te genereren. De Lambda-functie moet een IAM-rol aannemen met de vereiste machtigingen. Het volgende diagram toont een overzicht van de architectuur.
Voorwaarden
Je moet de volgende voorwaarden hebben:
Stel machtigingen in voor niet-geverifieerde kijkers
Maak in uw account een IAM-beleid dat uw toepassing namens de kijker zal aannemen:
- Kies op de IAM-console Policies in het navigatievenster.
- Kies Maak beleid.
- Op de JSON voer op het tabblad de volgende beleidscode in:
Zorg ervoor dat u de waarde van wijzigt aan de waarde van de dashboard-ID. Noteer deze ID om ook in een latere stap te gebruiken.
Voor het tweede instructieobject met logboeken zijn machtigingen optioneel. Hiermee kunt u een logboekgroep maken met de opgegeven naam, een logboekstroom maken voor de opgegeven logboekgroep en een reeks logboekgebeurtenissen uploaden naar de opgegeven logboekstroom.
In dit beleid staan we de gebruiker toe om de GenerateEmbedUrlForAnonymousUser
actie op de dashboard-ID in de lijst met dashboard-ID's die in de tijdelijke aanduiding zijn ingevoegd.
- Voer een naam in voor uw polis (bijvoorbeeld
AnonymousEmbedPolicy
) en kies Maak beleid.
Vervolgens maken we een rol aan en koppelen we dit beleid aan de rol.
- Kies rollen in het navigatievenster en kies vervolgens Rol creëren.
- Kies Lambda voor de vertrouwde entiteit.
- Zoek en selecteer
AnonymousEmbedPolicy
, kies dan Volgende. - Voer een naam in voor uw rol, zoals
AnonymousEmbedRole
. - Zorg ervoor dat de beleidsnaam is opgenomen in het Machtigingen toevoegen pagina.
- Voltooi het maken van je rol.
Je hebt zojuist de gemaakt AnonymousEmbedRole
uitvoerende rol. U kunt nu naar de volgende stap gaan.
Genereer een anonieme Embed URL Lambda-functie
In deze stap maken we een Lambda-functie die samenwerkt met QuickSight om een insluit-URL voor een anonieme gebruiker te genereren. Ons domein moet worden toegestaan. Er zijn twee manieren om de integratie van Amazon QuickSight te bereiken:
- Door de URL toe te voegen aan de lijst met toegestane domeinen in de Amazon QuickSight-beheerconsole (later uitgelegd in [Optioneel] Voeg uw domein toe in QuickSight sectie).
- [Aanbevolen] Door het insluit-URL-verzoek tijdens runtime toe te voegen aan de API-aanroep. Optie 1 wordt aanbevolen wanneer u de toegestane domeinen wilt behouden. Anders worden de domeinen na 30 minuten verwijderd, wat gelijk is aan de sessieduur. Voor andere use-cases wordt aanbevolen om de tweede optie te gebruiken (hieronder beschreven en geïmplementeerd).
Maak een nieuwe functie op de Lambda-console.
- kies Auteur vanaf nul.
- Voor Functienaam, voer een naam in, zoals
AnonymousEmbedFunction
. - Voor RuntimeKiezen Python 3.9.
- Voor UitvoeringsrolKiezen Gebruik een bestaande rol.
- Kies de rol
AnonymousEmbedRole
. - Kies Maak functie.
- Navigeer op de pagina met functiedetails naar de Code tabblad en voer de volgende code in:
Als je localhost niet gebruikt, vervang dan http://localhost:3000
in de aangifte met de hostnaam van uw toepassing. Vergeet niet te vervangen om naar productie te gaan http://localhost:3000
met uw domein.
- Op de Configuratie tab, onder Algemene configuratie, kiezen Edit.
- Verhoog de time-out van 3 seconden naar 30 seconden en kies vervolgens Bespaar.
- Onder Omgevingsvariabelen, kiezen Edit.
- Voeg de volgende variabelen toe:
- Toevoegen
DashboardIdList
en vermeld uw dashboard-ID's. - Toevoegen
DashboardRegion
en voer de regio van uw dashboard in.
- Toevoegen
- Kies Bespaar.
Uw configuratie zou er ongeveer uit moeten zien als de volgende schermafbeelding.
- Op de Code tabblad, kies Implementeren om de functie in te zetten.
Stel API Gateway in om de Lambda-functie aan te roepen
Voer de volgende stappen uit om API Gateway in te stellen om de door u gemaakte functie aan te roepen:
- Navigeer op de API Gateway-console naar de REST API sectie en kies Bouw.
- Onder Nieuwe API makenselecteer Nieuwe API.
- Voor API-naam, voer een naam in (bijvoorbeeld
QuicksightAnonymousEmbed
). - Kies API maken.
- Op de Acties menu, kies Bron maken.
- Voor Naam van de bron, voer een naam in (bijvoorbeeld
anonymous-embed
).
Laten we nu een methode maken.
- Kies de
anonymous-embed
bron en op de Acties menu, kies Maak methode. - Kies GET onder de bronnaam.
- Voor Integratietypeselecteer Lambda.
- kies Gebruik Lambda Proxy-integratie.
- Voor Lambda-functie, voer de naam in van de functie die u hebt gemaakt.
- Kies Bespaar, kies dan OK.
Nu zijn we klaar om de API te implementeren.
- Op de Acties menu, kies API implementeren.
- Voor Implementatiefaseselecteer Nieuwe fase.
- Voer een naam in voor uw podium, zoals
embed
. - Kies Implementeren.
[Optioneel] Voeg uw domein toe in QuickSight
Als je Toegestane domeinen hebt toegevoegd in Genereer een anonieme Embed URL Lambda-functie deel, voel je vrij om naar toe te gaan Schakel capaciteitsprijzen in pagina.
Voer de volgende stappen uit om uw domein toe te voegen aan de toegestane domeinen in QuickSight:
- Kies op de QuickSight-console het gebruikersmenu en kies vervolgens Beheer QuickSight.
- Kies Domeinen en inbedding in het navigatievenster.
- Voor Domein, voer uw domein in (
http://localhost:
).
Zorg ervoor dat u deze vervangt overeenkomen met uw lokale instellingen.
- Kies Toevoegen.
Zorg ervoor dat u het localhost-domein vervangt door het domein dat u na het testen zult gebruiken.
Schakel capaciteitsprijzen in
Als u geen prijsstelling voor sessiecapaciteit hebt ingeschakeld, volgt u de stappen in deze sectie. Het is verplicht om deze functie ingeschakeld te hebben om verder te gaan.
Met capaciteitsprijzen kunnen QuickSight-klanten readersessies in bulk kopen zonder individuele lezers in QuickSight te hoeven inrichten. Capaciteitsprijzen zijn ideaal voor ingebedde applicaties of grootschalige BI-implementaties (Business Intelligence). Voor meer informatie bezoek Amazon QuickSight-prijzen.
Voer de volgende stappen uit om capaciteitsprijzen in te schakelen:
- Op de Beheer QuickSight pagina, kies Je abonnementen in het navigatievenster.
- In het Capaciteitsprijzen sectie, selecteer Neem een maandelijks abonnement.
- Kies Abonnement bevestigen.
Zie voor meer informatie over capaciteitsprijzen Nieuw in Amazon QuickSight – prijzen voor sessiecapaciteit voor grootschalige implementaties, inbedding in openbare websites en ontwikkelaarsportaal voor ingesloten analyses.
Stel uw React-applicatie in
Voer de volgende stappen uit om uw React-applicatie in te stellen:
- Ga in uw React-projectmap naar uw hoofdmap en voer uit
npm i amazon-quicksight-embedding-sdk
om het amazon-quicksight-embedding-sdk-pakket te installeren. - In uw
App.js
bestand, vervang het volgende:- vervangen
YOUR_API_GATEWAY_INVOKE_URL/RESOURCE_NAME
met uw API Gateway-aanroep-URL en uw resourcenaam (bijvoorbeeldhttps://xxxxxxxx.execute-api.xx-xxx-x.amazonaws.com/embed/anonymous-embed
). - vervangen
YOUR_DASHBOARD1_ID
met de eerste dashboardId van uwDashboardIdList
. Dit is het dashboard dat wordt weergegeven op de eerste weergave. - vervangen
YOUR_DASHBOARD2_ID
met de tweede dashboardId van uwDashboardIdList
.
- vervangen
Het volgende codefragment toont een voorbeeld van het App.js
bestand in uw React-project. De code is een React-component die een QuickSight-dashboard insluit op basis van de geselecteerde dashboard-ID. De code bevat de volgende hoofdcomponenten:
- Staat haken – Twee toestandshooks worden gedefinieerd met behulp van de
useState()
hook van Reageren:- dashboards - Bevat de momenteel geselecteerde dashboard-ID.
- quickSightEmbeding - Bevat het QuickSight-insluitobject dat is geretourneerd door de
embedDashboard()
functie.
- Ref haak – Een ref hook wordt gedefinieerd met behulp van de
useRef()
haak van React. Het wordt gebruikt om een verwijzing naar het DOM-element vast te houden waar het QuickSight-dashboard wordt ingesloten. - gebruikEffect() haak – De hook useEffect() wordt gebruikt om de inbedding van het QuickSight-dashboard te activeren wanneer de geselecteerde dashboard-ID verandert. Het haalt eerst de dashboard-URL voor de geselecteerde ID op uit de QuickSight API met behulp van de methode fetch(). Nadat de URL is opgehaald, wordt de functie embed() aangeroepen met de URL als argument.
- Verander behandelaar - The
changeDashboard()
functie is een eenvoudige gebeurtenishandler die de status van het dashboard bijwerkt wanneer de gebruiker een ander dashboard selecteert in het vervolgkeuzemenu. Zodra een nieuwe dashboard-ID is ingesteld, wordt de useEffect-hook geactiveerd. - Time-out van 10 milliseconden – Het doel van het gebruik van de time-out is om een kleine vertraging van 10 milliseconden in te voeren voordat de API-aanroep wordt gedaan. Deze vertraging kan handig zijn in scenario's waarin u onmiddellijke API-aanroepen wilt vermijden of buitensporige verzoeken wilt voorkomen wanneer de component regelmatig wordt weergegeven. De time-out geeft de component enige tijd om tot rust te komen voordat het API-verzoek wordt gestart. Omdat we de toepassing in ontwikkelingsmodus bouwen, helpt de time-out fouten te voorkomen die worden veroorzaakt door het dubbel uitvoeren van
useEffect
binnenStrictMode
. Voor meer informatie, zie: Updates voor strikte modus.
Zie de volgende code:
Vervang vervolgens de inhoud van uw App.css
bestand, dat wordt gebruikt om uw webpagina op te maken en op te maken, met de inhoud van het volgende codefragment:
Nu is het tijd om uw app te testen. Start uw toepassing door uit te voeren npm start
in uw eindstation. De volgende schermafbeeldingen tonen voorbeelden van uw app en de dashboards die deze kan weergeven.
Conclusie
In dit bericht hebben we je laten zien hoe je een QuickSight-dashboard kunt insluiten in een React-applicatie met behulp van de AWS SDK. Door uw dashboard te delen met anonieme gebruikers, hebben ze toegang tot uw dashboard zonder dat ze toegang hebben tot uw AWS-account. Er zijn ook andere manieren om uw dashboard anoniem te delen, zoals via Openbare inbedding met 1 klik.
Sluit je aan bij de Quicksight-gemeenschap om te vragen, te beantwoorden en te leren met anderen en aanvullende bronnen te verkennen.
Over de auteur
Adrianna is een Solutions Architect bij AWS Global Financial Services. Ze maakt sinds augustus 2018 deel uit van Amazon en heeft de kans gehad om zowel bij de operaties als bij de cloudactiviteiten van het bedrijf betrokken te zijn. Momenteel bouwt ze softwaremiddelen die innovatief gebruik van AWS-services demonstreren, afgestemd op specifieke gebruikscasussen van klanten. Dagelijks houdt ze zich actief bezig met verschillende aspecten van technologie, maar haar echte passie ligt in de combinatie van web development en analytics.
- Door SEO aangedreven content en PR-distributie. Word vandaag nog versterkt.
- PlatoData.Network Verticale generatieve AI. Versterk jezelf. Toegang hier.
- PlatoAiStream. Web3-intelligentie. Kennis versterkt. Toegang hier.
- PlatoESG. Automotive / EV's, carbon, CleanTech, Energie, Milieu, Zonne, Afvalbeheer. Toegang hier.
- BlockOffsets. Eigendom voor milieucompensatie moderniseren. Toegang hier.
- Bron: https://aws.amazon.com/blogs/big-data/level-up-your-react-app-with-amazon-quicksight-how-to-embed-your-dashboard-for-anonymous-access/
- : heeft
- :is
- :waar
- ][P
- $UP
- 1
- 10
- 100
- 11
- 12
- 13
- 14
- 20
- 200
- 2018
- 26
- 30
- 3000
- 60
- 7
- 9
- a
- Over
- toegang
- beschikbaar
- Account
- Bereiken
- Actie
- actief
- toevoegen
- toegevoegd
- toe te voegen
- Extra
- beheerder
- Na
- Alles
- toelaten
- toegestaan
- toestaat
- ook
- Amazone
- Amazon QuickSight
- Amazon Web Services
- an
- analytics
- en
- Anoniem
- Anoniem
- beantwoorden
- elke
- api
- gebruiken
- Aanvraag
- toepassingen
- architectuur
- ZIJN
- argument
- AS
- aspecten
- Activa
- toegewezen
- ervan uitgaan
- At
- hechten
- Augustus
- auteur
- vermijd
- wachten
- AWS
- gebaseerde
- basis
- BE
- omdat
- geweest
- vaardigheden
- namens
- onder
- lichaam
- zowel
- browser
- bouw
- Gebouw
- bouwt
- bedrijfsdeskundigen
- business intelligence
- maar
- by
- Bellen
- oproepen
- CAN
- Inhoud
- gevallen
- veroorzaakt
- Centreren
- kans
- verandering
- Wijzigingen
- Kies
- klant
- Cloud
- code
- kleur
- combinatie van
- afstand
- compleet
- complex
- bestanddeel
- componenten
- Configuratie
- troosten
- consumeren
- Consumenten
- Containers
- bevat
- content
- inhoud
- verband
- en je merk te creëren
- aangemaakt
- Wij creëren
- CSS
- Actueel
- Op dit moment
- klant
- Klanten
- dagelijks
- dashboards
- dashboards
- gegevens
- Standaard
- gedefinieerd
- vertraging
- tonen
- implementeren
- implementaties
- beschreven
- gegevens
- Ontwikkelaar
- Ontwikkeling
- anders
- Display
- ARREST
- domein
- domeinen
- gedaan
- Dont
- verdubbelen
- duur
- gedurende
- e
- effect
- element
- insluiten
- ingebed
- inbedding
- in staat stellen
- ingeschakeld
- houdt zich bezig
- Enter
- entiteit
- Milieu
- Gelijkwaardig
- fout
- fouten
- Ether (ETH)
- Event
- EVENTS
- voorbeeld
- voorbeelden
- Behalve
- uitzondering
- uitvoering
- bestaand
- uitgelegd
- Verken
- exporteren
- voelen
- Dien in
- financieel
- financiële diensten
- Voornaam*
- volgen
- volgend
- Voor
- Gratis
- vaak
- oppompen van
- functie
- functioneel
- verder
- poort
- voortbrengen
- geeft
- Globaal
- wereldwijd financieel
- Go
- toekenning
- Groep
- HAD
- Hebben
- met
- headers
- Hoogte
- helpt
- haar
- houden
- houdt
- haken
- zweven
- Hoe
- How To
- http
- HTTPS
- i
- IAM
- ID
- ideaal
- Identiteit
- ids
- if
- Onmiddellijk
- geïmplementeerd
- importeren
- in
- inclusief
- individueel
- informatie
- eerste
- initiëren
- innovatieve
- installeren
- integratie
- Intelligentie
- wisselwerking
- in
- voorstellen
- oproept
- betrokken zijn
- IT
- json
- voor slechts
- sleutel
- Gebrek
- Groot
- grootschalig
- later
- Layout
- LEARN
- Niveau
- ligt
- Lijst
- het laden
- lokaal
- inloggen
- Kijk
- Hoofd
- MERKEN
- maken
- verplicht
- Marge
- Match
- Menu
- methode
- minuten
- Mode
- maandelijks
- meer
- beweging
- meervoudig
- Dan moet je
- naam
- OP DEZE WEBSITE VIND JE
- Navigatie
- Noodzaak
- behoeften
- New
- volgende
- een
- nu
- object
- of
- vaak
- on
- EEN
- Operations
- Keuze
- Opties
- or
- Oranje
- OS
- Overige
- Overig
- anders-
- onze
- overzicht
- pakket
- pagina
- brood
- deel
- passie
- uitvoeren
- permissies
- kiezen
- placeholder
- Plato
- Plato gegevensintelligentie
- PlatoData
- dan
- beleidsmaatregelen
- Portaal
- Post
- krachtige
- vereisten
- voorkomen
- prijsstelling
- productie
- project
- voorziening
- volmacht
- publiek
- inkomsten
- doel
- RE
- Reageren
- Lezer
- lezers
- klaar
- aanbevolen
- regio
- verwijderd
- renders
- vervangen
- te vragen
- verzoeken
- nodig
- hulpbron
- Resources
- antwoord
- terugkeer
- Retourneren
- Rol
- wortel
- lopen
- lopend
- Scale
- scenario's
- screenshots
- sdk
- Tweede
- seconden
- sectie
- zien
- gekozen
- Diensten
- Sessie
- sessies
- reeks
- vestigen
- setup
- Delen
- delen
- ze
- moet
- tonen
- vertoonde
- getoond
- Shows
- gelijk
- Eenvoudig
- vereenvoudigen
- sinds
- Klein
- Software
- oplossing
- Oplossingen
- sommige
- Spoedig
- specifiek
- gespecificeerd
- Stadium
- begin
- Land
- Statement
- Stap voor
- Stappen
- stream
- streng
- stijl
- dergelijk
- zeker
- op maat gemaakt
- doelwit
- Technologie
- terminal
- proef
- Testen
- dat
- De
- hun
- Ze
- harte
- Er.
- daarom
- dit
- niet de tijd of
- naar
- leiden
- veroorzaakt
- waar
- vertrouwde
- proberen
- BEURT
- twee
- voor
- onderstrepen
- updates
- URL
- .
- gebruikt
- Gebruiker
- gebruikers
- toepassingen
- gebruik
- waarde
- divers
- versie
- Bekijk
- Bezoek
- willen
- manieren
- we
- web
- Webontwikkeling
- webservices
- websites
- welkom
- GOED
- wanneer
- telkens als
- welke
- wil
- Met
- binnen
- zonder
- u
- Your
- zephyrnet