Formen, Auth und Serverlose Funktionen auf Gatsby und Netlify

0
18

Abstraktion der Infrastruktur ist in unserer DNA. Straßen, Schulen, Wasser-Versorgung, Netzwerke—Sie bekommen die Idee. Web-Entwicklung ist keine Ausnahme: serverlose Architekturen sind ein schöner Ausdruck für dieses Phänomen. Statische Webseiten, insbesondere, drehen in eine dynamische, reichhaltige Erfahrungen.

Umgang mit statischen Formularen, die Authentifizierung und backend-Funktionen auf statisch generierte Seiten ist jetzt eine Sache. Vor allem mit der JAMstack pioneer Plattform, die Netlify. Kürzlich haben Sie angekündigt, die Unterstützung der AWS Lambda-Funktionen auf front-end-centric Websites und apps. Ich habe Sinn Tauchen Sie ein in Ihre “backend” – features da.

Heute, ich bin gerade dabei, mit einer statischen Gatsby Website, Netlify Formen, Identität und Funktionen. Dieses tutorial wird Ihnen zeigen, wie Sie:

  • Fügen Sie statische Formulare auf Ihrer Website
  • Fügen Sie Benutzer-Authentifizierung für Kennwort-geschützte Inhalte
  • Erstellen einer AWS Lambda-Funktion

Bereit zur Aufladung eine statische Seite mit serverlose Funktionen?

Sollten Sie überprüfen, Netlify die Reagieren-powered static CMS nach diesem post! Und hier ist ein tutorial über die ganzen Kommentar-workflow, komplett mit einer Genehmigung system, mit dem JAMstack.

Statische Website werden Formulare, auth, und AWS Lambda-Funktionen

Vor dem Tauchen in den code, lassen Sie Details zu unserem Anwendungsfall. Ich werde mit drei verschiedenen Netlify serverlose features:

1. Identität

Die Identität wird verwendet, um ein Passwort-geschützten, geschlossenen content-Bereich auf der Gatsby-Seite. Authentifizierung ohne ein backend schon lange Schmerzen, die auf statischen Websites. Aber dieses nette feature löst es aus, mit dem Entwickler:

Verwalten von Anmeldungen, logins, Passwort-Wiederherstellung und mehr — alles, ohne Ihre eigenen Rollen-Authentifizierung service.

2. Formen

Formulare werden verwendet, um den Benutzer zu ermöglichen eingereichte Produkt-Bewertungen auf der Website. Bei dynamischen Formularen kann viele Formen annehmen (siehe was ich dort Tat?), vom einfachen Kontakt-Formularen, kommentieren, zitieren, und review-Systeme süchtig nach internen tools.

Es gibt eine fülle von Lösungen für interaktive Formulare auf statischen Websites. Aber mit Formen , die Sie behandeln können Sie Sie direkt in Ihrem Gebäude-und hosting-service (Netlify Kern-Angebot). Keine Notwendigkeit für die spam-Falle mailto: – links, konfigurieren Sie Ihren eigenen server einrichten serverlose Funktionen oder die Integration von Dritten, wie Formspree oder FormKeep.

Kein JavaScript, APIs oder backend nötig: nur ein einfaches HTML-Formular-Tags mit den netlify HTML-Attribut.

3. Funktionen

Funktionen verwendet werden, um eine Bewertungen MODERATIONS-workflow direkt in Slack. Unter diesem feature die Haube AWS Lambda-Funktionen—Ereignis ausgelöst, skalierbare backend-code, den Sie ausführen können, ohne Ihre eigenen server. Die Bereitstellung dieser mit Netlify ist so einfach wie das hinzufügen einer Datei zu einem Git repo.

Lambda-Funktionen sind in der Tat mächtig, aber Sie erfordern in der Regel ein AWS-Konto und API-gateway-Konfiguration. Wie mit Formen, Funktionen vereinfachen Sie Ihr Leben durch die Verschiebung der Beinarbeit zu Netlify:

Ihre Funktionen sind, die der Versionskontrolle unterliegen, gebaut, bereitgestellt und zusammen mit dem rest Ihrer Netlify Website, und die Netlify API-gateway verarbeitet automatisch service discovery. Plus, werden Ihre Funktionen profitieren Sie von der Kraft Bereitstellen, Vorschauen und rollbacks.

Kurz gesagt, die Funktionen ermöglichen, die Sie zur Verbesserung der Website Interaktivität + Brücke die front-und backend zu ermöglichen den Datenfluss zwischen den Diensten.

Serverlose Gatsby auf Netlify: auth, statische Formen und Lambda-Funktionen

Ich werde jumpstart dieses tutorial, indem eine abgespeckte version von einer früheren Gatsby Website haben wir gebaut.

Lernen Gatsby Grundlagen, schauen Sie sich die offiziellen tutorial. Wir haben auch zwei e-commerce-tutorials mit Gatsby hier und hier.

Voraussetzungen

Für dieses tutorial benötigen Sie:

  • Ein kostenloses Konto Netlify
  • Netlify Formen Pro für die Slack-integration (optional—paid-Funktion)

1. Die Verzweigung der Gatsby-Projekt

Starten Sie durch “forking” von der repo:

Blick auf GitHub

Ich schlage vor, zu spielen, um mit ihm vertraut zu machen mit dem Projekt. Produkte sind in der src/data/Produkte-Ordner—alle in Markdown-Dateien. Diese Dateien werden geladen, während die build-Zeit und verwendet werden, um zu injizieren, die richtigen info in unserem Vorlagen. Dies geschieht im gatsby-node.js Datei.

2. Hinzufügen von Identität für die Authentifizierung

Wenn Sie geöffnet Produkt-Datei, haben Sie wahrscheinlich gesehen, da ist ein Feld, das wir normalerweise nicht verwenden, in Snipcart demos: ein privates Attribut. Das Ziel ist einfach: zeigen diese “exklusiven” Produkte, nur wenn ein Benutzer angemeldet ist.

Behandeln, die, den ich verwendet Netlify Identität widget, eine einfache Möglichkeit, hinzufügen von Authentifizierung, um eine statische website.

Sie können die Installation der Identity-Paket mit:

npm install –save netlify-Identität-widget

Stellen Sie sicher, dass es in Ihrem Kopf! Innerhalb der src/components/Header/index.js die Datei, fügte ich diese Zeile, nachdem die h1-schließenden tag:

<div data-netlify-Identität-Menü></div>

Sie können dann importieren Sie das widget an den Anfang der Datei mit

const netlifyIdentity = require(“netlify-Identität-widget”);

Und erklären componentDidMount Funktion als solche:

componentDidMount(){
netlifyIdentity.init();
}

Die Identität widget jetzt spritzt richtigen login-Formulare innerhalb dieses <div>. Jetzt haben Sie ein statisches Formular zum anmelden benötigen Sie die entsprechende Logik um zu überprüfen, ob ein Benutzer angemeldet ist oder nicht.

Ich habe diese Logik zu zeigen geeignet, Passwort-geschützte Produkte für eingeloggte Benutzer. Zu tun also, ich stellte eine products.js innerhalb des src/ – Ordner “pages”, und definiert die folgenden Komponenten:

importieren Reagieren von ‘reagieren’
import-Link von ‘gatsby-link’
Stile importieren von ‘./Produkte.- Modul.css’
const netlifyIdentity = require(“netlify-Identität-widget”);

export-Standard-class Products extends Reagieren.Komponente {
Konstruktor(Daten){
super(Daten);

diese.state = {
Produkte: []
}
}

getProducts(){
zurück netlifyIdentity.currentUser() != null
? diese.Requisiten.Daten.allMarkdownRemark.Kanten
: dies.Requisiten.Daten.allMarkdownRemark.Kanten
.filter(x => !x.Knoten.frontmatter.privat)
}

updateProducts(){
diese.setState({ Produkte: dies.getProducts() });
}

componentDidMount(){
netlifyIdentity.auf(“login”, user => diese.updateProducts());
netlifyIdentity.(“logout”, () => this.updateProducts());
diese.updateProducts();
}

render(){
return (
<div>
<h1>Produkte</h1>
<p>Zum login die E-Mail benutzen: geeks@snipcart.com mit Passwort: admin</p>

<ul className={styles.itemsList}>
{dies.Zustand.Produkte.Karte((a, index) =>
<li key={index} className={styles.ein Element,}>
<Link to={o.Knoten.frontmatter.loc}>
<Abbildung>
<img className={styles.Bild}, src={o.Knoten.frontmatter.Bild} alt={o.Knoten.frontmatter.name}></img>
<figcaption className={styles.figCaption}>Kaufen {o.Knoten.frontmatter.name} jetzt</figcaption>
</figure>
</Link>
</li>
)}
</ul>
</div>)
}
}

export const Abfrage = graphql`
Abfrage allProducts {
allMarkdownRemark {
Kanten {
Knoten {
frontmatter {
sku
loc,
Preis,
desc,
private,
name,
Bild
}
}
}
}
`

Ich werde nicht erklären, die GraphQL bisschen hier. Wenn Sie interessiert sind, Lesen Sie hier.

Der wichtige Teil ist zu verstehen, was passiert im inneren des componentDidMountlifecycle Funktion. Bin ich verbindlich, mich auf das widget “login” und “logout” Ereignisse zu aktualisieren verfügbare Produkte.

Das Ergebnis ist ziemlich genial:

3. Umgang mit statischen Formularen für Bewertungen

Zum hinzufügen von Produkt-Bewertungen auf der Gatsby-Seite, die ich verwendet, Netlify Formen. Sie können Ihre Formulare auf Ihrer eigenen Website, indem es einen ‘Daten-netlify=”true”‘ (oder nur netlify) – Attribut eines Formular-Deklaration. Ich habe es in meinem src/components/product.js Datei, nach der letzten section-tag.

Sie müssen auch zu erklären, eine formId-variable vor der Rückkehr Ihrer render-Funktion, wie z.B.:

render(){
if(dies.Requisiten.Daten.markdownRemark.frontmatter.private
&& !diese.Zustand.loggedIn){
zurück fourOfour();
}

var formId = `product-${dies.Requisiten.Daten.markdownRemark.frontmatter.sku}`

const-Taste =.Requisiten.Daten.markdownRemark.frontmatter.privat ? (
<button type=”button” className={`${styles.buyButton}`}>
AUSVERKAUFT
</button>
) : (
<button type=”button” className={`${styles.buyButton} snipcart-add-item`}
Daten-item-name={.Requisiten.Daten.markdownRemark.frontmatter.name}
Daten-Element-id={das.Requisiten.Daten.markdownRemark.frontmatter.sku}
Daten-item-image={das.Requisiten.Daten.markdownRemark.frontmatter.Bild}
Daten-Element, url={`${NETLIFY_URL}${dies.Requisiten.Lage.Pfadname}`}
Daten-item-price={das.Requisiten.Daten.markdownRemark.frontmatter.Preis}
Daten-item-description={das.Requisiten.Daten.markdownRemark.frontmatter.desc}>
Kaufen Sie es jetzt für {dieses.Requisiten.Daten.markdownRemark.frontmatter.Preis}$
</button>
);

return (
<div>
<h1>{dies.Requisiten.Daten.markdownRemark.frontmatter.name}</h1>
<div className={styles.breadcrumb}>
<Link to=’/’> > Zurück zu den Produkten</Link>
</div>
<p>{dies.Requisiten.Daten.markdownRemark.frontmatter.desc}</p>

<section className=”Abschnitt,__product”>
<Abbildung className={styles.productFigure}>
<img src= ” {dies.Requisiten.Daten.markdownRemark.frontmatter.Bild} />
</figure>

<Artikel>
{dies.Requisiten.Daten.markdownRemark.frontmatter.Beschreibung}
</article>
<div className={styles.Aktionen}>
{button}
</div>
</section>
<section>
<h3 className=”Bewertungen”>Bewertungen</h3>
<div className=”Bewertungen__list”>
{dies.Zustand.Bewertungen.Karte((o) =>
<p key={o.Anzahl}>
<div className=”review__ – name”>{o.name}</div>
<div>{o.Daten.message}</div>
</p>
)}
</div>

<form className=”review__ – Formular” name={formId} method=”POST” data-netlify-honeypot=”bot-Feld” Daten-netlify=”true”>
<input type=”hidden” name=”form-name” value={formId} />
<div className=”field – __ – Formular”>
<label>NAME</label>
<input type=”text” name=”name”></input>
</div>
<div className=”field – __ – Formular”>
<label>E-MAIL</label>
<input type=”email” name=”email”></input>
</div>
<div className=”field – __ – Formular”>
<label>NACHRICHT</label>
<textarea name=”Nachricht”></textarea>
</div>

Schaltfläche <className=”button__das Formular” type=”submit”>SENDEN</button>
</form>
</section>
</div>)
}

Boom, statische Formulare auf Ihrer Website!

Aber um zu zeigen, Veröffentlichungen kommen durch diese Formen, müssen Sie eine Netlify Funktion zu Holen und zurück Nutzerbewertungen. Dazu erstellte ich eine netlify.toml-Datei mit dem folgenden Inhalt:

[build]
functions = “Funktionen”

Ich lege dann einen Ordner Funktionen direkt in das root-Projekt. Im inneren, legte ich eine fetchreviews.js Datei mit:

const https = require(‘https’);

die Exporte.handler = function(Ereignis, Kontext, callback) {
var id = event.queryStringParameters.id;
var token = Prozess.env.netlify_access_token;

if(id == undefined){
callback(‘Produkt-id muss angegeben werden.’, {
statusCode: 500
})
}

var options = {
hostname: ‘api.netlify.com’,
port: 443,
method: ‘GET’,
Header: {
‘Content-Type’: ‘application/json’
}
};

var queryToken = `access_token=${token}`;
var opts1 = Objekt.assign({}, options, { path: `/api/v1/sites/${Prozess.env.site_id}/Formen?${queryToken}`});

var req = ” https.Anfrage(opts1, function(res) {

res.setEncoding(‘utf8’);
var body = “”;

res.auf(‘data’, data => {
body += data;
});

res.auf(‘end’, function () {
body = JSON.parse(Körper);

var form = Körper.filter(x => x.name == `product-${id}`)[0];
var opts2 = Objekt.assign({}, options, { path: `/api/v1/Formulare/${form.id}/Veröffentlichungen?${queryToken}`});

var req2 = https.Anfrage(opts2, function(res2) {
res2.setEncoding(‘utf8’);
var body2 = “”;

res2.auf(“Daten” (data) => {
body2 += data;
});

res2.auf(‘end’, function () {
callback(null, {
statusCode: 200,
Header: {
“Access-Control-Allow-Origin” : “*”,
‘Content-Type’: ‘application/json’
},
Körper: body2
})
});
});

req2.end();
});
});

req.end();
}

Die Funktion überprüft, ob eine Produkt-ID als query-parameter. Wenn es eine ID ist, es holt sich das Formular mit dem Namen Produkt-{Produkt-id} alle zu erhalten, die Bewertungen von ihm. Auf diese Weise konnte ich Bewertungen anzeigen im front-end.

Ich fügte hinzu, zwei Funktionen product.js zu tun:

Konstruktor(props){
super(props);

diese.state = {
Bewertungen: [],
loggedIn: false
}
}

componentDidMount(){
fetch(`https://${NETLIFY_FUNC}/fetchreviews?id=${dies.Requisiten.Daten.markdownRemark.frontmatter.sku}`)
.dann(x => x.json())
.dann(x => {
diese.setState({Bewertungen: x -})
})

wenn(netlifyIdentity.currentUser() != null){
diese.setState({loggedIn: true});
}

netlifyIdentity.auf(“login”, user => diese.setState({loggedIn: true}));
netlifyIdentity.(“logout”, () => this.setState({loggedIn: false}));
}

Dann, kurz vor dem review-form:

{dies.Zustand.Bewertungen.Karte((o) =>
<p key={o.Anzahl}>{o.name}: {o.Daten.message}</p>
)}

Oben montierte Komponente holt die neuen Funktionen, um spezifische Produkt-Bewertungen. Es aktualisiert auch den Zustand, und zeigen Sie auf den Seiten. Sie können auch sehen, dass wir beschlossen, einen “ausverkauft” – Taste für den privaten Produkte, dies ist, weil diese privat sind und nicht an unserer Validierung, wenn wir einfach die aktuelle URL, wir könnten es immer noch tun, es würde aber erfordern ein wenig mehr Arbeit aus dem Anwendungsbereich dieser demo.

Wenn Sie möchten, testen Sie Ihre Funktionen, ohne die Bereitstellung zu Netlify, verwenden Sie die netlify-lambda-Knoten-Paket zu tun, also lokal. Sobald Sie es installiert haben (npm installieren netlify-lambda) laufen netlify-lambda dienen ./ in Ihrem Projekt-Ordner. Die Funktion wird ausgeführt bei http://localhost:9000/fetchreviews.

Sie können aktualisieren Sie die fetch-route vor und bekommen das gleiche Verhalten, müsstest du mit einer hosted-Funktion.

4. Konfigurieren einer AWS Lambda-Funktion mit Slack

Sie müssen Netlify Formen Pro, um die trigger-Funktion auf dem Formular.

Last but not least: die Bewertungen der moderation workflow direkt in Slack. Das Ziel ist einfach: per Knopfdruck prüfen Sie die Angaben und Benachrichtigung zu Locker und lassen Sie Sie entweder *halten Sie* oder *verwerfen* Beurteilung von Slack.

Dazu erstellte ich 2 neue Funktionen in den Ordner Funktionen: notifyslack.js und answerslack.js. Die erste ist eine Mitteilung durch Netlify die webhook von jeder form der Unterordnung und ist zuständig für die Kommunikation dieser zu Locker mit entsprechenden Aktionen. Ich erstellte eine kleine Slack-app für diese Arbeit (Referenz).

Hier sind die Berechtigungen, die die app benötigt:

Interaktive Komponenten config:

Die Anfrage-URL – Feld ist, wo Sie Ihre Netlify Funktion aufgerufen werden kann.

Mit dieser Einrichtung habe ich installiert meine app und öffnete die Eingehenden webhooks tab. Ich kopierte die webhook URL, und kam zurück zu meinem Projekt.

Innerhalb von Funktionen, habe ich die notifyslack.js Datei mit:

var https = require(“https”);

die Exporte.handler = function(Ereignis, Kontext, callback) {
var body = JSON.parse(event.Körper);

if(body != null && body.Daten != null){
var Daten = Körper.Daten;

var message = ” Neuen Beitrag von ${data.E-Mail} n ${data.name}: ${data.Nachricht}`;
var attach = [
{
“title”: “Überprüfen Sie ID”,
“text”: Körper.id
},
{
“title”: “wollen Sie das überprüfen?”,
“text”: Nachricht,
“fallback”: “Man kann nicht Maßnahmen ergreifen, für diese Bewertung.”,
“callback_id”: “answer_netlify”,
“Farbe”: “#3AA3E3”,
“attachment_type”: “Standard”,
“actions”: [
{
“name”: “response”,
“text”: “Halten”,
“type”: “button”,
“value”: “halten”
},
{
“name”: “response”,
“text”: “Ablehnen”,
“type”: “button”,
“style”: “Gefahr”,
“value”: “ablehnen”,
“bestätigen”: {
“Titel”: “Sind Sie sicher?”,
“text”: “Sobald es fertig ist, wird die überprüfung gelöscht werden”,
“ok_text”: “ja”,
“dismiss_text”: “Nein”
}
}
]
}
]

var postData = JSON.stringify({
Anhänge: attach
});

var options = {
hostname: ‘hooks.slack.com’,
port: 443,
Weg: Prozess.env.slack_webhook_url,
method: ‘POST’,
Header: {
‘Content-Type’: ‘application/json’
}
};

var req = ” https.request(options, function(res) {

res.setEncoding(‘utf8’);

res.auf(‘end’, function () {
callback(null, {
statusCode: 200
})
});
});

req.auf(‘error’, function (e) {
console.log(‘Problem mit der Anfrage:’, e.message);
});

req.schreiben(postData);
req.end();

callback(null, {
statusCode: 200
})
}
}

Hier müssen Sie zum aktualisieren der Pfad-Wert der Optionen, die das Objekt mit der entsprechenden Slack-app webhook URL.

Im moment würde dies nur mitteilen Slack—was auch immer Aktion, die Sie gewählt haben, würde nicht auslösen, sonst nichts.

Um den Durchhang notification interactive, habe ich mir eine 3. Funktion innerhalb einer Datei namens answerslack.js. Diese Funktion ist wahrscheinlich die komplizierteste, aber es ist vor allem Anfragen overhead, so mit mir tragen:

var https = require(“https”);
var qs = require(‘querystring’)

die Funktion getURL(href) {
var match = href.match(/^(https?:)//(([^:/?#]*)(?::([0-9]+))?)([/]{0,1}[^?#]*)(?[^#]*|)(#.*|)$/);
Rematch && {
href: href,
Protokoll: match[1],
host: match[2],
hostname: match[3],
port: match[4],
Pfad: match[5],
Suche: match[6],
hash: match[7]
}
}

die Exporte.handler = function(Ereignis, Kontext, callback) {
var json = JSON.parse(qs.parse(event.Körper).payload);

var Antwort = json.Aktionen[0].Wert;
var access_token = Prozess.env.netlify_access_token;
var id = json.original_message.Anhänge[0].text;

if(Antwort == ‘reject’){
var options = {
hostname: ‘api.netlify.com’,
port: 443,
Pfad: `/api/v1/Veröffentlichungen/${id}?access_token=${access_token}`,
Methode: ‘LÖSCHEN’,
Header: {
‘Content-Type’: ‘application/json’
}
};

var req1 = https.request(options, function(res) {

res.setEncoding(‘utf8’);

res.auf(‘end’, function () {
console.log(`Überprüfung mit der id: ${id} wurde erfolgreich gelöscht.`)
});
});

req1.auf(‘error’, function (e) {
console.log(‘Problem mit der Anfrage:’, e.message);
});

req1.end();
}

var postData = JSON.stringify({
replace_original: true,
Anlagen: [{
text: Antwort == ‘halten’
? `Die review ‘ (${id}) genehmigt wurde!`
: `Die review ‘ (${id}), wurde abgelehnt.`
}]
});

var url = getURL(json.response_url);

var options = {
hostname: url.hostname,
Pfad: die url.Pfadnamen,
method: ‘POST’,
Header: {
‘Content-Type’: ‘application/json’
}
};

var req = ” https.request(options, function(res) {

res.setEncoding(‘utf8’);

res.auf(‘end’, function () {
callback(null, {
statusCode: 200
})
});
});

req.auf(‘error’, function (e) {
console.log(‘Problem mit der Anfrage:’, e.message);
});

req.schreiben(postData);
req.end();

callback(null, {
statusCode: 200
})
}

Ich parse die Veranstaltung Nutzlast und prüfen, ob die Aktion Wert war abzulehnen. Wenn nicht, ist es unbedingt behalten—nichts zu tun. Aber wenn es so ist, muss ich anrufen Netlify-API zum löschen der abgelehnten abgeben. Ich bin das abrufen der ID review frühere innerhalb der ersten Befestigung text mit der folgenden Zeile:

json.original_message.Anhänge[0].text;

Sobald Sie dies getan haben, kann ich es löschen mit einem API-Aufruf. Ich dann geben Sie unserem Slack-Benutzer-feedback durch den Aufruf der response-URL.

Ich bin ein bisschen stolz auf die letzten workflow hier TBH:

5. Die Bereitstellung der Gatsby-Seite an Netlify

Hier, ich schob alles auf GitHub und hakte es bis zu Netlify mit diesen Einstellungen:

Sie können sehen, wir habe verwendet einige Umgebungsvariablen, die mit dem Prozess.env.{variable} notation in der demo.

Dies sind die privaten Einstellungen, die wir nicht wollen, öffentlich zu machen. Definieren Ihrig direkt, gehen Sie auf /Einstellungen/setzt in Netlify dashboard, schlagen Sie Variablen Bearbeitenund geben Sie den folgenden:

  • netlify_access_token: das token, Das erstellt früher im netlify
  • site_id: Ihre website-url ohne Protokoll
  • slack_webhook_url: Ihre Schlaffen app webhook URL

Website bereitgestellt; die Zeit herum zu spielen!

Lesen Sie dies, um zu erfahren, wie die Bereitstellung einer Website, auf Netlify.

Live-demo und GitHub repo