Используйте сеанс Rails на внешнем сайте благодаря CORS

Сегодня вы узнаете, что CORS — это не просто регион Франции, как настроить файл cookie сеанса Rails для работы с несколькими доменами, как изменить правила CORS, чтобы разрешить загрузку ресурсов из внешнего источника, и как использовать выборку и немного JS для отображения пользовательских данных на статическом сайте.

Не паникуйте, мы вам все объясним.

В программе:

Привет и добро пожаловать на 11 выпуск Ruby Biscuit.
Теперь у вас 216 подписчиков 🥳 Если вы еще не зарегистрированы:

В Capsens мы систематически разделяем логику платформы (основной бизнес) и общедоступные маркетинговые страницы. Таким образом, мы обычно создаем два сайта:

• А платформа в Ruby on Rails, целью которого является обеспечение безопасности, эффективности и надежности благодаря многочисленным этапам проверки, прежде чем модификация будет развернута в рабочей среде. (pull request с просмотром, CI, CD, проверкой зависимостей на отсутствие CVE и, наконец, двойной проверкой человеком)

• Статический (или частично статичный) сайт-витрина в NextJs, который посвящен приобретению. Публично доступный, он призван быть привлекательным, легко модифицируемым, очень быстрым и оптимизированным для поисковых систем (SEO).

Преимущество разделения логики в том, что статический сайт-витрина (Привет Джемстек) может поглощать огромное количество трафика, так как за ним нет сервера. Поэтому это очень практично во время телетрансляции, потому что большое количество посетителей получают информацию на сайте витрины, не заходя на платформу. Таким образом, окно действует как буфер.

Мы действительно не единственные и не первые, кто принял эту логику. Вот некоторые примеры :

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

Сегодня мы рассмотрим решение, позволяющее безопасно использовать сеанс Ruby on Rails из другого приложения. Это решение можно применить к любой CMS или любому статичному веб-сайту (например, NextJs).

1. Создайте аутентифицированный маршрут JSON,

2. Управляйте нашим файлом cookie сеанса в нескольких доменах,

3. Настроить правила Совместное использование ресурсов между источниками (КОРС),

4. Исправьте ошибку invalid host,

5. Добавьте JS-скрипт для получения данных,

6. Бонус: используйте локальное хранилище для кэширования данных.

Чтобы следовать этому руководству, вам потребуется приложение Rails с Devise или любой другой системой аутентификации на основе файлов cookie.
Вам также понадобится отдельный статический веб-сайт. Мы будем использовать простую HTML-страницу, но подойдет любая CMS/фреймворк.

Сначала мы создадим маршрут /users/me который по умолчанию будет иметь формат JSON и будет указывать на действие users/me#show :

Далее нам нужно создать наш Users::MeController состоит из уникального экшн-шоу:

Наконец, мы добавим простой тест запроса:

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

Для этого нам нужно создать инициализатор session_store.rb :

Обратите внимание, что при развертывании этих изменений в производственной среде все ваши пользователи автоматически выходят из системы. Поэтому обязательно делайте это в то время, когда у вас нет большого трафика.

Эта конфигурация больше не позволит вам использовать localhost. Вам понадобится домен, который разрешает поддомены из-за настройки: tld_length: 2.

Вы можете, например, использовать dev.lvh.me:3000.

Чтобы активировать его, вам нужно указать *.lvh.me на вашем локальном IP-адресе, отредактировав файл конфигурации hosts на вашем компьютере. На Mac или Linux выполните:

sudo nano /etc/hosts

Введите свой пароль, затем добавьте эту строку в конец файла:

127.0.0.1 subdomain.localhost

Теперь ваш файл должен выглядеть так:

Теперь вы должны быть в состоянии использовать dev.lvh.me:3000 для запуска вашего локального сервера.

Нам также необходимо настроить нашу политику совместного использования ресурсов между источниками (CORS), чтобы разрешить нашему статическому веб-сайту извлекать данные из нашего приложения Rails.

Для этого нам сначала нужно добавить драгоценный камень rack-cors в наше приложение:

gem "rack-cors", "~> 1.1", ">= 1.1.1"

Не забудьте запустить bundle install для установки драгоценного камня.

Теперь давайте создадим наш инициализатор cors.rb :

Эта конфигурация позволяет браузерам, источник которых www.yourmarketingwebsitedomain.com для загрузки содержимого с пути /users/me нашей платформы.

Обратите внимание, что параметр `origins` принимает список значений, если вы хотите разрешить загрузку из нескольких источников. В этом случае вы можете написать это так:

Поскольку мы делимся учетными данными, невозможно авторизовать какой-либо источник с помощью подстановочного знака (origins(“*”)).

L’вариант credentials: true позволяет добавить заголовок запроса Access-Control-Allow-Credentials, что позволяет серверу обмениваться учетными данными с внешним интерфейсом, когда выполняются другие условия. Учетные данные — это файлы cookie, заголовки авторизации или сертификаты клиента TLS.

Когда вы переключаетесь на куки cross-subdomainвы можете столкнуться со странной ошибкой при выполнении тестов запросов:

ArgumentError: invalid domain: ".example.com"

Эта ошибка вызвана компьютерная графиказависимость стойка. Эта ошибка исправлена ​​в его версии 0.3.6. Итак, чтобы решить эту проблему, просто установите ее версию в свой Gemfile так :

gem "cgi", ">= 0.3.6"

Не забудьте затем запустить bundle install в вашем терминале и перезапустите сервер.

Теперь, когда наше приложение Rails настроено, мы можем перейти к интерфейсной части. Просто вставьте этот код в раздел кода нижнего колонтитула вашей HTML-страницы:

Что делает этот код?

1. Он добавляет тег script, который будет выполнять запрос fetch() на ENDPOINT. NB: обязательно замените значение константы доменом и путем вашего приложения Rails.

2. Если пользователь не вошел в приложение Rails, он остановится на этом из-за конфигурации. redirection : "error" (Классическое поведение Devise заключается в перенаправлении на страницу входа).

3. Если пользователь вошел в приложение Rails, он вызовет функцию fillUserData(). Эта функция принимает все элементы DOM с классом .remotefill и, исходя из их атрибута remote-keyон находит данные в возвращенном ответе и заменяет содержимое страницы соответствующим значением.

Рассмотрим следующий пример.

Ответ от вашего приложения Rails:

и ваш интерфейсный сайт содержит следующее:

при выполнении функция fillUserData() заменит эти элементы на:

Имейте в виду, однако, что это только интерфейсный код, поэтому, если вы решите скрыть или показать содержимое на стороне клиента на своем сайте, любой, кто обладает некоторыми знаниями в области веб-разработки, сможет получить к нему доступ.

В текущем состоянии эта реализация будет отправлять HTTP-запрос к вашему приложению Rails при каждой загрузке страницы. Это не оптимально. Мы могли бы использовать localStorage браузера, чтобы кэшировать эти данные на стороне клиента и уменьшить количество HTTP-запросов.

Для этого мы можем изменить скрипт следующим образом:

Скрипт проверяет, содержит ли localStorage браузера userData получено менее 5 минут назад:

1. Если да, это вызовет наш fillUserData() с его содержанием;

2. В противном случае он выполнит сетевой запрос для получения данных из нашего приложения Rails, а затем вызовет функцию. fillUserData().

Давайте изменим наш скрипт следующим образом:

Обратите внимание, что localStorage не реализует тайм-аут по своей сути. Вот почему мы создали функции getWithExpiry эт setWithExpiry. Для получения дополнительной информации см.статья Сохам Камани.

Как вы знаете, за Ruby Biscuit стоит Capsens 👋, веб-агентство, специализирующееся на Ruby on Rails уже 10 лет.

Со временем мы поняли, что многие разработчики выбирают свою компанию несколько случайно, когда они могут лучше процветать и ценить себя в структурах, которые им подходят.

Что замечательно, так это то, что мы в Capsens отлично знаем экосистему Ruby on Rails во Франции и имеем обширную сеть компаний.

Вот почему мы объявляем в этом информационном бюллетене, что используем наши знания о профессии, чтобы помочь вам найти работу своей мечты!

Конкретно:

1. Хочешь найти работу своей мечты? Тогда ответьте на это письмо! Вы можете сказать «Привет», этого достаточно!

2. Мы сразу предложим вам слоты под видео для знакомства

3. Тогда мы предложим вам 3 компании, которые соответствуют тому, кто вы есть. И для каждой из этих позиций:

   1. Вы можете пообщаться с разработчиком команды (не с самим рекрутером), чтобы узнать, как обстоят дела изнутри. Без балды

   2. Разработчик Capsens поможет вам:

      1. Проанализируйте ситуацию: что выглядит хорошо, какие опасности, какие условия поставить, чтобы все прошло хорошо.

      2. Подготовим вас к правильной работе

Вы хотите двигаться к более полноценной профессиональной жизни? 😀 Что ж, ждем твоего письма! А если вам уже нравится ваша работа, не обращайтесь к нам! Или сделайте это, чтобы порекомендовать нам вашу коробку 😉

Вызов последнего информационного бюллетеня был не в последнюю очередь!

Напоминаю, инструкция была следующей:

Вычислить треугольник Паскаля до заданного количества строк.

В треугольнике Паскаля каждое число вычисляется путем сложения чисел справа и слева от текущей позиции в предыдущей строке.

    1
   1 1
  1 2 1
 1 3 3 1
1 4 6 4 1
# ... etc

Вот ответ Антуана:

def pascal(i)
  result = []
  i.times do
    previous = 0
    result.map! do |element|
      previous + (previous = element)
    end
    result << 1
  end
  result
end

Правила следующего задания:

Напишите метод, который может определить, является ли данный год високосным или нет. Если вы не знаете правил, вот они:

• Годы, которые делятся на 4, являются високосными.

• Годы, которые делятся на 100, не являются високосными.

• Годы, которые делятся на 400, являются високосными.

Как и в прошлый раз, присылайте мне свои ответы, отвечая на этот информационный бюллетень, и я опубликую лучший из них в следующем выпуске!

Если вы зашли так далеко, у вас есть два варианта:

Делиться

Исмаэль, Антуан и Мелани и многие рецензенты 🙂