Руководство по добавлению входа в Google в ваше приложение React

Dropbox – это компания по обмену файлами и синхронизацией файлов, базирующаяся в Сан -Франциско. Его кроссплатформенный клиент позволяет пользователям загружать файлы на сервер Dropbox. Dropbox теперь использует React.JS для улучшения синхронизации файлов, чтобы пользователи могли сохранять и делиться неограниченным количеством файлов и папок.

Expo-Go React-Clive Application, которое использует аутентификацию Google в Firebase

Я строю приложение с реагированием с Expo и проверяю его с Expo-Go. Мне нужно аутентифицировать пользователей в Firebase, используя Google. Мне удалось аутентифицировать пользователей в Firebase с помощью электронной почты+пароль, но не с Google. Я провел несколько дней в поисках решений в Интернете (и переполнении стека) и не смог найти ничего определенного или примера, который на самом деле работает. Предлагаемые методы были: «SignInwithredirect» и «signwithpopup» (оба не работают в React-Native), «Expo-Google-In-in» (унамотренный) и «Espo-Auth-Session» (кажется, является последним методом, но многие утверждают, что он не работает с Expo-GO). Это то, что я пытаюсь сделать даже возможно? Есть ли в любом месте рабочего примера? В противном случае, каким будет рекомендуемый способ аутентификации пользователей с помощью Google в Firebase в моем приложении (E.г., Используйте сборки вместо выставки или используйте клиентов Expo Dev для улучшения выставки и т. Д.) – любой рабочий пример, пожалуйста? Большое спасибо заранее, я отчаянно нуждаюсь 🙂

Арье Лившин

спросил 4 апреля в 1:34

Арье Лившин Ари Лившин

845 1 1 Золотой значок 12 12 серебряных значков 26 26 бронзовых значков

2 ответа 2

Мне удалось получить Firebase Google Auth, работая через Expo, используя Expo SDK 47. С выпуском Expo SDK 48 в феврале 2023 года, я считаю, что больше невозможно заставить его работать с Expo Go. Смотрите объяснение обновлений SDK 48 здесь.

Я неохотно переходил на клиентов Expo Dev, но это стало более плавным, чем предполагалось, поэтому я бы порекомендовал кусать пулю и двигаться вперед с клиентом Expo Dev. Я считаю, что вам понадобится платная учетная запись разработчика Apple для создания сборки. Другая проблема, с которой я столкнулся с этим методом, заключается в том, что я не могу получить поток аутентификации, работающий в предварительном просмотре, хотя он отлично работает в сборке разработки. Смотрите мой вопрос здесь, в котором встроен мой образец кода, который работает со сборкой разработки.

Руководство по добавлению входа в Google в ваше приложение React

Есть моменты, когда мы просто хотим использовать приложение и не имеем терпения регистрироваться и войти в систему с нашей электронной почтой и паролем сначала. Мы также могли бы просто попробовать приложение и не хотим, чтобы бремя создания новой учетной записи только для этого.

В то же время владельцы приложения должны знать, сколько пользователей имеет их приложение, и захотят получить отзывы о том, кто использует приложение и как. Чтобы получить эту статистику, им нужны пользователи, чтобы подписаться на свои электронные письма.

Эти две ситуации ставят как пользователя, так и владельцы приложений в немного маринованного. Вот где функция входа в Google играет очень важную роль.

Поскольку Google является самой популярной платформой электронной почты в мире, позволяя пользователям использовать вход в Google с вашим приложением React устраняет трение между пользователями и владельцами приложений. Пользователи могут начать использовать приложение почти сразу без необходимости создавать совершенно новую учетную запись.

В этой статье мы узнаем, как работает логин Google и как мы можем добавить его в наше приложение React, используя новые службы Google Identity Services под названием @React-OAuth/Google.

Краткое содержание:

Добавление входа в Google в ваше приложение React может значительно улучшить пользовательский опыт, позволяя им легко подписаться на использование своей учетной записи Google. Это устраняет необходимость для пользователей для создания новой учетной записи и обеспечивает плавный процесс входа в систему. В этой статье мы рассмотрим, как реализовать вход в Google в приложении React, используя пакет @React-OAuth/Google.

Ключевые моменты:

1. Google Login – это популярная функция, которая позволяет пользователям входить в приложение, используя свою учетную запись Google.
2. Это устраняет необходимость для пользователей создавать новую учетную запись и обеспечивает беспрепятственный опыт входа в систему.
3. Пакет @React-OAUTH/Google-это SDK Google Identity Services, который позволяет разработчикам интегрировать вход Google в свои приложения React.
4. Перед добавлением входа в Google в ваше приложение React вам необходимо получить идентификатор клиента Google для вашего проекта.
5. Идентификатор клиента – это уникальный идентификатор, связанный с приложением, которое помогает с клиентом и сервером OAuth 2.0 аутентификация.
6. Чтобы получить идентификатор клиента Google, вам необходимо создать новый проект в Cloud Console Google.
7. После того, как у вас есть идентификатор клиента, вы можете установить пакет @React-OAuth/Google в приложении React.
8. После установки пакета вы можете настроить экран согласия Google для вашего приложения React.
9. Далее, вам нужно создать идентификатор веб -клиента в консоли Cloud Google.
10. Наконец, вы можете собрать все это вместе, используя пакет @React-OAUTH/Google для реализации Google Login в вашем приложении React.

Вопросы:

1. Q1: Почему добавление входа в Google в приложение React полезно?

A1: Добавление входа в Google в приложение React предоставляет пользователям беспрепятственный опыт входа в систему, позволяя им регистрировать свою учетную запись Google вместо создания новой учетной записи.

2. Q2: Что такое пакет @React-oauth/Google?

A2: Пакет @React-OAuth/Google-это SDK Google Identity Services, который позволяет разработчикам интегрировать вход Google в свои приложения React. Он предоставляет необходимые инструменты и функции для реализации входа в Google в приложении React.

3. Q3: Как я могу получить идентификатор клиента Google для моего проекта?

A3: Чтобы получить идентификатор клиента Google, вам необходимо создать новый проект в Cloud Console Google. После создания проекта вы можете генерировать идентификатор клиента, который будет использоваться для аутентификации пользователей в процессе входа в Google.

4. Q4: Что такое идентификатор клиента?

A4: Идентификатор клиента – это уникальный идентификатор, связанный с приложением. Он используется во время процесса аутентификации для проверки идентификации приложения и авторизации его доступа к API Google.

5. Q5: Как установить пакет @React-OAuth/Google?

A5: Вы можете установить пакет @React-oauth/Google в вашем приложении React, выполнив команду «npm install @React-oauth/Google» или «прядь добавить @React-oauth/Google» в корневом каталоге вашего проекта.

6. Q6: Что такое экран согласия Google?

A6: Экран согласия Google – это экран, который появляется, когда пользователь пытается войти в приложение, используя свою учетную запись Google. Он сообщает пользователю о разрешениях, которые требует приложения, и позволяет им предоставлять или отрицать доступ.

7. Q7: Как мне создать идентификатор веб -клиента в консоли Cloud Google?

A7: Чтобы создать идентификатор веб -клиента, вам нужно перейти на страницу учетных данных в консоли Cloud Google, выберите свой проект и нажмите кнопку «Создать учетные данные». Затем выберите опцию «идентификатор клиента OAuth» и следуйте подсказкам для создания идентификатора веб -клиента.

8. Q8: Как я могу реализовать вход в Google в моем приложении React, используя пакет @React-OAuth/Google?

A8: Для реализации Google входит в систему в вашем приложении React, вы можете использовать пакет @React-OAuth/Google. Во -первых, установите пакет в свой проект. Затем настройте экран согласия Google и создайте идентификатор веб -клиента. Наконец, используйте пакет @React-OAuth/Google, чтобы обработать поток аутентификации и получить токены доступа для доступа к API Google.

9. Q9: Каковы преимущества использования входа в Google в приложении React?

A9: Использование входа в Google в приложении React предоставляет бесшовный опыт входа в систему для пользователей, устраняет необходимость создания новой учетной записи и позволяет владельцам приложений более легко собирать статистику пользователей и обратную связь. Это также использует популярность и доверие Google в качестве платформы электронной почты.

10. Q10: Могу ли я использовать Expo, чтобы аутентифицировать пользователей с помощью Google в Firebase?

A10: С выпуском Expo SDK 48 в феврале 2023 года больше невозможно использовать Expo для аутентификации пользователей Google в Firebase. Тем не менее, вы можете рассмотреть возможность перехода на Expo Dev Clients для этой функции.

Следуя этим шагам и используя пакет @React-oauth/Google, вы можете легко добавить вход Google в свое приложение React и улучшить пользовательский опыт. Не забудьте приобрести идентификатор клиента Google, настроить экран согласия и создать идентификатор веб -клиента перед реализацией функций входа в систему. Счастливого кодирования!

Руководство по добавлению входа в Google в ваше приложение React

Dropbox – это компания по обмену файлами и синхронизацией файлов, базирующаяся в Сан -Франциско. Его кроссплатформенный клиент позволяет пользователям загружать файлы на сервер Dropbox. Dropbox теперь использует React.JS для улучшения синхронизации файлов, чтобы пользователи могли сохранять и делиться неограниченным количеством файлов и папок.

Expo-Go React-Clive Application, которое использует аутентификацию Google в Firebase

Я строю приложение с реагированием с Expo и проверяю его с Expo-Go. Мне нужно аутентифицировать пользователей в Firebase, используя Google. Мне удалось аутентифицировать пользователей в Firebase с помощью электронной почты+пароль, но не с Google. Я провел несколько дней в поисках решений в Интернете (и переполнении стека) и не смог найти ничего определенного или примера, который на самом деле работает. Предлагаемые методы были: «SignInwithredirect» и «signwithpopup» (оба не работают в React-Native), «Expo-Google-In-in» (унамотренный) и «Espo-Auth-Session» (кажется, является последним методом, но многие утверждают, что он не работает с Expo-GO). Это то, что я пытаюсь сделать даже возможно? Есть ли в любом месте рабочего примера? В противном случае, каким будет рекомендуемый способ аутентификации пользователей с помощью Google в Firebase в моем приложении (E.г., Используйте сборки вместо выставки или используйте клиентов Expo Dev для улучшения выставки и т. Д.) – любой рабочий пример, пожалуйста? Большое спасибо заранее, я отчаянно нуждаюсь 🙂

Арье Лившин

спросил 4 апреля в 1:34

Арье Лившин Ари Лившин

845 1 1 Золотой значок 12 12 серебряных значков 26 26 бронзовых значков

2 ответа 2

Мне удалось получить Firebase Google Auth, работая через Expo, используя Expo SDK 47. С выпуском Expo SDK 48 в феврале 2023 года, я считаю, что больше невозможно заставить его работать с Expo Go. Смотрите объяснение обновлений SDK 48 здесь.

Я неохотно переходил на клиентов Expo Dev, но это стало более плавным, чем предполагалось, поэтому я бы порекомендовал кусать пулю и двигаться вперед с клиентом Expo Dev. Я считаю, что вам понадобится платная учетная запись разработчика Apple для создания сборки. Другая проблема, с которой я столкнулся с этим методом, заключается в том, что я не могу получить поток аутентификации, работающий в предварительном просмотре, хотя он отлично работает в сборке разработки. Смотрите мой вопрос здесь, в котором встроен мой образец кода, который работает со сборкой разработки.

Руководство по добавлению входа в Google в ваше приложение React

Есть моменты, когда мы просто хотим использовать приложение и не имеем терпения регистрироваться и войти в систему с нашей электронной почтой и паролем сначала. Мы также могли бы просто попробовать приложение и не хотим, чтобы бремя создания новой учетной записи только для этого.

В то же время владельцы приложения должны знать, сколько пользователей имеет их приложение, и захотят получить отзывы о том, кто’используя приложение и как. Чтобы получить эту статистику, им нужны пользователи, чтобы подписаться на свои электронные письма.

Эти две ситуации ставят как пользователя, так и владельцы приложений в немного маринованного. Вот где функция входа в Google играет очень важную роль.

Поскольку Google является самой популярной платформой электронной почты в мире, позволяя пользователям использовать вход в Google с вашим приложением React устраняет трение между пользователями и владельцами приложений. Пользователи могут начать использовать приложение почти сразу без необходимости создавать совершенно новую учетную запись.

В этой статье мы’LL узнайте, как работает логин Google и как мы можем добавить его в наше приложение React, используя новые службы Google Identity Services SDK под названием @React-OAuth/Google .

• Установка требуемого пакета для добавления входа в Google в ваше приложение React
• Приобретение идентификатора клиента Google для вашего проекта
• Настройка экрана согласия Google для входа в Google для вашего приложения React
• Создание идентификатора вашего веб -клиента
• Сполнить все это вместе с @React-oauth/Google
• Создание профиля пользователя в вашем приложении React на основе пользователя’S Google Profile

Чтобы следовать этим учебному пособию, вы должны установить на локальный компьютер и познакомиться с тем, как его использовать. Если вы установили React, то у вас уже должен быть узел.JS, NPM и пряжа тоже установлены.

Установка требуемого пакета для добавления входа в Google в ваше приложение React

Чтобы использовать вход в Google, мы’LL нужно установить пакет @React-OAuth/Google. Это Google’новые услуги идентификации SDK; Это позволяет нам интегрировать функцию входа в Google в наше приложение React. Кроме того, @React-oauth/Google позволяет нам получить токены доступа, которые нам необходимы для быстрого и безопасного доступа к Google API.

Но, прежде чем мы установим и начнем интегрировать вход в Google в наше приложение React, мы’LL Сначала нужно получить идентификатор клиента Google.

Приобретение идентификатора клиента Google для вашего проекта

Идентификатор клиента – это уникальный идентификатор, связанный с приложением, которое помогает с клиентом и сервером OAuth 2.0 аутентификация.

Чтобы получить идентификатор клиента от Google, перейдите в свою консоль Google Cloud и создайте новый проект. Для этой статьи я’VE назвал проект “Google Войдите,” Но вы можете назвать это все, что вам нравится:

После создания проекта нажмите на название проекта, и вы’LL увидите приборную панель, которая выглядит как показанная ниже. Ваше текущее имя проекта должно быть видно в левом верхнем левом углу, рядом с логотипом Google Cloud:

Теперь, пусть’S просмотрите, как настроить экран вашего согласия перед созданием учетных данных.

Настройка экрана согласия Google для входа в Google для вашего приложения React

Экран согласия, как следует из названия, представляет собой страницу согласия, которая предлагает пользователю использовать внешнюю или стороннюю библиотеку для входа в систему. Этот шаг предупреждает пользователя о том, что он покидает ваше приложение’S Корневая страница и разрешение доступа к сторонней странице.

Проще говоря, когда вы используете OAuth 2.0 Для авторизации ваше приложение требует, чтобы пользователь разрешал один или несколько областей доступа из учетной записи Google. Прицелы доступа включают любую информацию или действия. Ваше приложению разрешено получить доступ к пользователю или упражнения’S аккаунт.

Более 200 тысяч разработчиков используют Logrocket для создания лучшего цифрового опыта

Узнайте больше →

Экран согласия Google, который приложение отображает пользователю, может включить краткое описание вашего проекта, его политики и запрашиваемые области доступа.

Простая страница согласия может выглядеть так:

Чтобы настроить страницу согласия Google для вашего приложения React, перейдите к “Оаут экран согласия” Вкладка в меню левой стороны вашей консоли Google Cloud Console.

После того, как вы будете на этой вкладке, выберите внешний, который на самом деле является единственным вариантом, который вы можете выбрать, если вы не используете, проверенную Google организацию или приложение, и нажмите Создавать кнопка для создания экрана вашего согласия:

Далее, в той же вкладке выберите имя для вашего приложения и адрес электронной почты, чтобы получить уведомления о любых изменениях в вашем проекте. Вы можете сохранить другие требования и варианты пустыми на данный момент. Если у вас есть подробности, вы можете добавить их во время этого шага, если хотите:

Вы также можете пропустить остальные разделы регистрации на данный момент. Просто прокрутите вниз в каждом разделе и нажмите Сохранить и продолжить Пока вы не вернетесь на приборную панель после завершения.

Создание идентификатора вашего веб -клиента

Далее, в меню левой стороны нажмите Реквизиты для входа Вкладка, чтобы перейти на страницу, где вы можете создать идентификатор веб -клиента.

На этой странице нажмите Создать учетные данные в верхней части страницы, а затем выберите Идентификатор клиента OAuth вариант:

Вам будет предложено выбрать тип приложения, как показано ниже. Если вы выполняете эти шаги для приложения React, выберите веб приложение (с тех пор, как мы’Повторите использование идентификатора клиента Google для Интернета):

Если вы интегрируете его в приложении «Нативное», трепетание или быстрое приложение, вы можете выбрать параметры Android или iOS для двух соответствующих операционных систем.

Далее мы выберем имя для нашего идентификатора клиента. Это имя просто используется для отмечения или определения конкретного идентификатора, который мы создаем. Так, например, если мы создаем идентификаторы Web, iOS и Android, мы можем включить “Веб -идентификатор,” “Идентификатор Android,” “ios id,” и так далее в их соглашении об именах, чтобы дифференцировать их.

Далее мы’LL также добавляйте два типа URL: авторизованное происхождение JavaScript и авторизованные URL -адреса перенаправления.

Авторизованный URL -адрес javaScript Origins – это URL, из которого ваше приложение исходит в систему; я.эн., Localhost и Localhost: 3000 для разработчиков React, или ваш размещенный URL, если вы’В.Е размещало ваше приложение.

Авторизованный URL -адрес redirect – это ссылка, которую Google перенаправляет пользователя после успешного входа в систему. Например, вы можете вернуть пользователя обратно по вашей исходной ссылке или, возможно, перенаправить пользователя по другой ссылке. В любом случае, вы должны включить URL.

Для авторизованных источников JavaScript и авторизованных URL -адресов перенаправления добавьте URL -адреса Localhost: http: // localhost: 3000 и http: // localhost, например, так:

Наконец, нажмите Создавать кнопка для создания идентификатора веб -клиента. Ты’быть возвращенным на домашнюю страницу, где вы’Посмотрите на ваши недавно созданные учетные данные. Нажмите значок копирования, чтобы скопировать свой новый идентификатор веб -клиента:

Теперь, когда мы успешно создали наш идентификатор веб -клиента, пусть’S зайдите в наше приложение React, установите его, а затем интегрируйте вход в Google.

Сполнить все это вместе с @React-oauth/Google

Чтобы использовать пакет входа в систему Google, нам сначала нужно его установить. Запустите любую из приведенных ниже команд для установки пакета:

// npm npm install @React-oauth/[электронная почта защищена] // пряжа ud odd @React-oauth/[по электронной почте защищено] 

После установки мы’LL Оберните наше приложение Googleoauthprovider, а затем предоставьте наш идентификатор Google Web Client. Это так, что все наше приложение React может получить доступ к поставщику Google Auth Auth.

Внутри нашего индекса.JS -файл, мы’LL заверните приложение так;

/*индекс.JS*/ Импорт реагирует из &laquo;React&raquo;; Импорт реагирует из &laquo;реагирования-дома&raquo;; Импортировать < GoogleOAuthProvider >от '@React-oauth/Google'; приложение импорта из './Приложение'; Реагировать.оказывать(    , документ.getElementbyId ('root'));

Как и в каждом установленном пакете в React, мы должны сначала импортировать модуль, прежде чем мы сможем его использовать. Итак, внутри вашего приложения React, перейдите в приложение.JS -файл и скопируйте следующий код;

/*Приложение.JS*/ Импорт реагирует из &laquo;React&raquo;; Импортировать < GoogleLogin >от '@React-oauth/Google'; Function app () < const responseMessage = (response) =>< console.log(response); >; const errormessage = (ошибка) => < console.log(error); >; возвращаться (

Реагировать Google Login
 
 
 onerror = />
)> приложение для экспорта по умолчанию;

Приведенный выше код – очень простой способ продемонстрировать, как использовать вход в Google. Мы импортировали модуль GoogleLogin из @React-OAuth/Google и назвали его в нашем компоненте. Далее мы создали две функции, которые консоли регистрируют ответ, если логин был успешным, и ошибка, если он не был’t успешно.

Вы также можете объединить эти две функции в одну и использовать условное для его визуализации.

Здесь’S, как приведен выше код, когда мы тестируем его в браузере:

Щелкнув Войдите с Google Кнопка подскажет экран согласия или модал, который будет выглядеть так:

Теперь, когда мы видели, как добавить вход в Google в наше приложение React, пусть’Сделайте еще один шаг и получите пользователя’stain для создания профиля пользователя в нашем приложении. Мы перенаправляем пользователя только на домашнюю страницу, а затем получим пользователя’Электронная почта, имя и изображение.

Создание профиля пользователя в вашем приложении React на основе пользователя’S Google Profile

Интеграция входа в Google с нашим приложением дает нам доступ к пользователю’S профиль, который включает пользователя’Имя, адрес электронной почты, изображение, доступ и т. Д. Мы’ll Используйте эту информацию для создания нашего профиля пользователя.

Тем не менее, в нашем приложении.JS компонент, пусть’S замените наш существующий код на это ниже:

/*Приложение.JS*/ Import React, < useState, useEffect >от 'React'; Импортировать < googleLogout, useGoogleLogin >от '@React-oauth/Google'; импорт Axios из &laquo;Axios&raquo;; Function app () < const [ user, setUser ] = useState([]); const [ profile, setProfile ] = useState([]); const login = useGoogleLogin(< onSuccess: (codeResponse) =>setuser (кодировщик), onerror: (error) => Консоль.Log ('Login Fail:', erron)>); Используйтеэфект (() => < if (user) < axios .get(`https://www.googleapis.com/oauth2/v1/userinfo?access_token=$`, < headers: < Authorization: `Bearer $`, Accept: 'application/json' > >) .Тогда ((res) => < setProfile(res.data); >) .Catch ((ERR) => Консоль.log (err)); >>, [пользователь]); // Выйти из функции, чтобы вывести пользователя из Google и установить массив профилей на null const logout = () => < googleLogout(); setProfile(null); >; возвращаться (

Реагировать Google Login
 
 
  alt = "Пользовательский изображение" /> 
Пользователь вошел в систему
 
Имя: 
Адрес электронной почты: 
 
> Выйти 
): ( Login () >> Войдите с Google &#55357;&#56960; )>