Социальные входы с Google Auth

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

После появления унифицированной системы аутентификации, такой как Facebook, Google, Github Logins, люди предпочитают использовать эти методы для авторизации на любой платформе, имеющей такую службу аутентификации.

В этой статье мы обсудим, как мы можем его настроить; социальный логин Google в реагирующем приложении.

Дан компонент React Login с кодом ниже:

import React, {Component} from 'react'

      export default class Login extends Component {
          render(){
             return(
                 <div>
                    <input type="text" placeholder="username"/>
                    <input type="text" placeholder="username"/> 
                    <button>Login</button>
                 </div>
             )
          }
      }

Нам потребуется установить пакет, который поможет нам настроить функцию входа в Google в нашем приложении. Для этого нам потребуется установить react-google-login упаковка.

yarn add react-google-login || or you can use || npm i react-google-login

После успешной установки пакета нам придется импортировать его в наш проект. Наш проект должен выглядеть так:

import React, {Component} from 'react'
     import GoogleLogin from 'react-google-login'

      export default class Login extends Component {
          render(){
             return(
                 <div>
                    <input type="text" placeholder="username"/>
                    <input type="text" placeholder="username"/> 
                    <button>Login</button>
                 </div>
             )
          }
      }

Итак, чтобы использовать пакет, все, что нам нужно сделать, это отобразить его в нашем компоненте, добавив этот <GoogleLogin /> ниже <button>Login</button>.

Отрендеренный компонент GoogleLogin потребует некоторых свойств, переданных в качестве реквизита для работы, эти свойства включают: clientId, buttonText, onSuccess, onFailure. Я хотел бы обсудить каждый из них, от самого простого в настройке до самого сложного.

кнопкаТекст : это просто текст, который будет отображаться на кнопке. И мы могли бы просто сделать это, назначив текст для buttonText следующим образом: buttonText="Log in With Google";

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

responseGoogle = async (response) => {
    const userObject = {
      username: response.w3.ofa,
      password: 'test'
    }
    if(response.w3.ofa) {
      await localStorage.setItem("user", JSON.stringify(userObject));
      await window.location.reload();
    } else {

    }
    console.log(response);
  }

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

Поскольку Google не возвращает пароль пользователя, я обычно назначаю ему пароль по умолчанию и сохраняю этот пароль в базе данных. А в другой раз, если пользователь попытается войти в систему, все, что мне нужно сделать, это отправить объект с его именем пользователя и паролем по умолчанию обратно на сервер, что в нашем случае test. В нашем примере мы будем хранить userObject в local storage, но если вы сохраняете свои данные в базе данных, вам придется отправить этот объект в метод, обрабатывающий аутентификацию пользователя на сервере. Чтобы завершить процесс, мы теперь назначим созданный метод onSuccess собственность как таковая; onSuccess = responseGoogle;. Для свойства onFailure у нас может быть предупреждение или журнал внутри метода, который выводит сообщение об ошибке, и мы назначаем этот метод onFailure собственности, как мы сделали с onSuccess.

ID клиента :
Чтобы получить эту информацию, вам нужно посетить консоль Google API. Здесь

Нажмите на раздел учетных данных и нажмите кнопку «Создать учетные данные».
Выберите опцию Oauth

Обратите внимание: если вы еще не создали проект, вам будет предложено следовать инструкциям и создать проект, а затем попытаться снова создать учетные данные. На этот раз следуйте подсказке, пока не дойдете до той части, где вам показывают ваш clientIdскопируйте clientId и назначьте собственный clientId к этому. В конце концов, наш Login Компонент будет выглядеть так:

импортировать React, {Component} из «реагировать»
импортировать GoogleLogin из «React-Google-Login»

export default class Login extends Component {

      responseGoogle = async (response) => {
         const userObject = {
            username: response.w3.ofa,
            password: 'test'
         }
         if(response.w3.ofa) {
            await localStorage.setItem("user", JSON.stringify(userObject));
            await window.location.reload();
         } else {

      }
      console.log(response);
      }
      render(){
         return(
             <div>
                <input type="text" placeholder="username"/>
                <input type="text" placeholder="username"/> 
                <button>Login</button>
                <GoogleLogin
                  clientId="##########" //id gotten from Google
                  buttonText="Log in with Google"
                  onSuccess={this.props.responseGoogle}
                  onFailure={this.props.responseGoogleError}
                />
             </div>
         )
      }
  }

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