바로 이해하는 OAuth 2.0: 프론트엔드와 백엔드에서의 역할 구분

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

import React from "react";

export const GitHubLogin = () => {
    const CLIENT_ID = "YOUR_GITHUB_CLIENT_ID";
    const REDIRECT_URI = "http://localhost:3000/callback";

    // GitHub 로그인 페이지로 리다이렉트
    const handleLogin = () => {
        window.location.href = `https://github.com/login/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&scope=user`;
    };

    return <button onClick={handleLogin}>GitHub로 로그인</button>;
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import React, { useEffect } from "react";
import axios from "axios";

// 콜백 페이지
export const Callback = () => {
    useEffect(() => {
        // 콜백 URL에서 code 값 추출
        const code = new URLSearchParams(window.location.search).get("code");
        // 얻어온 code 값이 있으면 백엔드로 전송
        if (code) {
            axios
                .post("/api/github-callback", { code })
                .then((response) => {
                    // 로그인 성공 처리
                    console.log(response.data);
                })
                .catch((error) => {
                    console.error("Error:", error);
                });
        }
    }, []);

    return <div>Processing login...</div>;
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

package main

import (
	"encoding/json"
	"fmt"
	"net/http"
	"net/url"
	"strings"
)

const (
	clientID     = "your-client-id"
	clientSecret = "your-client-secret"
	githubTokenURL = "https://github.com/login/oauth/access_token"
	githubUserURL  = "https://api.github.com/user"
)

1
2
3
4

func main() {
	http.HandleFunc("/callback", handleCallback) // 콜백 핸들러 등록
	http.ListenAndServe(":8080", nil)
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

func handleCallback(w http.ResponseWriter, r *http.Request) {
	code := r.URL.Query().Get("code") // 클라이언트가 보낸 code 값 쿼리에서 추출
	if code == "" {
		http.Error(w, "Missing code", http.StatusBadRequest)
		return
	}

	token, err := getAccessToken(code) // 액세스 토큰 요청 함수 호출
	if err != nil {
		http.Error(w, "Failed to get token", http.StatusInternalServerError)
		return
	}

	userInfo, err := getUserInfo(token) // 사용자 정보 요청 함수 호출
	if err != nil {
		http.Error(w, "Failed to get user info", http.StatusInternalServerError)
		return
	}

	// 원래는 받아온 사용자의 정보를 이용해 jwt 토큰을 발급하거나 세션을 생성하는 등의 작업을 수행
	// 이 예제에서는 회원가입, 로그인 작업을 생략하고 사용자 정보를 그대로 보내줌

	fmt.Fprintf(w, "User Info: %s", userInfo)
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

func getAccessToken(code string) (string, error) {
    // POST 요청을 보내기 위해 URL 값 설정
    // 유저가 보낸 code 값과 클라이언트 ID, 시크릿 값 설정
	data := url.Values{
		"grant_type":    {"authorization_code"},
		"code":          {code},
		"client_id":     {clientID},
		"client_secret": {clientSecret},
	}

    // Authorization Server로 POST 요청 보내기
	resp, err := http.Post(githubTokenURL, "application/x-www-form-urlencoded", strings.NewReader(data.Encode()))
	if err != nil {
		return "", err
	}
	defer resp.Body.Close()

    // 응답받은 JSON 파싱
	var result map[string]interface{}
	if err := json.NewDecoder(resp.Body).Decode(&result); err != nil {
		return "", err
	}

    // 파싱한 JSON에서 액세스 토큰 추출
	return result["access_token"].(string), nil
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

func getUserInfo(token string) (string, error) {
	req, err := http.NewRequest("GET", githubUserURL, nil)
	if err != nil {
		return "", err
	}

    // 헤더에 받은 액세스 토큰 추가
	req.Header.Set("Authorization", "token "+token)

	// Authorization Server로 GET 요청 보내기
	resp, err := http.DefaultClient.Do(req)
	if err != nil {
		return "", err
	}
	defer resp.Body.Close()

	var userInfo map[string]interface{}
	if err := json.NewDecoder(resp.Body).Decode(&userInfo); err != nil {
		return "", err
	}

    // 사용자 정보 반환
	return fmt.Sprintf("%v", userInfo), nil
}