Как войти в систему из одностраничного приложения для реагирования на Laravel 7.x в другом домене? - PullRequest
Новая
       71

Как войти в систему из одностраничного приложения для реагирования на Laravel 7.x в другом домене?

0 голосов
/ 19 июня 2020

У меня есть одна страница create-response-app , работающая на localhost:3000, и я хочу войти в laravel 7.x экземпляр, работающий на myapp.loc (vhost).

В конце концов я хотел бы, чтобы одна страница работала на app.mysite.com с laravel работала на api.mysite.com.

Я могу войти в свой laravel экземпляр прямо из myapp.loc. Я установил Laravel паспорт и строительные леса и др. c и могу создавать идентификаторы клиентов и секреты, но я не уверен, нужны ли они, и если да, то как их использовать.

То, в чем я не уверен и не могу найти никакой документации, - это то, как войти в laraval из моего SPA (работающего на localhost:3000). Я установил заголовки CORS и могу подключать запросы, которые не требуют аутентификации, но я не знаю, как войти в систему или структурировать запросы аутентификации после входа в систему .

Я могу ' t найти какую-либо документацию по ax ios .post / get запросы с акцентом на вход из другого домена и поддержание доступа на основе пользователей.

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

  1. Может ли laravel действовать как серверная часть для моего одностраничного приложения из другого домена?
  2. Если да, то есть ли задокументированные передовые практики / хорошо известные пути для достижения этой цели?
  3. Если да, то как будет выглядеть образец входа в систему ax ios и последующий вызов сеанса? (например, полезная нагрузка и форма заголовка)

Ответы [ 2 ]

3 голосов
/ 19 июня 2020

  1. Да, вы можете, я предлагаю использовать https://laravel.com/docs/7.x/sanctum вместо паспорта, потому что его проще настроить и он был создан специально для этого сценария.

  2. Вам необходимо настроить CORS, используя официальный Laravel Пакет https://github.com/fruitcake/laravel-cors, таким образом вы откроете CORS Laravel, чтобы иметь доступ к нему из любого локального хоста или любого домена. который вы можете настроить в allowed_origins. внутри конфигурационного файла cors. php в соответствии с документацией пакета.

  3. После настройки Sanctum / Passport и обеспечения генерации необходимого токена для вашего SPA с помощью createToken метод, описанный в документах Sanctum или Passport, вы должны сохранить токен для подключения к защищенным конечным точкам, однако они рекомендуют использовать Cook ie аутентификацию на основе SPA , но это не является строго необходимым.

Создать службу API

В этом примере я создам службу API для инкапсуляции вызовов API 

import axios from 'axios';

const URI = 'https://yourlaravel.api/api/';

axios.defaults.headers.common = { Accept: 'application/json', 'Content-Type': 'application/json' };

const ApiInstance = axios.create();

const API = {
  login: (user) => {
    return ApiInstance.post(`${URI}login`, user);
  },
  getUser: () => {
    return ApiInstance.get(`${URI}user`);
  },
  setUser: (user) => {
    return ApiInstance.post(`${URI}user`, user);
  },
};

Отправьте запрос на вход на ваш конечная точка входа в систему и сохранение токена 

import API;


API.login({email:'mail@domain.com',password:'32323'})
    .then(response=>{
      //save the token
      //response.data.accessToken  
})

Получение данных из ваших защищенных конечных точек с помощью токена 

//Set the default authorization header when you have an access token
axios.defaults.headers.common = {'Authorization': `Bearer ${token}`}


//Get your data

API.getUser().then(response=>{
      //response.data
})

//Post something

API.setUser({user:'Os'}).then(response=>{
      //response.data
})
0 голосов
/ 19 июня 2020

Все это возможно, вам просто нужно настроить cors, и вы готовы к go. Для аутентификации вы можете использовать паспорт или собственную настройку ключа приложения, все зависит от того, чего вы пытаетесь достичь. Я предлагаю прочитать об API RESTfull, это было бы хорошим началом.

Чтобы выполнить рукопожатие между FE и BE на FE, у вас будет форма входа в систему, которая отправит электронный запрос в BE (backend api), и если вход в систему прошел успешно, вы отправляете обратно ключ, который затем должен сохранить FE. Любые будущие запросы от FE должны добавлять этот ключ в заголовок, чтобы получить доступ к авторизованным областям.

В Google должно быть много информации по этому вопросу (RESTfull Api и аутентификация токена).

...