Автор оригинала: Olebuezi Obinna David.
В этом руководстве я хотел бы взять вас через ступеньки того, как настроить Facebook и Google Social Login в вашем реагирующем нативном приложении.
Логин в фейсбук
Несмотря на то, что логин Facebook может звучать сложно, но действительно легко.
Настройка социального входа в систему в вашем приложении заключается в регистрации ваших идентификаторов приложений Facebook, и идентификаторы клиента Google на консоли являются первыми шагами к этой реализации.
Теперь давайте сделаем это.
Настройка идентификатора приложения для Facebook
Это идентификатор, используемый для получения авторизации для использования API Facebook, чтобы войти в свое приложение. Пожалуйста, посетите https://developers.facebook.com, чтобы войти в систему.
Шаги: Создайте новое приложение и зарегистрируйте новый идентификатор приложения Facebook. Добавить платформы Android и iOS (по мере необходимости)
Для iOS добавьте свой идентификатор пакета во время Android, добавьте имя вашего пакета и ключевые хэши
Настройка для пользователей EXPO
Это потребует установки этого пакета.
$ expo install expo-facebook
На вашем экране входа в систему добавить кнопку «Вход в систему Facebook» …/Buttons/Blockbutton ‘;
Также обязательно инициируйте разрешения в Ase Excefect Accept Conformying Your Facebook ID приложения.
import React, { useEffect, useState, useContext } from 'react';
import * as Facebook from 'expo-facebook';
import { FB_APP_ID } from '../config/constants';
const initSocialLogin = async () => {
try {
await Facebook.initializeAsync(FB_APP_ID);
} catch (e) {
console.log(e);
}
};
useEffect(() => {
initSocialLogin();
}, []);
Окончательный код реализации
С намерениями генерации выставки в автономном виде вы должны добавить Facebookscheme, FacebookAppid, AndFacebookDisPlayName в ваш файл App.json, как видно в документации Facebook (шаг 4).
Теперь давайте обновим наш компонент входа в систему.
import { FB_APP_ID } from '../config/constants';
//...
export const fbLogin = async () => {
try {
const { token, type } = await Facebook.logInWithReadPermissionsAsync(
FB_APP_ID,
{
permissions: ['public_profile'],
}
);
// GET USER DATA FROM FB API
const response = await fetch(
`https://graph.facebook.com/me?access_token=${token}`
);
const user = await response.json();
// GET PROFILE IMAGE DATA FROM FB API
// NOTE THAT I SET THE IMAGE WIDTH TO 500 WHICH IS OPTIONAL
const pictureResponse = await fetch(
`https://graph.facebook.com/v8.0/${user.id}/picture?width=500&redirect=false&access_token=${token}`
);
const pictureOBject = await pictureResponse.json();
const userObject = {
...user,
photoUrl: pictureOBject.data.url,
};
return { type, token, user: userObject };
} catch (e) {
return { error: e };
}
};
const handleFBLoginPress = async () => {
const { type, token, user, error } = await fbLogin();
if (type && token) {
if (type === 'success') {
// DISPATCH TOKEN AND USER DATA
// TO HANDLE NAVIGATION TO HOME AND DISPLAY USER INFO
dispatch({ type: 'FB_LOGIN', token, user });
}
} else if (error) {
console.log('The login attempt was cancelled');
}
};
Заключение
Включение входит в систему, где вы хотите сделать ваш логин, включить режим производства в консоли разработчиков Facebook.
Счастливое кодирование.