React Native Expo предоставляет простой и удобный способ разработки мобильных приложений. Если вы хотите добавить функциональность Google авторизации в свое приложение Expo, вы можете использовать Firebase Authentication вместе с Expo. Firebase Authentication обеспечивает удобное и безопасное решение для аутентификации пользователей через различные источники, включая аккаунты Google.
Вам понадобится создать проект Firebase и добавить конфигурационные данные в приложение Expo.
- Создайте проект Firebase
- Перейдите на сайт Firebase (https://console.firebase.google.com/) и войдите в свою учетную запись Google.
- Нажмите на кнопку "Добавить проект" и следуйте инструкциям, чтобы создать новый проект.
- После создания проекта вы будете перенаправлены на консоль Firebase. Здесь вы можете управлять различными сервисами Firebase, включая аутентификацию.
- Включите Google аутентификацию в Firebase
- В консоли Firebase перейдите в раздел "Аутентификация" и выберите "Методы входа в систему".
- Найдите "Аккаунты Google" в списке доступных методов и включите его.
- Если потребуется, следуйте инструкциям по настройке и настройте брендирование.
- Получите конфигурационные данные Firebase
- В консоли Firebase перейдите в раздел "Настройки проекта" и выберите "Общие".
- Прокрутите вниз до раздела "Вашему веб-приложению" и нажмите на кнопку "Добавить приложение".
- Введите имя вашего приложения и нажмите кнопку "Зарегистрировать приложение".
- Вам будут предоставлены конфигурационные данные (apiKey, authDomain, projectId, etc.), которые вам понадобятся позднее.
- Добавьте пакеты и настройте Expo проект
- Откройте терминал и перейдите в корневую папку вашего Expo проекта.
- Установите Firebase SDK с помощью команды:
npm install firebase
- Затем установите Firebase для аутентификации с помощью команды:
npm install firebase-auth
- Инициализируйте Firebase в вашем Expo проекте
- Создайте новый файл с именем "firebase.js" в корневой папке вашего Expo проекта.
- В файле "firebase.js" добавьте следующий код:
import * as firebase from 'firebase';
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID"
};
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}
export default firebase;
- Замените "YOURAPIKEY", "YOURAUTHDOMAIN" и "YOURPROJECTID" на соответствующие значения из конфигурационных данных Firebase.
- Добавьте Google авторизацию в ваше Expo приложение
- Импортируйте Firebase в ваш компонент React Native:
import firebase from '../firebase'; import * as GoogleSignIn from 'expo-google-sign-in';
- Инициализируйте GoogleSignIn и настройте параметры аутентификации:
useEffect(() => {
async function initializeAuth() {
await GoogleSignIn.initAsync({
clientId: 'YOUR_CLIENT_ID',
});
}
initializeAuth();
}, []);
- Замените "YOURCLIENTID" на идентификатор клиента Google, который вы должны получить при настройке Google аутентификации в Firebase.
- Добавьте функцию для обработки нажатия на кнопку авторизации:
const signInWithGoogleAsync = async () => {
try {
const { type, user } = await GoogleSignIn.signInAsync();
if (type === 'success') {
// Успешная авторизация - обрабатывайте данные пользователя
const credential = firebase.auth.GoogleAuthProvider.credential(
user.auth.idToken,
user.auth.accessToken,
);
await firebase.auth().signInWithCredential(credential);
}
} catch (error) {
console.error(error);
}
};
- Добавьте кнопку для вызова функции авторизации:
<Button title="Google Sign In" onPress={signInWithGoogleAsync} />
Теперь, когда вы добавили Google авторизацию в свое Expo приложение с помощью Firebase, пользователи смогут авторизоваться с помощью своих учетных записей Google.