Несколько недель назад мне нужно было разработать базовую систему аутентификации с помощью 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 !!!!
Конечный результат
Вы можете увидеть окончательный код здесь !!!
Ссылки
- Https://medium.com/better-programming/building-basic-react-authentication-e20a574d5e71
- Https://github.com/asyarb/react-use-googlelogin
Изображение Разработано Freepik