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

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

  • Базовая навигация.
  • Настроить вход и выход.
  • Настройте публичный и частный маршрутизатор.

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

Базовая навигация

Первый шаг - создать свой проект и установить зависимости.

пряжа создать приложение реагировать реагировать auth с Google

пряжа добавить реагировать-маршрутизатор-дом реагировать-использовать-googlelogin

Мы создадим базовый пример, который использует публичную и частную стороны. Итак, давайте создадим наши общедоступные и частные страницы.

Общедоступная страница

import React from 'react';

const PublicPage = () => {
    return (
        <h2> Public Page </h2>
    );
};

export default PublicPage;

Частная страница

import React from 'react';

const PrivatePage = () => {
    return (
        <h2>Private Page</h2>
    );
};

export default PrivatePage;

А пока мы определим базовую навигацию с помощью Route и BrowserRouter в компоненте App.

Навигация в компоненте приложения

import React from 'react';
import { Route, BrowserRouter} from 'react-router-dom';
import PrivatePage from './PrivatePage'
import PublicPage from './PublicPage'
import './App.css';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Route exact path="/" component={PublicPage} />
        <Route path="/private" component={PrivatePage} />      
      </BrowserRouter>
    </div>
  );
}

export default App;

Пока что у нас есть приложение React с навигацией. Вы можете ознакомиться с кодом здесь.

Результат

Настроить вход и выход

Давайте продолжим с аутентификацией Google, для этого мы будем использовать зависимость response-use-googlelogin; это небольшая оболочка клиентской библиотеки Google oAuth2 JavaScript для доступа к функциям входа в Google в вашем приложении React, для получения дополнительной информации покажите здесь.

В следующем коде мы определим нашего провайдера и контекст. Этот код поможет нам управлять сеансами.

Провайдер и контекст

import React from 'react'
import { useGoogleLogin } from 'react-use-googlelogin'

const GoogleAuthContext = React.createContext()

export const GoogleAuthProvider = ({ children }) => {
  const googleAuth = useGoogleLogin({
    clientId: process.env.GOOGLE_CLIENT_ID, // Your clientID from Google.
  })

  return (
    <GoogleAuthContext.Provider value={googleAuth}>
      {children}
    </GoogleAuthContext.Provider>
  )
}

export const useGoogleAuth = () => React.useContext(GoogleAuthContext)

Обязательно используйте свой идентификатор клиента Google. Давайте создадим кнопки входа и выхода с помощью нашего хука useGoogleAuth.

LoginButton

import React from 'react';
import { useGoogleAuth } from './googleAuth';

const LoginButton = () => {

    const { signIn } = useGoogleAuth();

    return (
        <button onClick={signIn}>Login</button>
      );
};

export default LoginButton;

LogoutButton

import React from 'react';
import { useGoogleAuth } from './googleAuth';

const LogoutButton = () => {
    const { signOut } = useGoogleAuth();

    return (
        <button onClick={signOut}>Logout</button>
      );
};

export default LogoutButton;

Теперь мы добавим кнопки входа и выхода на общедоступную и частную страницу соответственно.

PublicPage (версия 2)

import React from 'react';
import LoginButton from './LoginButton';

const PublicPage = () => {
    return (
        <div>
            <h2> Public Page </h2>
            <LoginButton/>
        </div>
    );
};

export default PublicPage;

PrivatePage (версия 2)

import React from 'react';
import LogoutButton from './LogoutButton';

const PrivatePage = () => {
    return (
        <div>
            <h2>Private Page</h2>
            <LogoutButton/>
        </div>
    );
};

export default PrivatePage;

И мы обернем приложение в GoogleAuthProvider.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { GoogleAuthProvider } from './googleAuth';

ReactDOM.render(
    <GoogleAuthProvider>
      <App />
    </GoogleAuthProvider>,
  document.getElementById('root')
);

На этом этапе у нас есть базовый вход и выход из системы с помощью Google oAuth2 и хуков.

Результат

Вы можете просмотреть код здесь.

Настроить публичный и частный роутеры

Итак, сделаем последний шаг - добавим общедоступный и частный маршрутизаторы. Я видел много постов о приватных и публичных роутерах, но мне понравился этот пост своей чистотой и простотой. В нашем посте мы рассмотрим ту же структуру для маршрутизаторов. Создадим наши роутеры.

PublicRouter

import React from 'react';
import {Route, Redirect} from 'react-router-dom';
import { useGoogleAuth } from "./googleAuth";

const PublicRouter = ({component: Component, ...rest}) => {

    const { isSignedIn } = useGoogleAuth();

    return (
        <div>
            <Route {...rest} render={props => (
                !isSignedIn ?
                <Component {...props} /> : 
                <Redirect exact to="/private" />
            )} />    
        </div>
    );
};

export default PublicRouter;

PrivateRouter

import React from 'react';
import {Route, Redirect} from 'react-router-dom';
import { useGoogleAuth } from "./googleAuth";

const PrivateRoute = ({component: Component, ...rest}) => {

    const { isSignedIn } = useGoogleAuth();

    return (
        <div>
            <Route {...rest} render={props => (
                isSignedIn ?
                <Component {...props} />: 
                <Redirect exact from="/private" to="/" />
            )} />
        </div>
    );
};

export default PrivateRoute;

Теперь настроим наши правила навигации, добавив созданные роутеры.

Компонент "Навигация в приложении" (версия 2)

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import PrivatePage from './PrivatePage'
import PublicPage from './PublicPage'
import PrivateRouter from './PrivateRoute';
import PublicRouter from './PublicRouter';
import './App.css';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
          <PrivateRouter path="/private" component={PrivatePage} />                
          <PublicRouter path="/" component={PublicPage} />
      </BrowserRouter>
    </div>
  );
}

export default App;

Поздравление; теперь у нас есть базовая система аутентификации с использованием хуков и Google Google oAuth2 !!!!

Конечный результат

Вы можете увидеть окончательный код здесь !!!

Ссылки

Изображение Разработано Freepik