3-being OAuth mit React und Redux

Question

Was ist die akzeptierte Methode zur Authentifizierung mit OAuth2 in React mit Redux?

Mein aktuelles Setup umfasst das Wrapping von Komponenten des react-routers mit Redux-Auth-Wrapper, und wenn der Benutzer nicht authentifiziert wird, wird eine Aktion ausgelöst, die die erforderliche externe URL-GET-Anforderung an einen OAuth-Provider sendet (in diesem Fall google).

OAuth2 erfordert das Senden einer Rückruf-URL mit Ihrer Anfrage. Daher habe ich einen reac-Router-URL-Endpunkt/eine Komponente eingerichtet, die bei der Ausführung von onComponentDidMount Aktionen zum Analysieren des zurückgegebenen Hashs vom OAuth-Provider absetzt Daten im redux-Speicher und leiten den Benutzer an die ursprünglich angeforderte Seite weiter, die im Parameter state der OAuth-Anforderung gespeichert ist.

Das alles scheint sehr hacky. Es ist auch schwierig, die OAuth2-Callback-URL zwischen Produktions- und Entwicklungsumgebungen zu verwalten. Hat jemand einen glatten OAuth2-Workflow?

P.S. Ich muss das Authentifizierungs-Token an den Client senden, damit es verwendet werden kann, um clientseitige API-Anforderungen zu stellen, die dieses Token verwenden, um zu überprüfen, ob der Benutzer Zugriff auf diese Ressourcen hat.

Answer 1

Die folgende Funktion ruft die Token- und Ablaufdaten von Google ab und speichert sie im lokalen Speicher. Es könnte modifiziert werden, um diese Daten einfach als ein Objekt zurückzugeben.

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

Ich habe eine bessere Lösung gefunden, bei der ein neues Fenster mit dem OAuth-Anmeldeformular geöffnet wird, das dann vom übergeordneten Fenster abgefragt wird, um festzustellen, ob es an die Rückruf-URL weitergeleitet wurde. Sobald dies der Fall ist, können Sie die untergeordnete Fenster-URL mit dem Hash erfassen, der die OAuth-Token-Informationen im übergeordneten Fenster enthält, und das untergeordnete Fenster schließen. Sie können diesen Hash dann analysieren und dem Anwendungsstatus hinzufügen.

This tutorial war besonders hilfreich.