Chrome 확장을 위한 구글 OpenID 연결

9081 단어 webdevjavascript

자신의 인증 시스템을 구축하지 마라.Google OpenID Connect를 사용한 Google Chrome 확장


이 자습서는 Google Chrome 확장의 작동 방식을 알고 있다고 가정합니다.자세한 내용.



한 줄의 코드를 접하기 전에 우리는 두 가지 주요 일을 할 수 있도록 우리의 개발 작업 공간을 설정해야 한다.

  • Google의 특정 크롬 확장은 구글의 API와 서비스를 사용할 수 있도록 합니다.
  • Google OpenID Connect 엔드포인트와 상호 작용할 수 있습니다.

    • 시작하자.


    우선 구글 상점에 크롬 확장을 등록해야 한다.
    Google Chrome 확장자를 Google Chrome 스토어에 정식으로 업로드하거나 확장자를 위한 유일한 키 값을 받거나 Google Chrome 브라우저에 확장자를 가짜로 등록해서 유일한 키 값을 받는 두 가지 방법이 있습니다.
    우리는 개발 확장을 공공 저장소에 올리고 싶지 않기 때문에, 다음 방법을 선택할 것이다.
    주소로 이동chrome://extensions"당신의 크롬 브라우저에서.
    '패키지 확장' 을 누르고 크롬 확장 위치를 선택하십시오.
    이렇게 하면 Chrome 확장 위치 위에 있는 디렉토리에 crx와 pem* 두 개의 파일이 생성됩니다.우리의 관심사는 **crx 파일 ***입니다.
    crx 파일을 끌어다 놓기chrome://extensions신기하다.
    확장자를 추가하라는 메시지가 나타날 것입니다. "예"를 누르십시오.

    이제 크롬이 확장된 위치로 이동합니다.
    MacOS 및 Linux 사용자에게는 다르지만 Windows 사용자에게는 다음이 필요합니다.
    “C:\Users\AppData\Local\Google\Chrome\User Data\Default\Extensions”
    Chrome 확장 ID와 이름이 같은 폴더를 찾고 있습니다. 이 ID는 브라우저에서 찾을 수 있습니다.chrome://extensions"페이지. ID 속성을 찾습니다.
    Chrome 확장자와 이름이 같은 폴더를 입력하고 버전 번호 폴더를 입력하며 "manifest.json"파일을 엽니다.키 속성을 복사합니다.
    이것은 우리의 독특한 크롬 확장 키입니다.실제 개발된 크롬 확장의 "manifest.json"에 복사하여 붙여넣습니다.(패키지 확장 단계에 대해 선택한 폴더)
    // manifest.json
{
    "name": "Oauth2 test",
    "description": "",
    "version": "0.1.0",
    "manifest_version": 2,
    "key": "<your_key_here>",
    "icons": {
        "16": "./obj-16x16.png",
        "32": "./obj-32x32.png",
        "48": "./obj-48x48.png",
        "128": "./obj-128x128.png"
    },
    "background": {
        "scripts": [
            "./background.js",
            "./jsrsasign-all-min.js"
        ]
    },
    "options_page": "./options.html",
    "browser_action": {
        "default_popup": "popup.html"
    },
    "permissions": [
        "identity"
    ]
}
    참고:
    우리는 신분 허가가 필요하다.
    Google은 JWT (JSON 웹 영패) 를 처리하는 데 도움을 주는 'jsrsasign-all-min.js' 라이브러리도 사용합니다.
    여기서 찾을 수 있습니다: https://github.com/kjur/jsrsasign/releases/
    마지막으로 브라우저에서 Chrome 확장자를 삭제하고 '삭제' 를 누르면 '패키지 불러오기' 를 누르고 확장자를 개발할 폴더를 선택해서 개발 확장자를 설치합니다.

    이 개발 확장은 현재 구글의 API와 서비스를 사용할 수 있게 되었다.


    구글 OAuth2 노드의 권한을 얻으려면...


    항목을 만들지 않은 경우 https://console.developers.google.com/로 이동합니다.

    우리는 두 가지 일을 해야 하는데..


    왼쪽의 "OAuth 동의 화면"링크를 클릭하십시오.
    외부 및 작성을 선택합니다.
    응용 프로그램 이름 필드와 저장 필드만 입력하면 됩니다.
    OAuth 동의 화면은 사용자가 구글 계정으로 로그인을 선택할 때 Google 데이터에 접근하기를 원한다고 알려 줍니다.
    다음에 왼쪽의 "증명서"링크를 클릭하십시오.
    페이지 맨 위에 있는 자격 증명 만들기를 클릭하고 OAuth 클라이언트 ID를 선택합니다.
    응용 프로그램 유형을 Chrome 응용 프로그램 대신 웹 응용 프로그램으로 설정합니다.
    Name 필드에 원하는 내용을 입력하고 화면 하단의 Add URI(URI 리디렉션)를 클릭합니다.
    URI는 이런 모드를 따라야 하는데,

    "https://.chromiumapp.org/"


    "chrome ext id"는 "chrome ext id"와 같습니다.chrome://extensions"페이지.
    만들기를 클릭합니다.

    이 개발 확장은 이제 Google OpenID Connect와 상호 작용할 수 있습니다.


    로그인


    로그인을 보여주기 위해서, 팝업 창에 단추를 하나만 놓으면 됩니다.html "페이지 및 추가"팝업 스크립트.js'.
    // popup.html
<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    body {
    width: 300px;
    height: auto;
    }

    div {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 25%;
    padding: 5px;
    font-size: 2.5em;
    background-color: red;
    border-radius: 5px;
    text-align: center;
    color: white;
    font-family: monospace;
    font-weight: bold;
    margin-bottom: 15px;
    cursor: pointer;
    transition-duration: 0.3s;
    }

    div:hover {
    background-color: black;
    transform: translateX(-50%) scale(1.3);
    }
    </style>
    </head>
    <body>
    <h1>Sign-In With Your Google Account to Use This Extension</h1>
    <div id='sign-in'>Sign In</div>
    <button>User Status</button>
    <script src="./popup-script.js"></script>
    </body>
</html>
    사용자가 단추를 눌렀을 때, 우리는 우리의 백엔드에 메시지를 보낼 것입니다.js가 제3자 구글 인증 스크립트를 시작합니다.
    // popup-script.js
document.querySelector('#sign-in').addEventListener('click', function () {
    chrome.runtime.sendMessage({ message: 'login' }, function (response) {
        if (response === 'success') window.close();
    });
});
document.querySelector('button').addEventListener('click', function () {
    chrome.runtime.sendMessage({ message: 'isUserSignedIn' }, function (response) {
        alert(response);
    });
});

    Google 계정을 사용하여 사용자가 로그인할 수 있도록 "launchWebAuthFlow ()" API를 사용했습니다.


    그것은 우리가 구글의 OAuth2 노드https://accounts.google.com/o/oauth2/v2/auth를 요청할 수 있도록 허락한다.
    URL을 사용하여 7개의 URI 인코딩 질의 매개 변수를 보내야 합니다.

  • client id: 구글 개발자 콘솔
    • 에서 제공하는 OAuth2 클라이언트 id입니다.

  • 답장 유형: 구글
    • 에서 온 "id 영패"가 필요합니다

  • redirect uri: 사용자가 구글 계정에 로그인하면 Google에서 사용자를 어디로 되돌려야 하는지 (Google Chrome 확장으로 되돌아오기)

  • 범위: 우리는 단점에 우리가 사용자에게 무엇을 하고 싶은지 알려야 한다

  • 상태: 보안을 위한 임의 문자열

  • 알림: 사용자가 화면에서'알림'을 받도록 확보하고 구글 계정으로 로그인할 수 있도록 허용

  • nonce: 보안을 위한 임의 문자열
    • 이 정보가 있으면 URL을 구축하고 'launch Web Auth Flow ()' 에서 시작할 수 있습니다.
    참고:
  • 우리는'launch Web Auth Flow()'리셋에서 우리에게 전달된 URL에서'id 영패'를 삭제했다.
  • 사용자 정보를 확인할 수 있습니다.iss 속성의 값은 두 개의 가능한 구글 도메인 이름 중 하나이고 '사용자 정보' 는 그 중 하나이다.aud는 OAuth2 클라이언트 ID와 같습니다.
    이 수표는 사실 필요하지 않다. 왜냐하면 구글은 기호화폐가 왜곡되지 않았다는 것을 보증하기 때문이다.
  • 변수 "user signed in"(background.js)에서 사용자의 로그인 상태를 추적합니다.
    • 사용자가 성공적으로 로그인하면 팝업 창을 전환합니다.html 팝업 창에 로그인합니다.html 페이지.
    // popup-signed-in.html
<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    body {
    width: 300px;
    height: auto;
    }

    div {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 25%;
    padding: 5px;
    font-size: 2.5em;
    background-color: red;
    border-radius: 5px;
    text-align: center;
    color: white;
    font-family: monospace;
    font-weight: bold;
    margin-bottom: 15px;
    cursor: pointer;
    transition-duration: 0.3s;
    }

    div:hover {
    background-color: black;
    transform: translateX(-50%) scale(1.3);
    }
    </style>
    </head>

    <body>
    <h1>Successfully Signed-In</h1>
    <div id='sign-out'>Sign Out</div>
    <button>User Status</button>
    <script src="./popup-signed-in-script.js"></script>
    </body>
</html>
    이렇게 하면 사용자가 로그아웃할 수 있습니다.
    // popup-signed-in-script.js
document.querySelector('#sign-out').addEventListener('click', function () {
    chrome.runtime.sendMessage({ message: 'logout' }, function (response) {
        if (response === 'success') window.close();
    });
});

document.querySelector('button').addEventListener('click', function () {
    chrome.runtime.sendMessage({ message: 'isUserSignedIn' }, function (response) {
        alert(response);
    });
});
    소스 파일here을 찾을 수 있습니다.

    더 깊은 안내를 원하신다면 유튜브에 있는 제 동영상 튜토리얼을 보십시오.


    Chrome 확장을 통해 Google 로그인 | OAuth2/OpenID Connect 사용 방법
    moment 시간대 처리 소감
    로컬 데이터베이스 및 Chrome 확장 프로그램(IndexedDB)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage