[TIL]2022.01.01

왜 그런지는 모르겠지만 google OAuth 사용중에 리디렉션 url이 https 면 홈페이지가 렌더링 되지 않고 에러를 뱉었다. 코드는 다음과 같았다.
그래서 http로 엑세스토큰을 받으면 정상적으로 렌더링된다.

그에 대한 이유 =>
https://stackoverflow.com/questions/58003508/err-ssl-protocol-error-when-i-try-to-connect-with-localhost

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function ManagerMain() {
    const [url, setUrl] = useState('https://accounts.google.com/o/oauth2/v2/auth?client_id=780867118511-7phr24j325eauivpisavdb062rmi68er.apps.googleusercontent.com&response_type=token&redirect_uri=https://localhost:3000&scope=https://www.googleapis.com/auth/userinfo.email');
    const [ data, setData ] = useState(null);
    useEffect(async () => {
        const url = new URL(window.location.href);
        //? hash를 떼어주고
        const hash = url.hash;
        console.log('url',url);
        if (hash) {
            //? 토큰만 떼어주면된다.
            const accessToken = hash.split("=")[1].split("&")[0];
            //? 토큰을 이용한 api 요청.
            await axios.get('https://www.googleapis.com/oauth2/v2/userinfo?access_token=' + accessToken, {
                headers: {
                    authorization: `token ${accessToken}`,
                    accept: 'application/json'
                }
            })
                .then(data => {
                    setData(data);
                }).catch(e => console.log('oAuth token expired'));
        }
    }, [])

    function socialLoginHandler() {
        window.location.assign(url);
    }

    return (
        <div>
            관리자메인페이지
            여기다가 처음 페이지를 Oath 로그인을 하도록 하자. 그리고 토큰을 주고 그 토큰으로
            관리자 페이지에서 Authorization을 할 수 있도록 하자.

            <div className='loginContainer'>
                OAuth 2.0으로 소셜 로그인을 구현해보세요.
            <img id="logo" alt="logo" src="https://lh3.googleusercontent.com/a/default-user=s96-c" />
                <button
                    onClick={socialLoginHandler}
                    className='socialloginBtn'
                >
                    Google로 로그인
          </button>
            </div>

        </div>
    )
}

export default ManagerMain

import GoogleLogin from 'react-google-login';
를 해서 라이브러리의 도움을 받아보기로 했다.

https://javascript.plainenglish.io/how-to-set-up-google-oauth-in-react-with-react-google-login-9c6538389fde

다음과 같이 리디렉션 url을 설정해주니까 된 것같다. 'react-google-login'을 써서라기보다

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import GoogleLogin from 'react-google-login';

function ManagerMain() {
    const [ data, setData ] = useState(null);

    async function test(res){
        console.log('res : ', res.accessToken);
        await axios.get('https://www.googleapis.com/oauth2/v2/userinfo?access_token=' + res.accessToken, { 
            headers: { 
              authorization: `token ${res.accessToken}`, 
              accept: 'application/json' 
            }})
            .then(data => {
              console.log(data);
              setData(data);
          }).catch(e => console.log('oAuth token expired'));
    }

    return (
        <div>
            관리자메인페이지
            여기다가 처음 페이지를 Oath 로그인을 하도록 하자. 그리고 토큰을 주고 그 토큰으로
            관리자 페이지에서 Authorization을 할 수 있도록 하자.

            <div className='loginContainer'>
                OAuth 2.0으로 소셜 로그인을 구현해보세요.
            <GoogleLogin
                clientId={'780867118511-7phr24j325eauivpisavdb062rmi68er.apps.googleusercontent.com'}
                buttonText="Google로 로그인"
                onSuccess={test}
                onFailure={test}/>
            </div>

        </div>
    )
}

export default ManagerMain

됐다.. 무엇이 문제인지는 모르겠다, 리디렉션을 올바르게해도 로그인을 짧은 시간내에 빨리하면 오류가 뜨는것 같다.

다음에는 로그인이 됐을 시 관리자창을 띄워서 AWS와 연결해서 갤러리 CRUD를 구성해야겠다.

나중에 OAuth에 대해서 정리하여 블로깅해보자