3 legged OAuth с реактивом и Redux

Question

Что такое принятый метод аутентификации с помощью OAuth2 в React с использованием Redux?

Моя текущая настройка включает в себя перенос компонентов-ответчиков с использованием Redux-Auth-Wrapper, а если пользователь не аутентифицирован, отправляет действие, которое делает необходимым внешний запрос GET-запроса поставщику OAuth (в данном случае Google).

OAuth2 требует отправки URL-адреса обратного вызова с вашим запросом, поэтому я настроил конечную точку/компонент URL-адреса реактивного маршрутизатора, который при запуске onComponentDidMount отправляет действия для синтаксического анализа возвращаемого хэша, который поступает от поставщика OAuth, данных в хранилище redux и перенаправить пользователя на запрашиваемую им страницу, которая хранится в параметре состояния запроса OAuth.

Это все кажется очень взломанным. Также сложно управлять URL-адресом обратного вызова OAuth2 между средами разработки и разработки. У кого-нибудь работает рабочий процесс OAuth2?

P.S. Мне нужно получить Auth Token для клиента, чтобы он мог использоваться для того, чтобы клиентские запросы API, которые используют этот токен, чтобы проверить, имеет ли пользователь доступ к этим ресурсам.

Answer 1

Ниже приведена функция, которая будет извлекать данные маркера и истечения срока действия из Google и хранить их в локальном хранилище. Он может быть изменен, чтобы просто вернуть эти данные в качестве объекта.

function oAuth2TokenGet() { 
 
    // TODO: First try to get the token from sessionStorage here 
 

 
    // Build the oauth request url 
 
    const responseType = 'token'; 
 
    const clientId = 'YOUR-GOOGLE-CLIENT-ID'; 
 
    const redirectUri = 'YOUR-REDIRECT-URL'; 
 
    const scope = 'email profile'; 
 
    const prompt = 'select_account'; 
 
    const url = `https://accounts.google.com/o/oauth2/v2/auth?response_type=${responseType}&client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}&prompt=${prompt}`; 
 

 
    // Open a new window 
 
    const win = window.open(url, 'name', 'height=600,width=450'); 
 
    if (win) win.focus(); 
 

 
    const pollTimer = window.setInterval(() => { 
 
    try { 
 
     if (!!win && win.location.href.indexOf(redirectUri) !== -1) { 
 
     window.clearInterval(pollTimer); 
 

 
     // Get the URL hash with your token in it 
 
     const hash = win.location.hash; 
 
     win.close(); 
 

 
     // Parse the string hash and convert to object of keys and values 
 
     const result = hash.substring(1) 
 
      .split('&') 
 
      .map(i => i.split('=')) 
 
      .reduce((prev, curr) => ({ 
 
      ...prev, 
 
      [curr[0]]: curr[1], 
 
      }), {}); 
 

 
     // Calculate when the token expires and store in the result object 
 
     result.expires_at = Date.now() + parseInt(hash.expires_in, 10); 
 

 
     // TODO: Persist result in sessionStorage here 
 
     } 
 
    } catch (err) { 
 
     // do something or nothing if window still not redirected after login 
 
    } 
 
    }, 100); 
 
}

Answer 2

У меня появилось лучшее решение, которое включает в себя открытие нового окна с формой входа OAuth, которая затем обрабатывается родительским окном, чтобы увидеть, перенаправлено ли оно на URL обратного вызова. После этого вы можете зафиксировать url дочернего окна с хешем, который содержит информацию токена OAuth в родительском окне и закрыть дочернее окно. Затем вы можете разобрать этот хэш и добавить его в состояние своих приложений.

This tutorial был особенно полезен.