Как создать аутентифицированные приложения Serverless Jamstack с GATSBY и NetLify

Автор оригинала: FreeCodeCamp Community Member.

При взаимодействии с бэкэнда приложение JamStack может сделать все мобильное приложение, без тирании App Store. Это фундаментальное понимание, которое идет как борьба за более открытый, безопасный, отделенный, более быстрый сеть.

Статические генераторы сайта (SSGS) традиционно используются для генерации HTML Markup для статических сайтов, и даже Сайты электронной коммерции , но современное поколение JavaScript SSGS включает в себя полноценные, пылающие быстрое веб-приложения. GATSBY использует JavaScript для Mydrate Markup в полностью динамическое приложение React React – что означает, что вы можете использовать API для выполнения всевозможных динамических функций!

Давайте посмотрим, как мы можем постепенно добавлять функциональность на статический сайт GATSBY с функциями NetLify, а затем добавить аутентификацию с идентификатором NetLify, чтобы создать правильное приложение GATSBY. Мы постепенно построим до Полная работающая демонстрация с:

?? Динамические боковые страницы клиента в GATSBY
? Смертные функции (с NetLify Dev)
?? ♂️Ид API секреты от воздействия на фасад
? Аутентификация (с идентификацией NetLify)
? Защищенные маршруты
«Аутентифицированные функции без серверов (почему нет!)
? Внешний провайдер Войти с GitHub, Bitbucket, Google и т. Д.

Не статический сайт вашего родителя

Почему вы использовали что-то вроде GATSBY над Jekyll или Hugo или один из Сотни статических генераторов сайта там? Есть много причин , но один из уникальных очков продажи – как GATSBY помогает вам построить «Статические прогрессивные веб-приложения» с реагированием.

Способность Gatsby регистрация (Какое вкусное слово!) Дом означает, что вы можете сделать невероятно динамичные вещи с JavaScript и реагируют, что будет намного сложнее с устаревшими SSG.

Допустим, у вас есть типичный статический сайт GATSBY, например GATSBY-Starter – по умолчанию Отказ Вы можете NPM запустить сборку Это, и это выплевывает кучу HTML-файлов. Большой! Я могу принять это бесплатно!

Теперь представьте себе, что ваш клиент приходит к вам и просит вас добавить какую-то пользовательскую логику, которая должна быть выполнена на сервере:

Может быть, у вас есть третьими секреты API, вы не хотите разоблачить вашему пользователю.
Может быть, вам нужно Server Side Proxy, чтобы получить вопросы CORS CORS Отказ
Может быть, вам нужно пинговать базу данных, чтобы проверить свой инвентарь.

О, нет! Теперь вы должны переписать все и перейти к цифровой капельке океана!

Шучу. Нет, вам не нужно все переписать.

Красота функций без сервеса заключается в том, что она постепенно приемлема – Ваш сайт растет с вашими потребностями – А с JavaScript вы можете рерантировать целые разделы вашего сайта на основе данных Live API. Конечно, чем больше вы делаете это, тем больше ресурсов (с точки зрения пропускной способности и вычисления) это может быть, поэтому существует производительность. Ваш сайт должен быть таким же динамичным, как вам нужно, но не более. GATSBY идеально подходит для этого.

Использование NetLify DEV для добавления функций без сервера

Функции NetLify Находятся отличное низкое определение конфигурации для добавления функциональности без сервеса на ваш сайт GATSBY.

Мы предполагаем, что у вас есть сайт GATSBY, готов к работе, предпочтительно связанным с дистанционным управлением Git, как GitHub. Если у вас нет одного, вилка и скачать GATSBY-Starter – по умолчанию Отказ Давайте пройдем по шагам, чтобы добавить функции NetLify:

Установите NetLify CLI и войдите в систему :

npm i -g netlify-cli
netlify login # to link your free Netlify account

Довольно просто.

Создайте свой экземпляр NetLify для вашего сайта GATSBY :

netlify init

Вам будет предложено для «команды сборки», которая для GATSBY является пряжа строит и «Каталог публикаций», который для GATSBY является публичный Отказ Вы также можете сохранить это в NetLify.toml Config файл или CLI создаст это для вас:

[build]
  command = "yarn build"
  functions = "functions"
  publish = "public"

Как вы можете видеть в приведенном выше примере, мы также укажем, где мы сохраним наши функции творчески с именем Функции папка.

Создайте свою первую функцию NetLify : NetLify CLI имеет Набор шаблонов Доступно, чтобы помочь вам приступить к записи функций без сервеса. Просто беги:

netlify functions:create # ntl functions:create also works

Вы будете представлены в списке автозаполнения. Мы выберем Токен-Хидер Пример на данный момент. Как только вы выберете его, CLI будет скопировать необходимые файлы и установить необходимую Axios зависимости.

Обратите внимание, что Token-Hider.js Включает в себя эту строку:

const { API_SECRET = "shiba" } = process.env

Это предназначено для симуляции секретов API, которые вы не хотите подвергать опасности. Вы можете установить их как Построить переменные среды на панели инструментов NetLify вашего сайта. Вы можете назвать их все, что вам нравится, и для целей нашей демонстрации мы предоставили дефолт, но, конечно, не стесняйтесь изменить этот код, однако вам нравится. Это просто javascript ™!

Убедитесь, что функциональные зависимости устанавливаются с NetLify-лямбда (Необязательно, но рекомендуется)

Обратите внимание, что ваша функция поставляется со своими Package.json и node_modules Отказ Это означает, что каждая функция может иметь свои собственные независимо управляемые зависимости, но вам также необходимо убедиться, что эти зависимости устанавливаются при развертывании или когда кто-то еще клонирует ваше репо. Вы можете либо проверять их в Git (ugh!), Либо написать сценарий Bash для выполнения этой установки. Но не волнуйтесь, есть простая утилита для автоматизации этого:

yarn add -D netlify-lambda

И добавить скрипт Postinstall In Package.json (Это не конкретно NetLify, это часть Как работает NPM ):

  "scripts": {
    "postinstall": "netlify-lambda install"
  },

Огнитесь GATSBY и функции с NetLify Dev

NetLify Dev Является ли локальный прокси-сервер встроенный в CLI, который мы будем использовать для разработки наших функций вместе с нашим приложением GATSBY. Вы можете начать это так:

netlify dev # or ntl dev

Ваше приложение GATSBY теперь будет доступно в http://localhost: 8888 И ваша функция будет доступна в http://localhost: 8888/.netLify/Function/Token-Hider Отказ Проверьте это в вашем браузере!

Как находятся как сервер GATSBY DEV, так и серверу функций NetLify Service в одном и том же локальном порту? Как api_secret вы установили на стороне NetLify, доступны в местном развитии? Грубый ментальный образ у вас должен быть выглядит что-то вроде этого :

Вы можете ударить свою функцию NetLify из любого места в вашем приложении GATSBY! Например, в любом обработчике событий или метод жизненного цикла, вставьте:

fetch("/.netlify/functions/token-hider")
  .then(response => response.json())
  .then(console.log)

И посмотрите список изображений для собак в вашей консоли. Если вы новичок, чтобы реагировать, я настоятельно рекомендую Чтение через документы React Чтобы понять, где и как вставить обработчики событий, чтобы вы могли, например, Ответить на кнопку Нажмите Отказ

Добавление аутентификации

Итак, да, ваш сайт теперь может быть более динамичным, чем любой статический сайт: он может поразить любую базу данных или API. Вы можете скрыть токены API от посторонних глаз. Он проводит кольца вокруг CORS (кстати, вы также можете использовать NetLify Redirects для этого). Но это не приложение приложение. Все же!

Ключевая вещь о веб-приложениях (и, давайте посмотрим на него, ключевая вещь, за которую пользователи действительно платят) – это все они имеют некоторую концепцию Пользователь И это приносит с ним всевозможность осложнений от безопасности до государственного управления на Контроль доступа на основе ролей Отказ Весь маршруты должны быть охраняемой аутентификацией, а конфиденциальное содержание, защищенное от статического поколения GATSBY. Иногда есть вещи, которые вы – не хотите, чтобы пауки Google посмотреть!

Это другой уровень беспокойства, который усердно писать в той же статье, что и типичный учебник GATSBY. Но мы здесь, чтобы сделать приложения, так что давайте принесем это!

Добавление NetLify Identity и аутентифицированные страницы в GATSBY

Включить идентичность NetLify : Identity NetLify не включается по умолчанию. Вам придется отправиться на свой сайт администратора (например, https://app.netlify.com/sites/your_awesome_site/identyity ), чтобы включить его. Прочитайте документы Для получения дополнительной информации о том, что вы можете сделать, например, добавьте Facebook или Google социальный вход!
Установить зависимости : NPM Установите GATSBY-Plugin-NetLify-Identity React - NetLify-Identity-Vidget @ Reach/Dialog @ Riss/Tabs @ Reach/Visual - Hidden GATSBY-Plugin-Create-Client-Paths
Настроить GATSBY : Для динамики!

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-create-client-paths`,
      options: { prefixes: [`/app/*`] },
    },
    {
      resolve: `gatsby-plugin-netlify-identity`,
      options: {
        url: "https://YOUR_AWESOME_SITE_INSTANCE_HERE.netlify.com",
      },
    },
  ],
}

Это устанавливает все под /приложение Маршрут должен быть динамичным на клиентах, что означает, что вы можете положить его за стену аутентификации.

Добавить виджет входа в систему : NetLify-Identity-Widget Рамочная агностическая наложение, которая отправляется с хорошей регистрацией/для входа в систему. Однако это пакет 60 кБ, поэтому есть альтернатива 6 КБ, которая просто предполагает, что вы используете React: React - NetLify-Identity-Widget Отказ

Виджет реализован как доступный модаль с @ REACH/диалог Так что вам нужно поставить его где-нибудь в вашем приложении:

// src/app/login.js
import React from "react"
import { navigate } from "gatsby"

import { IdentityModal } from "react-netlify-identity-widget"
import "react-netlify-identity-widget/styles.css" // delete if you want to bring your own CSS

export default function Login() {
  const [dialog, setDialog] = React.useState(false)
  return (
    
      Log in
      
       setDialog(false)}
        onLogin={user => navigate("/app/profile")}
        onSignup={user => navigate("/app/profile")}
      />
    
  )
}

React - NetLify-Identity-Widget Использует контекст React, поэтому обычно требует добавления провайдера, но GATSBY-Plugin-NetLify-Identity Уже это сделало для вас (это вся цель!).

Как вы можете ожидать, вы можете использовать этот контекст в остальной части вашего приложения. React - NetLify-Identity-Widget Экспорт A . Пользовательский потребительский крюк называется apsedentitycontext , что помогает сделать некоторые проверки времени выполнения и облегчают печатать TypeScript, удаляя undefined чек об оплате.

apsedentitycontext Возвращает личность Объект и Вы можете увидеть множество данных и методов, которые он подвергается вам на документах Отказ Давайте использовать их для реализации Навкар компонент!

// src/app/components/NavBar.js
import React from "react"
import { Link, navigate } from "gatsby"
import { useIdentityContext } from "react-netlify-identity-widget"

export default function NavBar() {
  const { user, isLoggedIn, logoutUser } = useIdentityContext()
  let message = isLoggedIn
    ? `Hello, ${user.user_metadata && user.user_metadata.full_name}`
    : "You are not logged in"
  const handleClick = async event => {
    event.preventDefault()
    await logoutUser()
    navigate(`/app/login`)
  }
  return (
    
      {message}
      
        Navigate the app: 
        Main
        Profile
        {isLoggedIn ? (Logout) : (Login)}
      
    
  )
}

Напишите остальную часть вашего приложения : Из-за нашей конфигурации в GATSBY-Plugin-Create-Client-Paths любые подпункты в SRC/Pages/App будет освобожден от GATSBY статического поколения. Чтобы сохранить разделитель между приложением и сайтом Crystal Crystal, я люблю иметь весь мой динамический код GATSBY в специальном приложение папка. Это означает, что вы можете использовать @ REACH/RUTER с React - NetLify-Identity-Widget Чтобы написать стандартное приложение Dynamic React с частными, аутентифицированными маршрутами. Вот какой-то пример код, чтобы дать вам представление о том, как их подключить:

// src/app/app.js
import React from "react"
import { Router } from "@reach/router"
import Layout from "../components/layout"
import NavBar from "./components/NavBar"
import Profile from "./profile"
import Main from "./main"
import Login from "./login"
import { useIdentityContext } from "react-netlify-identity-widget"
import { navigate } from "gatsby"

function PrivateRoute(props) {
  const { isLoggedIn } = useIdentityContext()
  const { component: Component, location, ...rest } = props

  React.useEffect(
    () => {
      if (!isLoggedIn && location.pathname !== `/app/login`) {
        // If the user is not logged in, redirect to the login page.
        navigate(`/app/login`)
      }
    },
    [isLoggedIn, location]
  )
  return isLoggedIn ?  : null
}
function PublicRoute(props) {
  return {props.children}
}

export default function App() {
  return (
    
      
      
        
        
          
          
        
      
    
  )
}

ФГ, который был много! Но у вас должна быть прочная отправная точка для вашего приложения сейчас:)

Бонусные баллы: аутентифицированные функции NetLify?

Так же, как Каждый волшебный акт имеет залог, поворот и престиж У меня есть последний тидбит для вас. Ничего на стороне клиента безопасна Отказ Хотя вы можете отправить администратор идентификатора идентификации NetLififififififififififififififify к вашим конечным точкам функции NetLify для аутентифицированного доступа из вашего приложения GATSBY (например, в корпусе запроса на почту), вы никогда не будете действительно уверены, что этот поток будет безопасным либо от вредоносных пользователей, либо Snooping.

Лучший способ сделать аутентифицированные действия внутри функций без сервеса – это сделать это из внутри контекст самой функции. К счастью, NetLify Идентичность и функции работают без проблем вместе Отказ Все, что вам нужно сделать, это отправить вдоль пользователя Jwt При ударе вашей конечной точки:

// in your gatsby app
const { user } = useIdentityContext()
// in an event handler
fetch("/.netlify/functions/auth-hello", {
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
    Authorization: "Bearer " + user.token.access_token, // like this
  },
}).then(/* etc */)

Если даже это слишком много котельной, вы даже можете использовать обертку извлечения, которые отправляются с личность объект:

// in your gatsby app
const { authedFetch } = useIdentityContext()
// in an event handler
authedFetch("/.netlify/functions/auth-hello").then(/* etc */)

А затем в вашей функции NetLify вы можете теперь проверить Пользователь Объект или передайте его на ваш конец API или базе данных:

module.exports = { handler }
async function handler(event, context) {
  if (context.clientContext) {
    const { user } = context.clientContext
    // you can get actual user metadata you can use!
    return {
      statusCode: 200,
      body: JSON.stringify({
        msg: "super secret info only available to authenticated users",
        user,
      })
    }
  } else {
    return {
      statusCode: 401,
      body: JSON.stringify({
        msg:
          "Error: No authentication detected! Note that netlify-lambda doesn't locally emulate Netlify Identity.",
      }),
    }
  }
}

GATSBY + NetLify – идеально подходит для вашего следующего хакатона

Как видите, это несколько шагов, чтобы превратить свои статические сайты GATSBY в динамические, аутентифицированные, полностью неверные приложения с бесплатными инструментами NetLify. Это делает GATSBY идеальный инструмент для вашего следующего приложения. Если вы у вас в хакатоне, короткие вовремя или просто хотите увидеть полную рабочую демонстрацию, проверьте любую из следующих ссылок.

Код: https://github.com/sw-yx/jamstack-hackathon-starter.
Стартер: https://www.gatsbys.org/starters/jamstack-hackathon-starter.
Живая демонстрация: https://jamstack-hackathon-starter.netlify.com/