OAuth 2.0은 서로 다른 용례에 대해 적어도 네 가지 다른 흐름이 있다.응용 프로그램을 보호하기 위해 어떤 흐름을 사용해야 하는지 찾아라.

우리는 에서 OAuth 2.0의 일반적인 작업 원리를 배웠고 본고에서 배웠습니다. 우리는 당신이 구축하고 있는 내용에 따라 당신이 어떤 OAuth 2.0 흐름을 사용해야 하는지 알 것입니다.

OAuth 2.0 개요:

일반적으로 OAuth 2.0 흐름은 다음 그림처럼 보입니다. (아래의 OAuth 2.0 흐름에 익숙하지 않으면,)
OAuth 2.0 데이터와 구글 로그인

1단계: 사이트에서 Albert의 권한을 요청합니다.알버트는 구글의 사이트로 다시 로그인되었다.

2단계: 구글의 사이트가 권한을 부여받았다.이 부분은 당신이 사용하는 흐름에 따라 몇 가지 다른 상황이 있습니다.

단계 3-4: 절차에 따라 클라이언트는 이 권한을 액세스 영패와 교환할 수 있는 방법이 있을 뿐만 아니라 갱신 영패와 교환할 수도 있다

단계 5-6: 사이트는 방문 영패를 사용하여 자원을 방문한다.

공통 OAuth 2.0 스트림

위에서 설명한 것처럼 OAuth 2.0 스트림 4가지가 있습니다.

Authorization Code Flow

Authorization Code Flow with Proof Key for Code Exchange (PKCE)

Client Credentials Flow

Device Code Flow

어떤 흐름을 사용해야 합니까?

서로 다른 응용 프로그램은 응용 프로그램이 기밀을 안전하게 보존할 수 있는지에 따라 서로 다른 흐름을 사용해야 한다.

Web Server Apps and Command Line Scripts: 인증 코드 흐름 사용

Single Page Apps and Mobile Apps: PKCE

와 함께 인증 코드 흐름 사용

Server-to-Server API Calls : 클라이언트 자격 증명 스트림 사용

TV Apps and other apps on input-constrained devices: 장치 코드 흐름 사용

웹 서버 응용 프로그램 및 명령행 스크립트

→ 인증 코드 흐름 사용

웹 서버 응용 프로그램은 원본 코드가 공개되지 않은 서버에서 실행되는 응용 프로그램입니다.
요구: 응용 프로그램은 백엔드 서버에서 클라이언트 기밀을 안전하게 저장할 수 있어야 합니다.
예:

✅ 응용 프로그램이 서버(Node.js, PHP, 자바,.NET)에서 실행됩니다. 서버 코드는 공개되지 않습니다. 환경 변수에 키를 넣을 수 있지만 응용 프로그램 사용자는 그것을 보지 않습니다.

❌ React only 사이트:React는 SPA 프레임워크입니다. 코드가 공개적이기 때문에 기밀을 저장할 수 없습니다. 설령 기밀을 넣는다 하더라도.환경 파일.

인증 코드 흐름

OAuth 2.0 인증 코드 흐름

1-4단계: 사용자가 클릭하여 구글에 로그인하고 구글의 사이트로 리디렉션되어 검증된다.

5단계: 사용자가 인증에 성공하면 구글은 사용자를 사이트로 다시 지정하고 URL에 하나authorization_code를 포함합니다.예:

https://mysite.com/redirect
    ?code=ABCDEFGHIJ12345
    &state=abcde123abc

6-9단계: 위의 코드와 앱을 등록할 때 구글에서 얻은 고객 ID+ 고객 기밀을 사용하여 사용자에게 요청할 수 있습니다access_token. 그리고 이를 사용하여 데이터를 얻을 수 있습니다.

RFC 6749 Section 4.1의 완전한 규범 참조

어떻게 명령줄에서 이 조작을 실행합니까?

3단계에서 사용자가 브라우저에서 액세스해야 하는 URL을 표시합니다.

스크립트가 로컬 포트(예: http://127.0.0.1:8000를 탐색하고 리디렉션 URL을 http://127.0.0.1:8000/redirect

로 설정합니다.

5단계에서 사용자의 브라우저는

https://127.0.0.1:8000/redirect
    ?code=ABCDEFGHIJ12345
    &state=abcde123abc

그리고 스크립트는 이 GET 요청, 해석 code 과 state 을 처리하고 6-9 단계를 계속해야 합니다.

단일 페이지 어플리케이션 및 모바일 어플리케이션

→ PKCE와 함께 인증 코드 흐름 사용

원본 코드가 공개되거나 역컴파일할 수 있기 때문에 단일 페이지 응용 프로그램(SPA)과 모바일 응용 프로그램은 보안을 유지할 수 없습니다.

PKCE 흐름은 클라이언트 기밀이 없는 상태에서 어떻게 작동합니까?

PKCE 흐름은 응용 프로그램이 동적으로 비밀을 생성해야 합니다.이 비밀은 사용자가 로그인 흐름을 시작할 때 흐름의 시작 부분에서 생성된 다음에 방문 영패와 권한 수여 코드를 교환할 때 검사합니다.
이것은 접근 영패와 인증 코드를 교환할 것을 요청하는 실체가 여전히 사용자가 인증을 요청하는 동일한 실체임을 확보한다.

PKCE 인증 코드 흐름

PKCE가 있는 OAuth 2.0 인증 코드 흐름

1단계: 사용자는 응용 프로그램의 로그인 버튼

을 클릭합니다.

단계 2: code_verifier 및 code_challenge 을 생성한 다음 code_challenge 을 통해 권한 부여 요청을 보냅니다.

code_verifier = "a cryptographic random string"
code_challenge = base64url_encode(sha256(ascii(code_verifier)))

3-5단계: 권한 부여 서버는 나중에 사용할 수 있도록 저장code_challenge하고 사용자에게 로그인한 다음 authorization_code를 사용하여 응용 프로그램으로 다시 지정합니다.

단계 6: 그리고 응용 프로그램은 접근 영패를 얻기 위해 code_verifier, client_id, authorization_code 을 보냅니다.

7단계: 권한 수여 서버는 원본을 검사한다code_challenge == base64url_encode(sha256(ascii(code_verifier))).이 흐름을 시작하는 실체가 현재 영패에 접근을 요청한 실체와 같은지 확인합니다.만약 그렇다면 방문 영패로 돌아갑니다.

단계 8-9: 당신의 응용 프로그램은 현재 접근 영패로 데이터를 얻을 수 있습니다.

RFC 7636의 전체 사양을 참조하십시오.
다음은 코드 질의와 검증 프로그램을 생성하는 데 도움을 주는 몇 가지 자원입니다.

Generate code_verifier and code_challenge online .

참조는 어떻습니까generate code_verifier and code_challenge using JavaScript, Java, or Swift 3.

서버-서버 API 호출

→ 클라이언트 자격 증명 스트림 사용

예를 들어, 백엔드 서버는 스트라이프에서 API 끝점을 호출하여 결제 목록을 검색하려고 합니다.이것은 기계가 기계에 대한 권한 수여로 최종 사용자의 권한 수여가 없다.이 경우 Stripe는 서버에 API 노드에 액세스할 수 있는 권한만 부여합니다.서버도 기밀을 안전하게 저장할 수 있기 때문에 데이터에 접근하는 데 필요한 것은 클라이언트 ID와 클라이언트 기밀일 뿐입니다.

클라이언트 자격 증명 흐름

OAuth 2.0 클라이언트 자격 증명 스트림

1단계: 서버에서 클라이언트 ID 및 클라이언트 기밀을 사용하여 인증합니다.이것은 어떠한 사용자와도 관련이 없습니다.서버 자체가 그렇기 때문입니다.(예를 들어, 서버는 Stripe에 등록된 Hello 사업자를 대신합니다.)

2단계: 고객 ID와 고객 기밀이 서명되면 액세스 토큰을 받습니다.

단계 3: 액세스 토큰을 사용하여 데이터를 가져옵니다.

RFC 6749 Section 4.4의 완전한 규범 참조

제한된 장치의 텔레비전 응용 프로그램 및 기타 응용 프로그램 입력

→ 장치 코드 흐름 사용

만약 당신이 슈퍼 안전한 구글 비밀번호를 입력해야만 당신의 새로운 스마트 텔레비전에서 유튜브를 볼 수 있다면, 그것은 너무 무섭지 않습니까?OAuth 2.0 장치 코드 흐름의 디자인은 URL을 열고 브라우저(핸드폰/노트북)에 코드를 입력하여 제약 장치의 응용 프로그램을 입력할 수 있도록 합니다.
요구사항: 응용 프로그램은 사용자에게 URL과 사용자 코드를 표시할 수 있어야 합니다.이것도 QR코드를 표시함으로써 실현할 수 있다.

장치 코드 흐름

1단계: 사용자가 텔레비전 프로그램에 로그인할 것을 요청합니다.

2-3단계: 당신의 텔레비전 응용 프로그램은 당신의 응용 프로그램의 클라이언트 ID를 사용하여 권한 수여 서버(이 예는 구글 계정)에 권한 수여 요청을 하고 adevice_code, auser_code와 averification_uri 세 가지를 받았습니다.

4단계: 당신의 텔레비전 프로그램은 현재 사용자에게 verification_uri로 이동하여 user_code 를 입력하도록 요구합니다.인코딩 verification_uri 및 user_code 을 검색해야 하는 QR 코드를 선택할 수 있습니다.

단계 5: 현재 텔레비전 응용 프로그램에서 device_code 및 client_id 권한 부여 서버에 대한 접근 영패를 요청합니다.사용자가 아직 응용 프로그램에 대한 액세스를 검증하지 않고 허용하지 않은 경우verification_uri, 인증 서버는 오류authorization_pending로 응답합니다.당신의 텔레비전 프로그램은 방문 영패를 받을 때까지 계속 요청해야 합니다.

6단계: 사용자는 휴대전화나 노트북에 verification_uri 을 입력한 다음 user_code 을 입력한다.

7-8단계: 사용자는 현재 구글의 로그인 페이지로 리디렉션되어 있으며, 그곳에서 신분 검증을 할 수 있으며, 당신의 텔레비전 응용 프로그램이 일부 데이터에 접근할 수 있도록 합니다.

9단계: 구글 계정은 현재 사용자의 인증을 표시하고 응용 프로그램이 그들의 데이터에 접근할 수 있도록 합니다.다음 응용 프로그램 사용device_code으로 영패에 접근을 요청하면 구글 계정이 영패에 접근할 수 있습니다.

단계 10-11: 액세스 토큰을 사용하여 데이터를 가져옵니다.

RFC 8628 Section 3.4의 완전한 규범 참조

그렇습니다!

이것은 다른 용례에 필요한 OAuth 2.0 흐름을 선택하는 데 도움을 줄 것입니다.우리는 당신이 사용해야 할 특정 HTTP 요청 매개 변수에 대해 토론하지 않았습니다. 우리는 다음에 토론할 것입니다.
이 글은 팀Cotter이 작성한 것으로 웹 사이트와 모바일 응용 프로그램을 위해 경량급, 신속, 비밀번호 없는 로그인 솔루션을 구축하고 있습니다.만약 당신이 사이트를 구축하고 있다면, 우리는 기존의 해결 방안을 가지고 당신을 위해 상술한 절차를 실현할 것입니다.
이메일, 메시지 또는 WhatsApp을 통해 Magic Link에 로그인하려면 다음과 같이 하십시오.

React.js

React Native

Flutter

공구서류

우리는 이 문장을 쓸 때 이 문장과 규범을 참고했다.

The OAuth 2.0 Authorization Framework(RFC 6749)

OAuth Grant Types

OAuth 2.0 Device Flow Grant

Authentication and Authorization Flows

질문과 피드백

도움이 필요하거나 피드백이 있으면 전화Cotter's Slack Channel!도와주러 왔어요.

지출을 사용할 준비가 되었습니까?

이 글을 좋아하고 Cotter를 웹 사이트나 응용 프로그램에 통합시키려면 create a free account 및 check out our documentation 을 사용할 수 있습니다.