DANIEL GRAHAM PHD OAUTH DEEP DIVEexpo aplication facebook auth server facebook resource server login with facebook

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/