daniel graham phd oauth deep diveexpo aplication facebook auth server facebook resource server login...
TRANSCRIPT
O A U T H D E E P D I V ED A N I E L G R A H A M P H D
F U N V I D E O E X P L A I N I N G O A U T H
• First minute
https://youtu.be/Oy5F9h5JqEU
O A U T H 2 . 0
• There are two version of OAUTH 2.0 and OAUTH 1.0
https://tools.ietf.org/html/draft-ietf-oauth-v2-23
O A U T H 1 . 0 WA S M O R E C O M P L I C AT E D A N D I N V O LV E S C E R T I F I C AT E S
O A U T H 2 . 0
• The GAME application does not get username and password from facebook
https://tools.ietf.org/html/draft-ietf-oauth-v2-23
E X P O A P L I C AT I O N
FA C E B O O K A U T H S E R V E R
FA C E B O O K R E S O U R C E
S E R V E R
L O G I N W I T H FA C E B O O K
E X P O A P L I C AT I O N
FA C E B O O K A U T H S E R V E R
FA C E B O O K R E S O U R C E
S E R V E R
L O G I N W I T H FA C E B O O K
A U T H O R I Z AT I O N R E Q U E S T
E X P O A P L I C AT I O N
FA C E B O O K A U T H S E R V E R
FA C E B O O K R E S O U R C E
S E R V E R
L O G I N W I T H FA C E B O O K
A U T H O R I Z AT I O N R E Q U E S T
R E D I R E C T U R L
E X P O A P L I C AT I O N
FA C E B O O K A U T H S E R V E R
FA C E B O O K R E S O U R C E
S E R V E R
L O G I N W I T H FA C E B O O K
A U T H O R I Z AT I O N R E Q U E S T
C L I C K S G R A N T S P R E M I S I O N S
E X P O A P L I C AT I O N
FA C E B O O K A U T H S E R V E R
FA C E B O O K R E S O U R C E
S E R V E R
L O G I N W I T H FA C E B O O K
A U T H O R I Z AT I O N R E Q U E S T
A U T H O R I Z AT I O N S G R A N T T O E X P O A P P L I C AT I O N
A U T H E N T I C AT I O N C O D E
User Provides authentication code to expo By redirecting to a predefined url
E X P O A P L I C AT I O N
FA C E B O O K A U T H S E R V E R
FA C E B O O K R E S O U R C E
S E R V E R
L O G I N W I T H FA C E B O O K
A U T H O R I Z AT I O N R E Q U E S T
A U T H E N T I C AT I O N C O D E , C L I E N T I D
C L I E N T S E C R E T
E X P O A P L I C AT I O N
FA C E B O O K A U T H S E R V E R
FA C E B O O K R E S O U R C E
S E R V E R
L O G I N W I T H FA C E B O O K
A U T H O R I Z AT I O N R E Q U E S T
A C C E S S T O K E N W I T H L I M I T E D P E R M I S S I O N S
E X P O A P L I C AT I O N
FA C E B O O K A U T H S E R V E R
FA C E B O O K R E S O U R C E
S E R V E R
L O G I N W I T H FA C E B O O K
A U T H O R I Z AT I O N R E Q U E S T
A C C E S S T O K E N
R E S O U R C E
R E S O U R C E S E R V E R C H E C K S T O K E N
N E E D T O R E G I S T E R E X P O A P P W I T H A U T H S E R V E R
E X P O A P L I C AT I O N
Name Etc
FA C E B O O K A U T H S E R V E R
E X P O A P L I C AT I O N
Name, Etc FA C E B O O K A U T H S E R V E R
Client ID Client Secret
const rootStack = createDrawerNavigator({ Login: LoginScreen, Home: HomeScreen, Player: PlayerScreen },{ initalRouteName: 'Login' } )
A D D E D L O G I N S C R E E N
A D D S E T T H E I N I T I A L R O U T E
import * as React from 'react'; import { View } from 'react-native';
export default class LoginScreen extends React.Component { render() {
return(<View style={styles.loginButton}> <Button title="Login with Facebook" onPress={()=>handleFacebookLogin(navigation)} /> </View>)
} } S E T U P A F U N C T I O N T H AT
W I L L H A N D L E FA C E B O O K N AV I G AT I O N
async handleFacebookLogin(navigation){ try { const { type, token } = await Facebook.logInWithReadPermissionsAsync( '1201211719949057', // Replace with your own app id in standalone app { permissions: ['public_profile'] } ) switch (type) { case 'success': { // Get the user's name using Facebook's Graph API const response = await fetch(`https://graph.facebook.com/me?access_token=${token}`); const profile = await response.json(); navigation.navigate('MainScreen', {profile}) break; }
L E T ’ S L O O K AT A S N A C K
• https://snack.expo.io/@professorxii/facebookloginexample
• https://developers.facebook.com/docs/apps#register
https://docs.expo.io/versions/latest/sdk/facebook/