In deze tutorial gaan we dieper in op hoe je Bubble en AppMaster kunt integreren. Stel dat de front-end van de applicatie die wordt ontwikkeld in Bubble is gemaakt, maar de mogelijkheden om met de back-end te werken onvoldoende blijken te zijn, en u wilt de AppMaster functionaliteit gebruiken.
Laten we uitzoeken hoe:
- Gebruik AppMaster als database voor Bubble
- Stuur API-verzoeken naar Appmaster
- Gebruikersauthenticatie uitvoeren
- Autorisatietoken gebruiken in aanvraagheaders
API Connector configureren
Allereerst moet je de mogelijkheid creëren om externe API-verzoeken vanuit Bubble te verzenden. Om dit te doen, moet u de API Connector -plug-in toevoegen.
Laten we het onmiddellijk configureren om een authenticatieverzoek naar AppMaster te sturen. Het is onze taak om een login en wachtwoord te verzenden om als antwoord een autorisatietoken te ontvangen. We zullen het standaard eindpunt gebruiken dat standaard in elk project wordt gemaakt - POST /auth/ (Auth: Authentication) . Volledige informatie hierover, met het exacte adres dat u in uw project moet aanvragen, kan worden verkregen bij Swagger .
Om de API Connector te configureren, klikt u op de knop Add Another API en stelt u de te gebruiken verzoekparameters in. De belangrijkste parameters zijn:
- Aanvraag methode. POST
- URL. Hetzelfde als Request URL van Swagger
- Use as. Data . Als reactie hierop moet u autorisatietokengegevens ontvangen.
- Data type. JSON
- Body . De belangrijkste instelling daarin is dat u de gegevens moet specificeren die naar de AppMaster -server worden verzonden. Tegelijkertijd bevat <> dynamische waarden die moeten worden verkregen uit de bijbehorende invoervelden.
{
"login": "<login>",
"password": "<password>"
}
Bij het invullen moet u de gegevens voor het testverzoek specificeren (vul de login- en wachtwoordwaarden in de Body parameters in), het verzoek initialiseren en ervoor zorgen dat het correct werkt en dat het antwoord echt komt.
Invoervelden instellen
De volgende stap is het maken van een interface voor de applicatie. We beperken ons tot het noodzakelijke minimum. We moeten 3 invoervelden maken:
- Log in
- Wachtwoord
- Autorisatietoken
De eerste twee zijn vrij duidelijk. Ze geven de gebruikersnaam en het wachtwoord van de gebruiker aan voor authenticatie. Van het grootste belang is het derde veld - het veld van het token. De waarde van de token kan ook handmatig worden ingevoerd, maar het is onze taak om het mogelijk te maken om gegevens van de AppMaster backend te ontvangen en daar weer te geven.
Om dit te doen, moet u de initiële inhoudswaarde configureren:
- Get data from an External API met de selectie van het eerder gemaakte verzoek in de API Connector (in dit voorbeeld is de naam AppMaster Auth Call )
- In de velden (body) login en (body) password dient u de waarden uit de corresponderende invoervelden op te geven
- Selecteer de token (er komen veel verschillende gegevens in het antwoord op het verzoek, maar in dit voorbeeld is alleen het token van belang)
Het resultaat kan worden getest. Bij het invoeren van gegevens in de login- en wachtwoordvelden wordt automatisch een verzoek gedaan aan de AppMaster backend. Wanneer de gegevens correct zijn ingevoerd en het verzoek een succesvol resultaat oplevert, verschijnt het ontvangen autorisatietoken in het derde veld.
GET verzoek naar database
De volgende stap is het aanmaken van een nieuw API-verzoek. Deze keer is het de taak om de gegevens uit de database te halen. Tegelijkertijd wordt de situatie gecompliceerd door het feit dat deze gegevens niet vrij beschikbaar zijn, maar alleen beschikbaar zijn voor geautoriseerde gebruikers.
Om dit te doen, moet u een speciale koptekst aan de aanvraag toevoegen. Het moet Authorization worden genoemd en de waarde ervan moet " Bearer " zijn en de autorisatiesleutel die eerder is verkregen.
Laten we het in de praktijk doen. U moet teruggaan naar de API Connector -plug-in en een nieuw API-verzoek maken. In het voorbeeld op de schermafbeelding is dit een oproep naar de restaurantdatabase om een lijst met gerechten te krijgen en een menu te maken.
Een belangrijk verschil met het vorige verzoek is dat in plaats van parameters (hoewel deze ook kunnen worden toegevoegd), een header wordt gebruikt:
- Key = Authorization
- Value = Bearer {authorization token} (om het verzoek te initialiseren, moet u onmiddellijk het echte token opgeven dat u eerder heeft ontvangen)
Houd er rekening mee dat u in de header-instellingen het selectievakje Private moet uitschakelen; anders is het niet mogelijk om het dynamisch te genereren. Vergeet ten slotte niet om het verzoek te initialiseren en ervoor te zorgen dat het werkt.
Repeating Group
Nu moeten we teruggaan naar de ontwerper, een nieuw Repeating Group-element toevoegen en het instellen:
- Type of content - gegevens van aanvraag AppMaster Get Data .
- Data source - het is belangrijk om de Authorization -header correct op te geven. Het bestaat uit twee delen. De eerste constante is " Bearer " . De tweede variabele moet een autorisatietoken bevatten en uit het corresponderende invoerveld worden gehaald.
Als alles correct is gedaan, worden de gegevens ontvangen en blijft alleen de laatste stap over - u moet ze weergeven. Om dit te doen, kunt u twee tekstvelden toevoegen aan de Repeating Group en deze aanpassen. De ene toont de naam van het gerecht en de tweede toont de prijs.
U kunt de resulterende app openen en controleren of de integratie van Bubble en AppMaster is gelukt. De frontend is gemaakt in Bubble.io en alles wat met de backend te maken heeft, wordt mogelijk gemaakt door AppMaster.io :
- Gebruikersauthenticatie wordt uitgevoerd
- Het ontvangen autorisatietoken wordt weergegeven
- Het werk met de database wordt uitgevoerd
- De gegevens die alleen beschikbaar zijn voor geautoriseerde gebruikers worden weergegeven
