OAuth2는 인증을 위한 업계 표준 프로토콜입니다. 사용자가 사용자 이름, 암호 및 기타 개인 자격 증명을 공유하지 않고 웹 및 데스크톱 응용 프로그램에 개인 정보에 대한 액세스 권한을 부여 할 수 있는 메커니즘을 제공합니다.
이 튜토리얼은 Google People API 및 Chrome Identity API를 사용하여 사용자의 Google 연락처에 액세스하는 확장 프로그램을 빌드합니다. 확장 프로그램은 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": 2, "browser_action": { "default_title": "FriendBlock, friends face's in a block." }, "background": { "scripts": [ "background.js" ], "persistent": false } }
background.js
background.js라는 파일을 만들어 백그라운드 스크립트를 추가하고 다음 코드를 포함합니다. 또는 여기에서 파일을 다운로드하십시오.
chrome.browserAction.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>
개발자 대시 보드에 업로드
확장 디렉토리를 .zip 파일로 패키징 하고 게시하지 않고 Chrome 개발자 대시 보드에 업로드합니다.
귀하의 목록에서 확장을 찾아 추가 정보를 클릭하십시오. 팝업에서 공개 키를 복사하여 "key"필드 아래의 압축이 풀린 디렉토리 내의 매니페스트에 추가합니다.
{ "name": "OAuth Tutorial FaceBlcok", ... "key": "ThisKeyIsGoingToBeVeryLong/go8GGC2u3UD9WI3MkmBgyiDPP2OreImEQhPvwpliioUMJmERZK3zPAx72z8MDvGp7Fx7ZlzuZpL4yyp4zXBI+MUhFGoqEh32oYnm4qkS4JpjWva5Ktn4YpAWxd4pSCVs8I4MZms20+yx5OlnlmWQEwQiiIwPPwG1e1jRw0Ak5duPpE3uysVGZXkGhC5FyOFM+oVXwc1kMqrrKnQiMJ3lgh59LjkX4z1cDNX3MomyUMJ+I+DaWC2VdHggB74BNANSd+zkPQeNKg3o7FetlDJya1bk8ofdNBARxHFMBtMXu/ONfCT3Q2kCY9gZDRktmNRiHG/1cXhkIcN1RWrbsCkwIDAQAB" }
ID 비교
chrome : // extensions에서 확장 프로그램 관리 페이지를 열고 개발자 모드가 사용 설정되어 있는지 확인하고 패키지화 되지 않은 확장 디렉터리를 업로드합니다. 확장 관리 페이지의 확장 ID를 개발자 대시 보드의 항목 ID와 비교합니다. 일치해야 합니다.
확장 프로그램은 매니페스트에 "키"필드를 포함하여 동일한 ID를 유지합니다. 단일 ID를 유지하는 것은 API 등록에 필수적입니다.
OAuth 클라이언트 ID 만들기
Google API 콘솔로 이동하여 새 프로젝트를 만듭니다. 준비가 되면 사이드 바에서 자격 증명을 선택하고 자격 증명 생성을 클릭 한 다음 OAuth 클라이언트 ID를 선택합니다.
클라이언트 ID 만들기 페이지에서 Chrome 앱을 선택합니다. 확장 이름을 입력하고 애플리케이션 ID 필드의 URL 끝에 확장 ID를 입력합니다.
만들기를 클릭하여 마칩니다. 콘솔은 OAuth 클라이언트 ID를 제공합니다.
매니페스트에 OAuth 등록
확장 매니페스트에 "oauth2"필드를 포함합니다. 생성 된 OAuth 클라이언트 ID를 "client_id"아래에 배치합니다. 지금은 "범위"에 빈 문자열을 포함합니다.
{ "name": "OAuth Tutorial FriendBlock", ... "oauth2": { "client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com", "scopes":[""] }, ... }
첫 번째 OAuth 흐름 시작
매니페스트에 ID 권한을 등록합니다.
{ "name": "OAuth Tutorial FaceBlcok", ... "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 연락처"버튼을 클릭하십시오. 콘솔에 OAuth 토큰이 표시됩니다.
Google People API 활성화
Google API 콘솔로 돌아가서 사이드 바에서 라이브러리를 선택합니다. "Google People API"를 검색하고 올바른 결과를 클릭하고 활성화하십시오.
확장 매니페스트의 '범위'에 Google People API 클라이언트 라이브러리를 추가합니다.
{ "name": "OAuth Tutorial FaceBlcok", ... "oauth2": { "client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com", "scopes": [ "https://www.googleapis.com/auth/contacts.readonly" ] }, ... }
Google API 콘솔로 돌아가 자격 증명으로 돌아갑니다. "Create credentials"를 클릭하고 드롭 다운에서 "API key"를 선택합니다.
나중에 사용할 수 있도록 생성 된 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_Here>', init) .then((response) => response.json()) .then(function(data) { console.log(data) }); }); }); };
<API_Key_Here>를 Google API 콘솔에서 생성 된 API 키로 바꿉니다. 확장 프로그램은 memberResourceNames 필드 아래에 people / account_ids 배열을 포함하는 JSON 객체를 기록해야 합니다.
얼굴 차단
이제 확장 프로그램이 사용자의 연락처 목록을 반환하므로 해당 연락처의 프로필 및 정보를 검색하기 위한 추가 요청을 할 수 있습니다. 확장 프로그램은 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_Here>', init) .then((response) => response.json()) .then(function(data) { let profileImg = document.createElement('img'); profileImg.src = data.photos[0].url; photoDiv.appendChild(profileImg); }); }; }); }); }); };
새로 고침하고 확장 프로그램으로 돌아갑니다. FriendBlock 버튼을 클릭하고 따다! 블록에서 연락처의 얼굴을 즐기십시오.
등록된 댓글이 없습니다.
