Auth0 के lock.on ('प्रमाणीकृत') ईवेंट

Question

पर कार्रवाई प्रेषण मैं अपने रिएक्ट/रेडक्स ऐप में नया Auth0 लॉक 10 लागू करना चाहता हूं।

मैंने इंटरनेट पर जांच की है, लेकिन मेरे प्रश्न से मेल नहीं खाता है। एक ट्यूटोरियल here है, लेकिन यह रीडायरेक्ट (डिफ़ॉल्ट अब) मोड के बजाय पॉपअप मोड का उपयोग करता है। एक और one प्रवाह का यूआरएल, जो ताला से 10

यहाँ में बेकार है पार्स करता है:

• Auth0Lock instantiated हो जाता है प्रवेश बटन पर उपयोगकर्ता क्लिक करता है, यह पता चलता जब जब मेरे एप्लिकेशन
• शुरू होता है लॉक विजेट (lock.show()) और LOGIN_REQUEST डिस्पैच
• ताला auth0.com पर अपने प्रमाणीकरण करता है (मेरे स्थानीय होस्ट से बाहर रीडायरेक्ट)
• पुनर्निर्देशन वापस सफल प्रवेश के बाद मेरे स्थानीय होस्ट करने के लिए, Auth0Lock instantia मिल जब मैं प्रवेश बटन, redux लकड़हारा शो पर क्लिक करें अब

  import Auth0Lock from 'auth0-lock' 
  
  export const LOGIN_REQUEST = 'LOGIN_REQUEST' 
  export const LOGIN_SUCCESS = 'LOGIN_SUCCESS' 
  export const LOGIN_ERROR = 'LOGIN_ERROR' 
  
  function loginRequest() { 
      return { 
      type: LOGIN_REQUEST 
      } 
  } 
  
  function loginSuccess(profile) { 
      return { 
      type: LOGIN_SUCCESS, 
      profile 
      } 
  } 
  
  function loginError(error) { 
      return { 
      type: LOGIN_ERROR, 
      error 
      } 
  } 
  
  // import AuthService to deal with all the actions related to auth 
  const lock = new Auth0Lock('secret', 'secret', { 
      auth: { 
      redirectUrl: 'http://localhost:3000/callback', 
      responseType: 'token' 
      } 
  }) 
  
  lock.on('authenticated', authResult => { 
      console.log('Im authenticated') 
      return dispatch => { 
      return dispatch(loginSuccess({})) 
      } 
  }) 
  
  lock.on('authorization_error', error => { 
      return dispatch => dispatch(loginError(error)) 
  }) 
  
  
  export function login() { 
      lock.show() 
      return dispatch => {return dispatch(loginRequest())} 
  } 
  

  : टेड फिर

• मैं यहाँ एक lock.on('authenticated') घटना के लिए इंतजार LOGIN_SUCCESS प्रेषण करने के लिए

और अपने कार्यों/index.js कोड है मुझे LOGIN_REQUEST एक्शन भेजा गया, मैं लॉक विजेट देखता हूं, मैं लॉगिन कर सकता हूं, यह auth0.com पर रीडायरेक्ट करता है और फिर मेरे localhost:3000/callback पर एक सुंदर टोकन के साथ रीडायरेक्ट करता है। सब ठीक है, मैं अपने कंसोल में Im authenticated संदेश देखता हूं, लेकिन रेडक्स लॉगर मुझे नहीं दिखाता है कि LOGIN_SUCCESS कार्रवाई भेज दी गई है।

मैं रेडक्स के लिए नया हूं, और मुझे लगता है कि मुझे एक चीज़ याद आ रही है, लेकिन मैं इसे पकड़ नहीं सकता। धन्यवाद!

Answer 1

मैं अंत में अंदर actions.js में डाल, मैं एक नया समारोह checkLogin()

// actions.js 

const authService = new AuthService(process.env.AUTH0_CLIENT_ID, process.env.AUTH0_DOMAIN) 

// Listen to authenticated event from AuthService and get the profile of the user 
// Done on every page startup 
export function checkLogin() { 
    return (dispatch) => { 
    // Add callback for lock's `authenticated` event 
    authService.lock.on('authenticated', (authResult) => { 
     authService.lock.getProfile(authResult.idToken, (error, profile) => { 
     if (error) 
      return dispatch(loginError(error)) 
     AuthService.setToken(authResult.idToken) // static method 
     AuthService.setProfile(profile) // static method 
     return dispatch(loginSuccess(profile)) 
     }) 
    }) 
    // Add callback for lock's `authorization_error` event 
    authService.lock.on('authorization_error', (error) => dispatch(loginError(error))) 
    } 
} 

और मेरे App घटक के निर्माता में कहा जाता है बनाया है, मैं इसे कहते

import React from 'react' 
import HeaderContainer from '../../containers/HeaderContainer' 

class App extends React.Component { 
    constructor(props) { 
    super(props) 
    this.props.checkLogin() // check is Auth0 lock is authenticating after login callback 
    } 

    render() { 
    return(
     <div> 
     <HeaderContainer /> 
     {this.props.children} 
     </div> 
    ) 
    } 
} 

App.propTypes = { 
    children: React.PropTypes.element.isRequired, 
    checkLogin: React.PropTypes.func.isRequired 
} 

export default App 

पूर्ण के लिए यहाँ देखें स्रोत कोड: https://github.com/amaurymartiny/react-redux-auth0-kit

Answer 2

मेरे Reactjs ज्ञान सीमित है, लेकिन यह एक टिप्पणी के लिए लंबे समय तक के लिए होने के लिए शुरू हो गया था ...

आप लॉक की घटनाओं से store.dispatch(...) नहीं बुला किया जाना चाहिए?

उन घटनाओं को एक समारोह वापस करने के बाद कुछ भी नहीं किया जाएगा जब तक कि कोई व्यक्ति वापस आने वाले फ़ंक्शन को आमंत्रित नहीं करता है और मेरे ज्ञान में लॉक कॉलबैक फ़ंक्शन के वापसी मूल्य के साथ कुछ भी नहीं करता है जिसे आप ईवेंट हैंडलर के रूप में पास करते हैं।

Answer 3

मुझे लगता है कि क्या हो रहा है auth0 ब्राउज़र विंडो को लॉगिन प्राधिकरण (auth0 खुद, फेसबुक, Google, आदि) पर रीडायरेक्ट करता है, फिर आपको अपने ऐप पर वापस भेज देता है, जो आपके पृष्ठ को फिर से लोड करता है, अनिवार्य रूप से सभी राज्यों को मिटा देता है। तो आपका प्रेषण भेजा जाता है, फिर पृष्ठ पुनः लोड होता है, जो आपके राज्य को मिटा देता है। यदि आप Redux स्थिति के बजाय स्थानीय स्टोरेज का उपयोग करते हैं तो लॉग इन करना प्रतीत होता है, लेकिन मुझे यकीन नहीं है कि यह अन्य सभी राज्यों को कैसे प्रभावित करेगा, मुझे अपने ऐप में डालना होगा।