이번에는 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'버튼을 눌러 봅시다.
잘 됩니다.
마무리
이건 너무 간단해서 테스트프로젝트도 없습니다. ㅎㅎㅎㅎ
