RN垂れ流し FireBaseでFacebookログイン機能追加 その1
create-react-native-appによりexpoが依存に入っていて、Facebook/Firebaseそれぞれの管理画面で設定が完了してることが前提。
firebaseのSDKをインストール
yarn add firebase
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button, Alert } from 'react-native';
import * as firebase from 'firebase';
const firebaseConfig ={
apiKey:"<YOUR-API-KEY>",
authDomain:"<YOUR-AUTH-DOMAIN>",
databaseURL:"<YOUR-DATABASE-URL>",
storageBucket:"<YOUR-STORAGE-BUCKET>"
};
firebase.auth().languageCode ='ja_JP';
firebase.auth().onAuthStateChanged((user) => {
if (user != null) {
console.log("We are authenticated now!");
}
// Do other things
});
export default class App extends Component {
async signinWithFacebook() {
const { type, token } = await Expo.Facebook.logInWithReadPermissionsAsync(
'<YOUR-FB-APP-ID>',
{ permissions: ['public_profile', ‘とかとか‘] }
);
if (type === 'success') {
const credential = firebase.auth.FacebookAuthProvider.credential(token);
await firebase.auth().signInWithCredential(credential)
.catch((error) => {
// Handle Errors here
});
const response = await fetch(`https://graph.facebook.com/me?access_token=${token}`);
Alert.alert(
'Logged in!',
`Hi ${(await response.json()).name}!`,
);
}
}
signOut() {
firebase.auth().signOut().then(function() {
Alert.alert(
'Bye!'
);
}).catch(function(error) {
// Handle Errors here
});
}
render() {
return (
<View style={styles.container}>
<Button title="Facebookでログイン/登録" onPress={() => this.signinWithFacebook()}></Button>
<Button title="サインアウト" onPress={() => this.signOut()}></Button>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
通常は公式Facebook SDKによって提供されるはずのユーザーログインの機能がReact Nativeで動作しないため、ExpoのFacebookログインモジュールを使うのが一番手軽っぽい。
一旦こんな感じです
おわり🐶