2017. 5. 14. 15:30

이번에는 API Key와 구글+(Google+) API를 이용하여 지정한 유저의 프로필을 가지고 와봅시다.

 

API Key는 보안성이 낮아서 요즘은 폐지하거나 사용 가능 범위를 축소하는 경우가 많습니다.

구글 플러스도 API Key만 이용하면 조회할 수 있는 내용은 직접 공개된 내용뿐입니다.

 

이 포스팅에서는 구글 플러스가 중요한 것이 아니니 넘어가고 API Key를 사용해 보겠습니다.

 

연관글 영역

 

 

1. 구글+ 사용

구글 클라우드 플랫폼의 콘솔로 들어가서 'Google Cloud Google+ API'를 찾습니다.

해당 API를 찾지 못했으면 아래 링크로 들어가 주세요.

참고 : Google Cloud Platform - Google+ API

 

'사용 설정' 버튼을 눌러주면 API가 활성화됩니다.

 

 

2. API 사용하기

구글 API에서 API 키로 호출하는 건 절차랄게 없습니다.

그러므로 'jquery'를 사용하여 요청/결과 받기를 하겠습니다.

API가 지원되는 API라면 API주소에 'key=[API Key]'쿼리를 추가해서 보내면 됩니다.

 

 

2-1. API Key 만들기

API Key를 생성하는 건 이전 포스팅에 있습니다.

아래 링크에 '1. API 키 만들기'를 참고하여 생성합니다.

참고 : 구글 클라우드 플랫폼 - 2. 구글 API 사용자 인증 정보 생성하기

 

 

2-2. 참조 추가하기

.....

없습니다.

제이쿼리만 있으면 됩니다.

 

1
2
3
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous"></script>
cs

 

2-3. UI 만들기

생성된 API Key를 받기 위한 텍스트 박스와

조회할 유저의 키를 받아올 텍스트 박스를 만듭니다.

 

 

 

'call'버튼을 누르면 동작하도록 합니다.

 

 

2-4. 코드 넣기

 

html 전체 코드는 다음과 같습니다.

 

구글+ API에서 사용자 프로필을 받아오는 주소는

"https://www.googleapis.com/plus/v1/people/[유저 Key]"

입니다.

 

 

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"
            integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
            crossorigin="anonymous"></script>
 
    <script>
        function CallGoogle()
        {
            var sUrl = "https://www.googleapis.com/plus/v1/people/"
                        + $("#txtUserKey").val()
                        + "?key="
                        + $("#txtAPIKey").val();
 
            $.ajax({
                type: "GET",
                dataType: "json",
                url: sUrl,
                success: function (json) {
                    $("#txtResult").val(JSON.stringify(json));
                },
                error: function (error) {
                    $("#txtResult").val(error.responseText);
                }
            });
        }
    </script>
</head>
<body>
    API Key : <input id="txtAPIKey" type="text" style="width:300px;" />
    <br />
    User Key : <input id="txtUserKey" type="text" style="width:300px;" />
    <br />
    <br />
    <input id="Button1" type="button" value="Call" onclick="CallGoogle();" />
    <br />
    <br />
    <textarea id="txtResult" style="width:300px;height:300px"></textarea>
</body>
</html>
cs

 

 

3. 테스트 하기

 

유저키는 유저의 구글+ 에있습니다.

Google+에서 프로필을 확인하면 주소 줄에 유저키가 표시됩니다.

이 키를 넣으시면 됩니다.

 

 

 

API Key와 User Key를 넣고 'call'버튼을 눌러 봅시다.

 

 

잘 됩니다.

 

마무리

이건 너무 간단해서 테스트프로젝트도 없습니다. ㅎㅎㅎㅎ