Ошибка реализации аутентификации Google в приложении React Native с ExpoJavascript

Форум по Javascript
Ответить
Anonymous
 Ошибка реализации аутентификации Google в приложении React Native с Expo

Сообщение Anonymous »

Обзор
Я разрабатываю приложение на React Native с использованием Expo и пытаюсь реализовать аутентификацию с помощью Google. Однако, когда я пытаюсь войти в систему, я получаю сообщение об ошибке и не могу завершить процесс аутентификации. Несмотря на то, что я настроил облако Google с Oauth2 и экраном согласия, а также выполнил сборку и запустил в эмуляторе приложение с помощью команды «npx expo». run:android”
Что я сделал:
  • Я настроил консоль Google Play, создал экран согласия OAuth с публикацией введите «Тест», несколько тестовых пользователей и создайте учетные данные OAuth 2.0.
  • В OAuth2.0 я добавил имя пакета, соответствующее моему expo.android.package, и сертификат SHA-1. Отпечаток пальца, вытащил его с помощью команды eas access
    , затем в схеме Custom URI я включил этот флажок, иначе он у меня напрямую не работал бы.
  • Я реализовал функцию аутентификации Google с библиотекой expo-auth-session с поставщиками поставщиков/google
  • Я создал сборку с помощью команды npx expo run:android запустить приложение на эмуляторе, как я видел в нескольких видеороликах
Небольшое отступление
Прежде У меня работала аутентификация, но теперь она больше не работает, поэтому я сгенерировал новые учетные данные с помощью «Учетные данные eas» и добавил новый sha1key в новые учетные данные OAuth2, фактически используя (1) по умолчанию.
[img]https: //i.sstatic.net/Tpit0VSJ.png[/img]

Результат:
Несмотря на то, что браузер открывается , позволяет мне выбрать пользователя и предоставляет запрошенный data,
После закрытия я по какой-то причине не получаю информацию о пользователе.
[img]https:// i.sstatic.net/V0HgCUbt.png[/img]
Изображение
И «ответ» console.log всегда равен нулю...
Мой код страницы входа:< /strong>
import React, {useContext, useEffect, useState} from 'react';
import {Form, H4, Spinner, Input, View, Text, H6} from 'tamagui'
import {Button} from "tamagui.config"
import {Pressable, SafeAreaView, Platform, Image, StyleSheet} from "react-native";
import {loadUser, login, register} from "~/services/AuthService";
import * as WebBrowser from "expo-web-browser";
import * as Google from "expo-auth-session/providers/google";
import {getUserInfo} from "~/services/GoogleAuthService";
import {useAuth} from "~/contexts/NewAuthContext";
import {useRouter} from "expo-router";

WebBrowser.maybeCompleteAuthSession();

// @ts-ignore
const Login = () => {
const { signIn } = useAuth();
const router = useRouter()
const [isLoadingLogin, setIsLoadingLogin] = useState(false)
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
const [errors, setErrors] = useState({})
// const {setUser} = useContext(AuthContext);

const [request, response, promptAsync] = Google.useAuthRequest({
androidClientId: "....CLIENT_ID.....",
})

useEffect(() => {
handleSingInWithGoogle()
}, [response])

async function handleSingInWithGoogle(){
// Here the response is always "null"....
console.log("response", response)
if(response?.type === "success"){
// It never happens because it is always null...
console.log("response success", response)
const googleAccessToken = response.authentication.accessToken

const googleUserData = await getUserInfo(googleAccessToken)

try {
await register({
"email": googleUserData.email,
"name": googleUserData.given_name,
"surname": googleUserData.family_name,
"picture": googleUserData.picture,
"google_id": googleUserData.id,
"register_type": "google_auth",
"device_name": `${Platform.OS} - ${Platform.Version}`
})
const user = await loadUser();
signIn(user)
} catch (e) {
console.error("error login-in with google")
}
}
}

function validateForm() {
const newErrors = {};

if (!email.trim()) {
newErrors.email = "empty";
}

if (!password.trim()) {
newErrors.password = "empty";
}

setErrors(newErrors);
return Object.keys(newErrors).length === 0;
}

async function submitLoginForm(){
try {
setIsLoadingLogin(true)

// Solo continúa si la validación es exitosa
if (!validateForm()) {
return; // Detiene la ejecución si hay errores
}

await login({
email,
password,
device_name: `${Platform.OS} - ${Platform.Version}`
});

const user = await loadUser();
console.info("login function user : ", user)
signIn(user)

} catch(e){
if (e.response.status === 422){
setErrors({password: "credentials not found"});
}
} finally {
setIsLoadingLogin(false)
}
}

function redirectRegister() {
setErrors({})
router.push("/(auth)/register")
}

return (

submitLoginForm()}
backgroundColor="#e3e3e3"
padding="$10"
>

Log-in



{
setEmail(text);
// Limpia el error cuando el usuario empieza a escribir
if (errors.email) {
setErrors(prev => ({ ...prev, email: null }));
}
}}
keyboardType="email-address"
autoCapitalize="none"
/>
{errors.email && El email no puede estar vacio}



{errors.password && errors.password !== 'credentials not found' && La contraseña no puede estar vacía}
{errors.password && errors.password === 'credentials not found' && No existe ningun registro con ese email y contraseña}




promptAsync()}
style={({ pressed }) => ({
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
padding: 10,
borderRadius: 30,
backgroundColor: pressed ? '#f0f0f0' : '#ffffff',
borderWidth: 1,
borderColor: '#dcdcdc',
})}
>

Entrar con Google






: undefined}>
{isLoadingLogin ? 'Iniciando sesión...' : 'Iniciar sesión'}






)
}

export default Login;


Подробнее здесь: https://stackoverflow.com/questions/793 ... -with-expo
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»