React api 로그인 (카카오톡, 구글, 네이버)

 

 

 

 

 

React 카카오톡 로그인 (api)

카카오 개발자 센터 - 애플리케이션 추가 

1. 앱키를 통해 JavaScript키 확인

2. 플랫폼 - Web - Web플랫폼 등록 (Web 활성화)

3. 앱 권한 신청 - 비즈 앱 전환 - 개인 개발자 비즈 앱 전환 (biz 활성화)

%카카오 로그인 - 활성화 = 각종 개인정보를 얻을 수 있다%

 

발급받은 JavaScript키 입력

    // 카카오톡 로그인
    useEffect(() => {
        if (!window.Kakao.isInitialized()) {
            window.Kakao.init(''); // 발급받은 JavaScript 키
        }
    }, []);
    const handleKakaoLogin = () => {
        window.Kakao.Auth.login({
            success: function (authObj) {
                console.log('카카오 로그인 성공', authObj);
                navigate('/kakao/callback');
            },
            fail: function (err) {
                console.log('카카오 로그인 실패', err);
            },
        });
    };

 

/kakao/callback 함수

	const [isLoading, setIsLoading] = useState(true); // 로딩 상태 추적
    const [error, setError] = useState(null); // 에러 상태 추적

    useEffect(() => {
        // 로그인 후 /kakao/callback에서 인증 정보를 처리합니다
        if (window.Kakao.Auth.getAccessToken()) {
            // 로그인 성공 시 액세스 토큰을 가져옵니다
            const accessToken = window.Kakao.Auth.getAccessToken();
            console.log('Access Token:', accessToken);

            // 사용자 정보를 요청합니다
            window.Kakao.API.request({
                url: '/v2/user/me',
                success: function (res) {
                    console.log('사용자 정보:', res);
                    const kakaoAccount = res.kakao_account;

                    if (kakaoAccount.has_email) {
                        console.log('사용자 이메일:', kakaoAccount.email);
                        console.log('사용자 이름:', kakaoAccount.profile.nickname);
                        setIsLoading(false); // 로딩완료
                        // 로그인 성공 후 처리할 작업 추가 (예: 상태 저장, 리다이렉트 등)
                        navigate('/');
                    } else {
                        console.log('이메일 제공에 동의하지 않음');
                        setIsLoading(false); // 로딩 완료
                    }
                },
                fail: function (error) {
                    console.error('사용자 정보 요청 실패:', error);
                    setError('사용자 정보 요청에 실패했습니다.');
                    setIsLoading(false); // 로딩 완료
                },
            });
        } else {
            console.error('액세스 토큰이 없습니다.');
            setError('액세스 토큰이 없습니다.');
            setIsLoading(false); // 로딩 완료
        }
    }, [navigate]);

 

%만약 두번 실행 된다면, index.js - React.StrictMode삭제%

%React.StrictMode = 개발 모드에서 코드 품질을 향상시키고, 잠재적인 문제를 찾을 수 있도록 도와주는 도구%

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

React 구글 로그인 (api)

vscode - npm install @react-oauth/google

https://console.cloud.google.com/ - 검색(oauth 동의 화면) - 프로젝트 생성 - User Type 외부로 설정 

- 범위 추가 또는 삭제 상단 3가지(이메일, 개인정보, 연결) 선택 

 

OAuth 동의 화면 - 앱 게시

 

사용자 인증 정보 - 사용자 인증 정보 만들기 - OAuth 클라이언트 ID 

- 승인된 JavaScript 원본 ( 구글 로그인을 사용할 홈페이지 주소 입력 )

 

- 승인된 리디렉션 URI ( 구글 로그인 후 Redirect할 주소 입력 )

 

사용자 인증 정보에서 클라이언트 ID와 클라이언트 보안 비밀번호를 확인 할 수 있다.

    // 구글 로그인
    const clientId = ''; // 클라이언트 id 기입
    const redirectUri = 'http://localhost:3000/google/callback';
    
    const handleGoogleLogin = () => {
        const googleAuthUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=token&scope=email%20profile&include_granted_scopes=true&state=state_parameter_passthrough_value`;
        window.location.href = googleAuthUrl; // Google 로그인 페이지로 리다이렉트
    };

 

/google/callback 함수

    const [isLoading, setIsLoading] = useState(true); // 로딩 상태 추적
    const [error, setError] = useState(null); // 에러 상태 추적

    useEffect(() => {
        const hash = window.location.hash;
        const params = new URLSearchParams(hash.substring(1)); // # 뒤의 값을 추출
        const accessToken = params.get('access_token'); // 토큰을 추출

        if (accessToken) {
            console.log('Access Token:', accessToken);

            // 사용자 정보를 요청하는 API 호출
            fetch('https://www.googleapis.com/oauth2/v3/userinfo', {
                method: 'GET',
                headers: {
                    Authorization: `Bearer ${accessToken}`,
                },
            })
            .then((response) => {
                if (!response.ok) {
                    throw new Error('네트워크 응답이 좋지 않습니다.');
                }
                return response.json(); // JSON 형태로 응답 변환
            })
            .then((userInfo) => {
                console.log('사용자 정보: ', userInfo);
                console.log('사용자 이메일: ', userInfo.email);
                console.log('사용자 이름: ', userInfo.name)
                setIsLoading(false); // 데이터 로딩 완료 시 상태 변경
            })
            .catch((error) => {
                console.error('사용자 정보 요청 실패:', error);
                setError('사용자 정보 요청에 실패했습니다.'); // 에러 상태 처리
                setIsLoading(false); // 로딩 완료 상태
            });

            navigate('/'); // 토큰 처리 후 원하는 페이지로 이동
        } else {
            setIsLoading(false); // 액세스 토큰이 없으면 로딩 완료 처리
            setError('액세스 토큰이 없습니다.'); // 에러 처리
        }
    }, [navigate]);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

React 네이버 로그인 (api)

https://developers.naver.com/ - Application - 애플리케이션 등록 - API 연동 정보 확인 

- Client ID, Client Secret 확인 - 네이버 로그인 검수 요청