이 강좌의 이 부분에서 1부에서 얻은 클라이언트 ID를 사용하여 react-google-login library을 사용하는 로그인 및 로그아웃 구성 요소에 연결합니다.이것은 네가 필요로 하는 소포다

"dependencies": {
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@material-ui/styles": "^4.11.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-google-login": "^5.2.2",
    "react-redux": "^7.2.2",
    "react-scripts": "4.0.1",
    "redux": "^4.0.5"
  }

(가령 당신이 CRA+redux 설정을 가지고 있다면)
react 구글에 로그인한 문서는 매우 유용하고 간결합니다.Google OAuth 클라이언트 id에 대한 설명을 가져오는 것이 유일하다고 생각합니다. 첫 번째 기사에서 설명했습니다.
이제 우리는 도서관에 부착된 내장 부품을 사용할 수 있으며, 그것들을 이렇게 보일 수 있도록 특정한 도구를 제공할 수 있다.

  <GoogleLogin
    clientId="zzzzz"
    buttonText="Login"
    onSuccess={responseGoogle} //Some function 
    onFailure={responseGoogle}
  />
  //same for GoogleLogout component

이것은 사용할 수 있지만, 최종적으로 프로젝트에 테마를 설정하기를 희망합니다. '밝기 모드' -> '어두운 모드' 에서 전환하면 모든 구성 요소의 스타일이 전환됩니다.따라서 Material UI 구성 요소에서 로그인과 로그아웃 단추를 만들고 이 라이브러리의 갈고리useGoogleLogin () useGoogleLogout () 를 사용하여 단추를 만들 것입니다.

GoogleLogin 구성 요소에 들어가는 도구가 이 갈고리 함수에 대상으로 전달됩니다.
Google Logout () 갈고리는 기능적으로 거의 같기 때문에 현재 가장 중요한 부분은 이 두 갈고리를 위한 onSuccess와 onFailure 함수를 작성하는 것입니다.이 함수들이 무엇을 해야 하는지 문서를 검사해 봅시다


인증에 성공하면 예상 대상은tokenId,profileObj,GoogleId(등)가 있는 대상입니다재산같은 요청이 실패하면 오류 속성과 메시지에 대한 자세한 정보를 포함하는 대상을 onFailure에 보냅니다.

인코딩할 때가 됐어요.

...이것들이 있으면 우리는 인코딩을 시작하는데 필요한 모든 것을 가질 수 있다.우리는 레드ux 상점에 사용자 정보를 저장할 것이기 때문에, 우선 이 부분들을 설정하겠습니다
당신의 레드ux 폴더를 설정하는 것은 매우 자기 의견을 고집하는 것이지만, 이것이 바로 내가 폴더를 설정하는 방식입니다

|- reducers
|- types
|- actions

1) 유형:
상당히 간단하다. 단지 두 가지 가능한 상태일 뿐이다.사용자 로그인 및 로그아웃

export const SIGN_IN = 'SIGN_IN';
export const SIGN_OUT = 'SIGN_OUT';

2) 행동 창조자:
우리는 두 개의 되돌아오는 조작 대상의 함수를 작성할 것이다. 하나는 로그인에 사용되고, 다른 하나는 로그아웃에 사용될 것이다.

/*
  Will be passed in as the onSuccess and onFailure callback
  for useGoogleLogin() hook
/*
export const googleOAuthLogin = (response) => {
    const action = { type: SIGN_IN };
    let payload;
    if (typeof response === 'undefined' || response.error) {
        //If login fails
        payload = null;
    } else {
        payload = response;
    }
    action.payload = payload;
    return action;
};

로그아웃에 있어서, 우리는 반드시 어떤 오류도 처리할 필요가 없습니다. (여기를 참고하십시오. 우리는 심지어 파라미터를 받아들이지 않습니다.) 왜냐하면 우리가 진정으로 하는 것은 사용자를 Redux 저장소에서 제거하는 것입니다.

/*
  Will be passed in as the onSuccess and onFailure callback
  for useGoogleLogout() hook
/*
export const googleOAuthLogout = () => {
    const action = { type: SIGN_OUT };
    return action;
};

3) 감속기
이 상태를 Redux 저장소의 "auth"키에 저장하는 것을 선택했습니다. 이 키의 초기 상태는... 이라고 정의합니다.

const INITIAL_STATE = {
    loggedIn: false,
    user: null
};

SIGN IN 및 SIGN OUT 작업을 처리하는 Reducer를 작성했습니다(기본 매개변수를 사용하는 것을 잊지 마세요!).우리 행동의 표식을 위해서실패하면 유효 부하가 비어 있지만 성공하면 Google 응답 대상은 거기에 있어야 합니다.

case SIGN_IN:
 let loggedIn = action.payload ? true : false;
 return loggedIn ?
 {...state,loggedIn,user: {                      
    tokenId: action.payload.tokenId,                     
    ...action.payload.profileObj
   }
 }
: { ...state, loggedIn, user: null };

/*
 If successful looks state looks like 
 {loggedIn: true, user: {tokenId: "sometoken" , profileObj: {}}
*/

case SIGN_OUT:
 return { ...INITIAL_STATE};

4) 로그인 구성 요소
버튼을 만드는 데 사용되는 실제 CSS에 대해 너무 많이 토론할 필요가 없습니다. 내장 스타일 시스템을 사용하여 재료 UI를 어떻게 하는지 빠르게 연구해 보겠습니다.

import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
    center: {
        display: 'flex',
        justifyContent: 'center'
    },
    button: {
        textTransform: 'none',
        marginTop: theme.spacing(10),
        display: 'flex',
        alignItems: 'center',
        boxShadow: theme.shadows[3],
        backgroundColor: theme.palette.primary.main,
        color: theme.palette.primary.contrastText,
        transition: 'background-color 0.5s',
        '&:hover': {
            backgroundColor: theme.palette.primary.dark,
            transition: 'background-color 0.5s',
            cursor: 'pointer'
        }
    },
}));

makeStyles에서 키 값 쌍이 있는 객체를 반환했습니다. 키 값은 클래스 이름이고 값은 항상 CSS 속성을 지정하는 객체입니다.(CSS 속성은 camelCased임을 기억하십시오.)

* 테마 변수는 무엇입니까 *

아직 테마를 정의하지 않았기 때문에 Material UI는 기본 테마를 제공합니다. here을 보실 수 있습니다. (이것은 거대한 대상일 뿐입니다.)
이러한 클래스를 사용하려면 위의 함수 (useStyles라고 함) 를 호출한 다음 대상을 되돌려줍니다.

const classes = useStyles();
return(
<p className={classes.center}> Hello! </p>
)

react redux에서 제공하는 갈고리를 사용할 것입니다. 그러나 이것은 맵 State To Props (use Selector로 교체) 와 맵 디스패치 To Props (use Dipatch로 교체, 수동으로 스케줄링해야 합니다) 를 사용하는 것과 같습니다.

...
import googleLogo from '../images/google-logo.png';
import { useDispatch } from 'react-redux';
...


const clientId =
    'blahblahblahblah.apps.googleusercontent.com';
function Login() {
    const onSuccess = (res) => {
        dispatch(googleOAuthLogin(res));
    };
    const onFailure = (res) => {
        dispatch(googleOAuthLogin(res));
    };

    const { signIn } = useGoogleLogin({
        onSuccess,
        onFailure,
        clientId,
        isSignedIn: true
    });

    return (
        <Container component='section' className={classes.center}>
            <Button className={classes.button} onClick={signIn}>
                <Avatar src={googleLogo} className={classes.avatar} />
                <Typography component='p' variant='h6' className={classes.text}>
                    Sign in with Google
                </Typography>
            </Button>
        </Container>
    );
}

Google은 제1조의clientId를 사용합니다. isSignedIn은localStorage의 항목을 통해 사용자가 세션을 통해 로그인하는 것을 지속하는 데 사용됩니다.
스타일의 일치성을 유지하기 위해서, 로그아웃 구성 요소에 대해 같은makeStyles 대상을 사용합니다. 유일한 차이점은useGoogleLogout에 전달되는 함수가onFailure와onLogoutSuccess라고 합니다.

function Logout() {
    const classes = useStyles();
    const dispatch = useDispatch();
    const onSuccess = (res) => {
        dispatch(googleOAuthLogout(res));
    };
    const onFailure = (res) => {
        dispatch(googleOAuthLogout(res));
    };
    const { signOut } = useGoogleLogout({
        onFailure,
        onLogoutSuccess: onSuccess,
        clientId,
        isSignedIn: true
    });
    return (
        <Container component='section' className={classes.center}>
            <Button className={classes.button} onClick={signOut}>
                <Avatar src={googleLogo} className={classes.avatar} />
                <Typography component='p' variant='h6' className={classes.text}>
                    Sign out of Google
                </Typography>
            </Button>
        </Container>
    );
}

마지막 걸음!

응용 프로그램에 들어가겠습니다.js (또는 루트 구성 요소의 이름) 을 표시하고 구성 요소에 조건을 추가합니다.useSelector를 사용하여 상점에 들어가서 권한을 검사할 것입니다.loggedIn 속성을 사용하여 표시할 버튼을 결정합니다.

function App() {
    const auth = useSelector((state) => state.auth);
    return (
            <main>
                {auth.loggedIn ? <Logout /> : <Login />}
            </main>
        </ThemeProvider>
    );
}

너의 프로젝트는 지금 이럴 거야!
세 번째 부분은 밝은 모드에서 어두운 모드로 쉽게 전환할 수 있도록 레드ux와 테마 시스템을 통해 경보 시스템을 설정할 것이다.