Ember-Auth Authentication for Ember

A introduction to Ember Add on Ember-Auth. Authentication addon for ember with a bunch of features.

https://github.com/heartsentwined/ember-auth

Transcript

1. AUTHENTICATION FOR EMBERJS BY HEARTSENTWINED EMBER AUTH
2. TODAY @GITHUB ANNOUNCED THEY HAVE SKIPPED PASSED TWO-STEP AUTHENTICATION AND ARE GOING DIRECTLY TO DUBSTEP AUTHENTICATION. @TOPFUNKY
3. EMBER AUTH Well tested Code written in Emberscript Rails + Devise Demo Super Cool Interactive Docs
4. EMBER AUTH FEATURES Use with EmberData or Ember Model Install with Gem, NPM, and Bower Remember me Pre-authentication by URL query params Redirect on sign in / sign out Timeout authenticated sessions
5. INSTALLING EMBER AUTH . . . . / / = r e q u i r e h a n d l e b a r s / / = r e q u i r e e m b e r # # r c 6 . 2 / / = r e q u i r e e m b e r - d a t a / / = r e q u i r e l i b / e m b e r - a u t h # # A d d E m b e r - A u t h a f t e r E m b e r / / = r e q u i r e l i b / e m b e r - e a s y F o r m / / = r e q u i r e l i b / e m b e r - v a l i d a t i o n s . . . / / = r e q u i r e a u t h # # E m b e r - A u t h C o n f i g u r a t i o n / / = r e q u i r e a p p
6. THE ROUTER A p p . R o u t e r . m a p ( f u n c t i o n ( ) { t h i s . r e s o u r c e ( " o w n e r " , { p a t h : ' / ' } , f u n c t i o n ( ) { t h i s . r e s o u r c e ( ' r e s t a u r a n t s ' , { p a t h : ' / r e s t a u r a n t s / : r e s t a u r a n t _ i d ' t h i s . r o u t e ( " e d i t " ) ; } ) ; } ) ; t h i s . r o u t e ( ' l o g i n ' ) ; t h i s . r o u t e ( ' r e s e t _ p a s s w o r d ' ) ; } ) ;
7. THE OWNER ROUTE A p p . O w n e r R o u t e = E m . R o u t e . e x t e n d ( { m o d e l : f u n c t i o n ( ) { r e t u r n A p p . R e s t a u r a n t O w n e r . f i n d ( 2 8 4 6 7 ) ; } , s e t u p C o n t r o l l e r : f u n c t i o n ( c o n t r o l l e r , o w n e r ) { t h i s . _ s u p e r ( c o n t r o l l e r , o w n e r ) ; v a r r e s t a u r a n t = o w n e r . g e t ( " f i r s t R e s t a u r a n t " ) ; c o n t r o l l e r . s e t ( ' s e l e c t e d R e s t a u r a n t ' , r e s t a u r a n t ) ; } } ) ;
8. THE AUTH TOKEN API d e f c r e a t e i f p a r a m s [ " u s e r n a m e " ] . p r e s e n t ? & & p a r a m s [ " p a s s w o r d " ] . p r e s e n t ? @ u s e r = U s e r . l o g i n ( p a r a m s [ : u s e r n a m e ] , p a r a m s [ : p a s s w o r d ] ) @ u s e r . g e n e r a t e _ a u t h _ t o k e n i f @ u s e r e l s i f p a r a m s [ ' a u t h _ t o k e n ' ] . p r e s e n t ? @ u s e r = f i n d _ u s e r _ b y _ a u t h _ t o k e n p a r a m s [ ' a u t h _ t o k e n ' ] @ u s e r . g e n e r a t e _ a u t h _ t o k e n i f @ u s e r e n d i f @ u s e r r e n d e r j s o n : { : o w n e r _ i d : @ u s e r . r e s t a u r a n t _ o w n e r . i d , : a u t h _ t o k e n : @ u s e r . t o k e n _ s e l s e r e n d e r j s o n : { s u c c e s s : f a l s e } , : s t a t u s = > : u n a u t h o r i z e d e n d e n d
9. AUTH.JS A p p . A u t h = E m b e r . A u t h . c r e a t e ( { b a s e U r l : ' h t t p : / / l o c a l h o s t : 3 8 0 0 ' , s i g n I n E n d P o i n t : ' / a p i / t o k e n s ' , s i g n O u t E n d P o i n t : ' / a p i / t o k e n s ' , t o k e n K e y : ' a u t h _ t o k e n ' , t o k e n I d K e y : ' o w n e r _ i d ' } ) ;
10. LOGIN FORM { { # f o r m F o r c o n t r o l l e r } } { { # i f l o g i n E r r o r } } < s p a n c l a s s = " e r r o r " > < i c l a s s = " i c o n - w a r n i n g - s i g n " > < / i > I n v a l i d l o g i n . < / s p a n > < p > I n c o r r e c t u s e r n a m e o r p a s s w o r d . < / p > { { / i f } } { { i n p u t l o g i n U s e r n a m e p l a c e h o l d e r = " E m a i l A d d r e s s " l a b e l = " E m a i l " } } { { i n p u t l o g i n P a s s w o r d p l a c e h o l d e r = " P a s s w o r d " l a b e l = " P a s s w o r d " a s = " p a s s w o r d " } } { { # i f i s L o g g i n g I n } } < d i v c l a s s = " s a v i n g - s p i n n e r " > < / d i v > { { e l s e } } { { s u b m i t " L o g i n " c l a s s = " b u t t o n e x p a n d " } } { { / i f } } { { / f o r m F o r } }
11. LOGIN MODEL A p p . L o g i n = D S . M o d e l . e x t e n d ( E m b e r . V a l i d a t i o n s . M i x i n ) ; A p p . L o g i n . r e o p e n ( { l o g i n U s e r n a m e : D S . a t t r ( " s t r i n g " ) , l o g i n P a s s w o r d : D S . a t t r ( " s t r i n g " ) , r e m e b e r a b l e : D S . a t t r ( ' b o o l e a n ' ) , v a l i d a t i o n s : { l o g i n U s e r n a m e : { p r e s e n c e : t r u e } , l o g i n P a s s w o r d : { p r e s e n c e : t r u e , l e n g t h : { m i n i m u m : 6 } } } } ) ;
12. LOGIN CONTROLLER A p p . L o g i n C o n t r o l l e r = E m . O b j e c t C o n t r o l l e r . e x t e n d ( { l o g i n E r r o r : f a l s e , i s L o g g i n g I n : f a l s e , s u b m i t : f u n c t i o n ( ) { t h i s . s e t ( ' i s L o g g i n g I n ' , t r u e ) ; A p p . A u t h . s i g n I n ( { d a t a : { ' u s e r n a m e ' : t h i s . g e t ( " l o g i n U s e r n a m e " ) , ' p a s s w o r d ' : t h i s . g e t ( " l o g i n P a s s w o r d " ) , ' r e m e m b e r ' : t r u e } } ) } } ) ;
13. ON SUBMIT THE HAPPY PATH Data sent to Ember-Auth signInEndPoint Auth token returned with owner_id User logged in Request sent to API with owner_id and Auth Token OwnerController Created.
14. LOGIN CONTROLLER s u b m i t : f u n c t i o n ( ) { s e l f = t h i s ; s e l f . s e t ( ' i s L o g g i n g I n ' , t r u e ) ; A p p . A u t h . s i g n I n ( { d a t a : { ' u s e r n a m e ' : t h i s . g e t ( " l o g i n U s e r n a m e " ) , ' p a s s w o r d ' : t h i s . g e t ( " l o g i n P a s s w o r d " ) , ' r e m e m b e r ' : t r u e } } ) ; A p p . A u t h . o n ( ' s i g n I n E r r o r ' , f u n c t i o n ( ) { s e l f . s e t P r o p e r t i e s ( { ' l o g i n E r r o r ' : t r u e , ' i s L o g g i n g I n ' : f a l s e } ) ; } ) ; }
15. ON SUBMIT THE SAD PATH Data sent to Ember-Auth signInEndPoint API responses with a 401 User is not logged in Error message shown User tries to remember his funkn password
16. REMEMBERABLE
17. AUTH.JS A p p . A u t h = E m b e r . A u t h . c r e a t e ( { . . . m o d u l e s : [ ' e m b e r D a t a ' , ' r e m e m b e r a b l e ' ] , r e m e m b e r a b l e : { t o k e n K e y : ' a u t h _ t o k e n ' , p e r i o d : 1 4 , a u t o R e c a l l : t r u e } , . . . } ) ;
18. REMEMBERABLE THE KEEP GOING PATH Refreshing the page checks if the user is still authenticated. Ember-Auth sends auth-token to API New auth token created and returned with owner_id User logged in Request sent to API with owner_id and Auth Token OwnerController Created.
19. AFTERMODEL HEAD TO THE OWNERS FIRST RESTAURANT.
20. AFTERMODEL THERE IS A PROBLEM HERE! A p p . O w n e r R o u t e = A p p . A u t h e n t i c a t e d R o u t e . e x t e n d ( { m o d e l : f u n c t i o n ( ) { } , s e t u p C o n t r o l l e r : f u n c t i o n ( c o n t r o l l e r , o w n e r ) { } , a f t e r M o d e l : f u n c t i o n ( o w n e r , t r a n s i t i o n ) { t h i s . t r a n s i t i o n T o ( ' r e s t a u r a n t s . e d i t ' , o w n e r . g e t ( " f i r s t R e s t a u r a n t " } } ) ;
21. AFTERMODEL A p p . O w n e r R o u t e = A p p . A u t h e n t i c a t e d R o u t e . e x t e n d ( { m o d e l : f u n c t i o n ( ) { } , s e t u p C o n t r o l l e r : f u n c t i o n ( c o n t r o l l e r , o w n e r ) { } , a f t e r M o d e l : f u n c t i o n ( o w n e r , t r a n s i t i o n ) { i f ( t r a n s i t i o n . t a r g e t N a m e = = = " o w n e r . i n d e x " ) { t h i s . t r a n s i t i o n T o ( ' r e s t a u r a n t s . e d i t ' , o w n e r . g e t ( " f i r s t R e s t a u r a n t " } } } ) ;
22. ACTION REDIRECTABLE
23. AUTH.JS A p p . A u t h = E m b e r . A u t h . c r e a t e ( { . . . m o d u l e s : [ ' e m b e r D a t a ' , ' r e m e m b e r a b l e ' , ' a c t i o n R e d i r e c t a b l e ' ] , a c t i o n R e d i r e c t a b l e : { s i g n O u t R o u t e : ' l o g i n ' } . . . } ) ;
24. APPLICATION ROUTE A p p . A p p l i c a t i o n R o u t e = E m . R o u t e . e x t e n d ( { e v e n t s : { s i g n O u t : f u n c t i o n ( ) { A p p . A u t h . s i g n O u t ( ) ; A p p . A u t h . o n ( ' s i g n O u t S u c c e s s ' , f u n c t i o n ( ) { l o g i n C o n t r o l l e r = t h i s . c o n t r o l l e r F o r ( ' l o g i n ' ) ; l o g i n C o n t r o l l e r . s e t P r o p e r t i e s ( { ' l o g i n E r r o r ' : f a l s e , ' i s L o g g i n g I n ' } ) ; } } } ) ;
25. SIGN OUT < u l > < l i > < a { { a c t i o n s s i g n O u t } } h r e f = " # " > S i g n O u t < / a > < / l i > < / u l >
26. ME - DAVE LAIRD A KIWI NOT AN AUSTRALIAN FRONT END EMBER AND RAILS DEV AT URBANSPOON.COM github.com/kiwiupover @kiwiupover kiwiupover@gmail.com kiwiupover.com speakerdeck.com/kiwiupover