기타

로그인 연동 - 구글

연습노트 2024. 8. 7. 09:52

1. https://console.cloud.google.com/

들어가서 사진의 내용과 같이 입력.

2. 좌측 사용자 인증정보 > + 사용자 인증정보만들기 > OAuth 클라이언트 ID 

여기에 나오는 아이디 비번 메모메모!!

 

 

3. 위 검색창에 google people api 쳐서 사용하기 

 

<index , token 코드에 입력해야할 부분!>

 

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Google Login Example</title>
</head>
<body>
    <h1>구글 로그인 예제</h1>
</body>
</html>

 

test.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Google OAuth Callback</title>
</head>
<body>
    <h1>Google OAuth Callback</h1>
    <script>
        // URL에서 code 파라미터 추출
        const urlParams = new URLSearchParams(window.location.search);
        const code = urlParams.get('code');

        if (code) {
            // PHP 스크립트로 권한 코드 전송
            fetch('token_exchange.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: new URLSearchParams({
                    code: code
                })
            })
            .then(response => response.text())
            .then(data => {
                document.body.innerHTML = data;
            })
            .catch(error => {
                console.error('Error:', error);
            });
        } else {
            document.body.innerHTML = '<p>Authorization code not found.</p>';
        }
    </script>
</body>
</html>

 

 

token_exchange.php

<?php
$client_id = "입력해라";
$client_secret = "입력해라";
$code = $_POST['code'];
$redirect_uri = "http://127.0.0.1:5500/test.html";

// 액세스 토큰 발급을 위한 URL과 데이터
$data = array(
    'code' => $code,
    'client_id' => $client_id,
    'client_secret' => $client_secret,
    'redirect_uri' => $redirect_uri,
    'grant_type' => 'authorization_code'
);

// HTTP POST 요청을 통해 액세스 토큰 발급
$options = array(
    'http' => array(
        'header'  => "Content-Type: application/x-www-form-urlencoded\r\n",
        'method'  => 'POST',
        'content' => http_build_query($data),
    ),
);

$context  = stream_context_create($options);
$response = file_get_contents($url, false, $context);
if ($response === FALSE) {
    die('Error');
}

$response_data = json_decode($response, true);
$access_token = $response_data['access_token'];

// 액세스 토큰을 사용하여 사용자 정보 요청
$user_info = file_get_contents($user_info_url);
$user_info_data = json_decode($user_info, true);

// 사용자 정보 출력
echo "안녕하세요, " . htmlspecialchars($user_info_data['name'], ENT_QUOTES, 'UTF-8') . "님!";
?>

'기타' 카테고리의 다른 글

docker  (0) 2024.08.13
배포하기>https://console.firebase.google.com  (0) 2024.08.13
팁>h1 한줄에 띄어쓰기 , 탭  (0) 2024.08.07
기타 팁> 라우터를 구분해서 사용하면 용이하다  (0) 2024.07.26
만든 사이트 발행하기  (0) 2024.07.10