Я создаю приложение, в котором мне нужно делать запросы API Graph Facebook во многих местах. Но я не знаю, как получить токен доступа, а затем сделать запрос API Graph.
Я использую Expo, React Native и Firebase. Я хотел бы сделать это без установки Xcode и/или Android Studio.
Логин работает нормально. Мой код ниже:
async loginWithFacebook() {
try {
const {
type,
token,
expires,
permissions,
declinedPermissions,
} = await Expo.Facebook.logInWithReadPermissionsAsync('<APP_ID', {
permissions: ['email', 'public_profile'],
});
if (type === 'success') {
const credential = f.auth.FacebookAuthProvider.credential(token)
f.auth().signInAndRetrieveDataWithCredential(credential).catch((error) => {
console.info(error)
})
var that = this;
const response = await fetch(`https://graph.facebook.com/me/?fields=id,name&access_token=${token}`);
const userInfo = await response.json();
this.setState({userInfo});
this.setState({
dataSource: userInfo.data,
isLoading: false,
});
} else {
// type === 'cancel'
}
} catch ({ message }) {
alert(`Facebook Login Error: ${message}`);
}
}
Может ли кто-нибудь помочь мне и дать несколько советов, как я могу использовать токен доступа везде в своем приложении? заранее спасибо





token и сохранение в AsyncStorageНу, код, который вы написали, в основном правильный. Вы успешно получили токен доступа. Он возвращается к вам, когда вы делаете запрос Expo.Facebook.logInWithReadPermissionsAsync. Получив его, вы можете сохранить его в Redux или AsyncStorage для последующего использования.
logIn = async () => {
let appID = '123456789012345' // <- you'll need to add your own appID here
try {
const {
type,
token, // <- this is your access token
expires,
permissions,
declinedPermissions,
} = await Expo.Facebook.logInWithReadPermissionsAsync(appID, { permissions: ['public_profile', 'email'], });
if (type === 'success') {
// Get the user's name using Facebook's Graph API
const response = await fetch(`https://graph.facebook.com/me/?fields=id,name&access_token=${token}`); //<- use the token you got in your request
const userInfo = await response.json();
alert(userInfo.name);
// you could now save the token in AsyncStorage, Redux or leave it in state
await AsyncStorage.setItem('token', token); // <- save the token in AsyncStorage for later use
} else {
// type === 'cancel'
}
} catch ({ message }) {
alert(`Facebook Login Error: ${message}`);
}
}
app.jsonТакже не забудьте добавить следующее к вашему app.json, очевидно, заменив значения своими. Вы получите их, зарегистрировав свое приложение в Facebook. Подробнее об этом можно узнать здесь https://docs.expo.io/versions/latest/sdk/facebook/#registering-your-app-with-facebook.
{
"expo": {
"facebookScheme": "fb123456789012345",
"facebookAppId": "123456789012345", // <- this is the same appID that you require above when making your initial request.
"facebookDisplayName": "you_re_facebook_app_name",
...
}
}
token от AsyncStorageЗатем, если вы хотите сделать другой запрос позже, у вас может быть функция, подобная этой, где вы получаете token из AsyncStorage, а затем используете ее для выполнения своего запроса.
makeGraphRequest = async () => {
try {
let token = await AsyncStorage.getItem('token'); // <- get the token from AsyncStorage
const response = await fetch(`https://graph.facebook.com/me/?fields=id,name&access_token=${token}`); // <- use the token for making the graphQL request
const userInfo = await response.json();
alert(userInfo.name)
} catch (err) {
alert(err.message)
}
}
Я бы сделал закуску, чтобы показать вам, как это работает, однако закуски не позволяют редактировать файл app.json (насколько я могу судить). Итак, вот что-то, чем вы могли бы заменить свой App.js, а затем, если вы добавили свои идентификаторы приложений и т. д. в app.json, это должно работать.
import React from 'react';
import { AsyncStorage, Text, View, StyleSheet, SafeAreaView, Button } from 'react-native';
export default class App extends React.Component {
logIn = async () => {
let appID = '123456789012345' // <- you'll need to add your own appID here
try {
const {
type,
token, // <- this is your access token
expires,
permissions,
declinedPermissions,
} = await Expo.Facebook.logInWithReadPermissionsAsync(appID, {
permissions: ['public_profile', 'email'],
});
if (type === 'success') {
// Get the user's name using Facebook's Graph API
const response = await fetch(`https://graph.facebook.com/me/?fields=id,name&access_token=${token}`); //<- use the token you got in your request
const userInfo = await response.json();
console.info(userInfo);
alert(userInfo.name);
// you could now save the token in AsyncStorage, Redux or leave it in state
await AsyncStorage.setItem('token', token); // <- save the token in AsyncStorage for later use
} else {
// type === 'cancel'
}
} catch ({ message }) {
alert(`Facebook Login Error: ${message}`);
}
}
makeGraphRequest = async () => {
try {
let token = await AsyncStorage.getItem('token');
// Get the user's name using Facebook's Graph API
const response = await fetch(`https://graph.facebook.com/me/?fields=id,name&access_token=${token}`);
const userInfo = await response.json();
alert(userInfo.name)
} catch (err) {
alert(err.message)
}
}
render() {
return (
<View style = {styles.container}>
<Button title = {'Sign in to Facebook'} onPress = {this.logIn} />
<Button title = {'Make GraphQL Request'} onPress = {this.makeGraphRequest} />
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white'
}
});
Здорово. Спасибо!