OAuth2는 승인에 사용되는 업계 표준 프로토콜입니다. 이 도구는 사용자가 사용자 이름을 공유하지 않고 웹 및 데스크톱 애플리케이션에 개인 정보에 대한 액세스 권한을 부여 비밀번호, 기타 비공개 사용자 인증 정보가 포함됩니다.
이 가이드에서는 Google People API 및 Chrome ID API 확장 프로그램은 HTTPS, 수행할 수 없음 리디렉션하거나 쿠키를 설정할 때 Chrome ID API를 통해 OAuth2를 사용합니다.
시작하기
먼저 디렉터리와 다음 시작 파일을 만듭니다.
manifest.json
manifest.json라는 파일을 만들어 매니페스트를 추가하고 다음 코드를 포함합니다.
{
"name": "OAuth Tutorial FriendBlock",
"version": "1.0",
"description": "Uses OAuth to connect to Google's People API and display contacts photos.",
"manifest_version": 3,
"action": {
"default_title": "FriendBlock, friends face's in a block."
},
"background": {
"service_worker": "service-worker.js"
}
}
service-worker.js
service-worker.js라는 파일을 만들어 확장 프로그램 서비스 워커를 추가하고 다음 코드를 포함합니다.
chrome.action.onClicked.addListener(function() {
chrome.tabs.create({url: 'index.html'});
});
index.html
index.html이라는 HTML 파일을 추가하고 다음 코드를 포함합니다.
<html>
<head>
<title>FriendBlock</title>
<style>
button {
padding: 10px;
background-color: #3C79F8;
display: inline-block;
}
</style>
</head>
<body>
<button>FriendBlock Contacts</button>
<div id="friendDiv"></div>
</body>
</html>
일관된 확장 프로그램 ID 유지
개발 중에는 단일 ID를 유지하는 것이 중요합니다. ID를 일관되게 유지하려면 다음 단계를 따르세요.
개발자 대시보드에 확장 프로그램 업로드
확장 프로그램 디렉터리를 .zip 파일로 패키징하고 Chrome 개발자
대시보드를
게시하지 않고 확인할 수 있습니다
- 개발자 대시보드에서 새 항목 추가를 클릭합니다.
- 파일 찾아보기를 클릭하고 확장 프로그램의 ZIP 파일을 선택하여 업로드합니다.
- 패키지 탭으로 이동하여 공개 키 보기를 클릭합니다.
팝업이 열리면 다음 단계를 따르세요.
-----BEGIN PUBLIC KEY-----와-----END PUBLIC KEY-----사이에 코드를 복사합니다.- 줄바꿈을 삭제하여 텍스트를 한 줄로 만듭니다.
"key" 필드 아래의 manifest.json에 코드를 추가합니다.
이렇게 하면 확장 프로그램에서 동일한 ID를 사용하게 됩니다.
{ // manifest.json
"manifest_version": 3,
...
"key": "ThisKeyIsGoingToBeVeryLong/go8GGC2u3UD9WI3MkmBgyiDPP2OreImEQhPvwpliioUMJmERZK3zPAx72z8MDvGp7Fx7ZlzuZpL4yyp4zXBI+MUhFGoqEh32oYnm4qkS4JpjWva5Ktn4YpAWxd4pSCVs8I4MZms20+yx5OlnlmWQEwQiiIwPPwG1e1jRw0Ak5duPpE3uysVGZXkGhC5FyOFM+oVXwc1kMqrrKnQiMJ3lgh59LjkX4z1cDNX3MomyUMJ+I+DaWC2VdHggB74BNANSd+zkPQeNKg3o7FetlDJya1bk8ofdNBARxHFMBtMXu/ONfCT3Q2kCY9gZDRktmNRiHG/1cXhkIcN1RWrbsCkwIDAQAB",
}
ID 비교
chrome://extensions에서 확장 프로그램 관리 페이지를 열고 개발자 모드가 사용 설정되어 있는지 확인합니다.
패키징되지 않은 확장 프로그램 디렉터리를 업로드합니다. 확장 프로그램 관리에서 확장 프로그램 ID 비교
개발자 대시보드의 항목 ID에 추가합니다. 둘은 일치해야 합니다.
OAuth 클라이언트 ID 만들기
Google API 콘솔로 이동하여 새 프로젝트를 만듭니다. 준비가 되면 사이드바에서 사용자 인증 정보를 선택한 다음 사용자 인증 정보 만들기를 클릭하고 OAuth 클라이언트 ID를 선택합니다.
클라이언트 ID 만들기 페이지에서 Chrome 확장 프로그램을 선택합니다. 확장 프로그램의 이름 및 장소 입력 애플리케이션 ID 입력란의 URL 끝에 있는 확장 프로그램 ID를 입력합니다.
'만들기'를 클릭하여 완료합니다. 콘솔에서 OAuth 클라이언트 ID를 제공합니다.
매니페스트에 OAuth 등록
확장 프로그램 매니페스트에 "oauth2" 필드를 포함합니다. 생성된 OAuth 클라이언트 ID를 다음에 배치합니다.
"client_id" 지금은 "scopes"에 빈 문자열을 포함합니다.
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes":[""]
},
...
}
첫 번째 OAuth 흐름 시작
매니페스트에 identity 권한을 등록합니다.
{
"name": "OAuth Tutorial FriendBlock",
...
"permissions": [
"identity"
],
...
}
oauth.js라는 OAuth 흐름을 관리할 파일을 만들고 다음 코드를 포함합니다.
window.onload = function() {
document.querySelector('button').addEventListener('click', function() {
chrome.identity.getAuthToken({interactive: true}, function(token) {
console.log(token);
});
});
};
index.html의 헤드에 oauth.js의 스크립트 태그를 배치합니다.
...
<head>
<title>FriendBlock</title>
...
<script type="text/javascript" src="oauth.js"></script>
</head>
...
확장 프로그램을 새로고침하고 브라우저 아이콘을 클릭하여 index.html을 엽니다. 콘솔을 열고 'FriendBlock Contacts'를 클릭하세요. 버튼을 클릭합니다. 콘솔에 OAuth 토큰이 표시됩니다.
Google People API 사용 설정
Google API 콘솔로 돌아가 사이드바에서 라이브러리를 선택합니다. 'Google People'을 검색합니다. API'라는 메시지가 표시되면 올바른 결과를 클릭하여 사용 설정합니다.
Google People API 클라이언트 라이브러리를 확장 프로그램 매니페스트의 "scopes"에 추가합니다.
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/contacts.readonly"
]
},
...
}
Google API 콘솔로 돌아가서 사용자 인증 정보로 돌아갑니다. '사용자 인증 정보 만들기'를 클릭합니다. 및 'API 키' 선택 선택합니다.
생성된 API 키는 나중에 사용할 수 있도록 보관합니다.
첫 번째 API 요청 만들기
이제 확장 프로그램에 적절한 권한과 사용자 인증 정보가 있으며 Google 사용자를 승인할 수 있으므로
People API를 통해 데이터를 요청할 수 있습니다. oauth.js의 코드를 아래와 일치하도록 업데이트합니다.
window.onload = function() {
document.querySelector('button').addEventListener('click', function() {
chrome.identity.getAuthToken({interactive: true}, function(token) {
let init = {
method: 'GET',
async: true,
headers: {
Authorization: 'Bearer ' + token,
'Content-Type': 'application/json'
},
'contentType': 'json'
};
fetch(
'https://people.googleapis.com/v1/contactGroups/all?maxMembers=20&key=API_KEY',
init)
.then((response) => response.json())
.then(function(data) {
console.log(data)
});
});
});
};
API_KEY를 Google API 콘솔에서 생성된 API 키로 바꾸세요. 확장 프로그램
아래 있는 people/account_id 배열이 포함된 JSON 객체를 로깅해야 합니다.
memberResourceNames 필드
얼굴 차단
이제 확장 프로그램이 사용자의 연락처 목록을 반환하므로 추가 요청을 할 수 있습니다.
연락처의 프로필과 정보를 검색할 수 있습니다 . 확장 프로그램은
memberResourceNames는 사용자 연락처의 사진 정보를 검색합니다. oauth.js 업데이트 대상
다음 코드를 포함합니다.
window.onload = function() {
document.querySelector('button').addEventListener('click', function() {
chrome.identity.getAuthToken({interactive: true}, function(token) {
let init = {
method: 'GET',
async: true,
headers: {
Authorization: 'Bearer ' + token,
'Content-Type': 'application/json'
},
'contentType': 'json'
};
fetch(
'https://people.googleapis.com/v1/contactGroups/all?maxMembers=20&key=<API_Key_Here>',
init)
.then((response) => response.json())
.then(function(data) {
let photoDiv = document.querySelector('#friendDiv');
let returnedContacts = data.memberResourceNames;
for (let i = 0; i < returnedContacts.length; i++) {
fetch(
'https://people.googleapis.com/v1/' + returnedContacts[i] +
'?personFields=photos&key=API_KEY',
init)
.then((response) => response.json())
.then(function(data) {
let profileImg = document.createElement('img');
profileImg.src = data.photos[0].url;
photoDiv.appendChild(profileImg);
});
};
});
});
});
};
새로고침하여 확장 프로그램으로 돌아갑니다. FriendBlock 버튼을 클릭하면 연락처의 얼굴 인식 블록입니다.
