OAuth (Dialogflow)를 통한 계정 연결

OAuth 연결 유형은 두 가지 업계 표준 OAuth 2.0 흐름, 즉 암시적 OAuth 2.0 흐름을 지원합니다. 승인 코드 플로우가 포함됩니다.

암시적 코드 흐름에서 Google은 사용자의 브라우저에서 승인 엔드포인트를 엽니다. 로그인에 성공하면 수명이 긴 액세스 토큰을 Google에 반환합니다. 이제 어시스턴트에서 작업으로 전송되는 모든 요청에 이 액세스 토큰이 포함됩니다.

승인 코드 흐름에는 두 개의 엔드포인트가 필요합니다.

  • 승인 엔드포인트: 아직 로그인하지 않은 사용자에게 로그인 UI를 표시하고 요청한 액세스에 대한 동의를 단기 승인 코드 형식으로 기록하는 역할을 합니다.
  • 두 가지 유형의 교환을 담당하는 토큰 교환 엔드포인트:
    1. 장기 갱신 토큰과 단기 액세스 토큰으로 승인 코드를 교환합니다. 이 교환은 사용자가 계정 연결 흐름을 진행할 때 이루어집니다.
    2. 장기 갱신 토큰을 단기 액세스 토큰으로 교환합니다. 이 교환은 액세스 토큰이 만료되어 Google에 새 액세스 토큰이 필요할 때 발생합니다.

암시적 코드 흐름을 구현하는 것이 더 간단하지만 암시적 흐름을 사용하여 발급된 액세스 토큰은 만료되지 않는 것이 좋습니다. 토큰 만료를 암시적 흐름과 함께 사용하면 사용자가 계정을 다시 연결하게 되기 때문입니다. 보안상의 이유로 토큰 만료가 필요하다면 인증 코드 흐름을 대신 사용하는 것이 좋습니다.

OAuth 계정 연결 구현

프로젝트 구성

OAuth 계정 연결을 사용하도록 프로젝트를 구성하려면 다음 단계를 따르세요.

  1. Actions 콘솔을 열고 사용할 프로젝트를 선택합니다.
  2. 개발 탭을 클릭하고 계정 연결을 선택합니다.
  3. 계정 연결 옆의 스위치를 켭니다.
  4. 계정 생성 섹션에서 아니요, 내 웹사이트에서만 계정 생성을 허용하겠습니다를 선택합니다.

  5. 연결 유형에서 OAuth암시적을 선택합니다.

  6. 클라이언트 정보에서 다음을 수행합니다.

    • 내 작업에서 Google에 발급한 클라이언트 ID에 값을 할당하여 Google에서 전송하는 요청입니다. <ph type="x-smartling-placeholder"></ph>
    • 승인 및 토큰 교환 엔드포인트의 URL을 입력하세요.
를 통해 개인정보처리방침을 정의할 수 있습니다.
  1. 저장을 클릭합니다.

OAuth 서버 구현

OAuth 2.0 암시적 흐름을 지원하기 위해 서비스 승인 사용할 수 있습니다 이 엔드포인트는 데이터 액세스에 대한 사용자의 동의 받기 승인 엔드포인트 아직 로그인하지 않은 사용자에게 로그인 UI를 표시하고 액세스할 수 있도록 합니다.

작업이 서비스의 승인된 API 중 하나를 호출해야 하는 경우 Google은 이 엔드포인트를 있습니다.

Google에서 시작한 일반적인 OAuth 2.0 암시적 흐름 세션에는 다음 흐름을 따라 하세요.

  1. Google은 사용자의 브라우저에서 승인 엔드포인트를 엽니다. 이 사용자가 로그인하지 않은 경우 로그인하고 Google에 액세스 권한을 부여합니다. 아직 권한을 부여하지 않은 경우 API를 통해 해당 데이터에 액세스할 수 있습니다.
  2. 서비스에서 액세스 토큰을 만들고 이를 액세스 토큰을 사용하여 사용자의 브라우저를 Google로 다시 리디렉션함 이 요청에 첨부됩니다.
  3. Google은 서비스의 API를 호출하고 실행할 수 있습니다 서비스에서 액세스 토큰이 Google에 인증한 다음 API 호출을 완료합니다.

승인 요청 처리

작업이 OAuth2 암시적 흐름을 통해 계정 연결을 수행해야 하는 경우 Google은 다음을 포함한 요청과 함께 사용자를 승인 엔드포인트로 보냅니다. 다음과 같습니다.

승인 엔드포인트 매개변수
client_id Google에 할당한 클라이언트 ID입니다.
redirect_uri 이 요청에 대한 응답을 보낼 URL입니다.
state 정해진 기간에 변경되지 않고 Google에 다시 전달되는 리디렉션 URI를 사용할 수 있습니다.
response_type 응답에서 반환할 값의 유형입니다. OAuth 2.0 암시적 흐름에서 응답 유형은 항상 token입니다.

예를 들어 승인 엔드포인트를 https://myservice.example.com/auth에서 사용할 수 있는 경우 요청은 다음과 같을 수 있습니다.

GET https://myservice.example.com/auth?client_id=GOOGLE_CLIENT_ID&redirect_uri=REDIRECT_URI&state=STATE_STRING&response_type=token

승인 엔드포인트가 로그인 요청을 처리하려면 다음 단계를 따르세요.

  1. 다음과 같이 client_idredirect_uri 값을 확인합니다. 의도하지 않았거나 잘못 구성된 클라이언트 앱에 액세스 권한을 부여하지 않도록 합니다.

    • client_id가 등록된 클라이언트 ID와 일치하는지 확인합니다. 확인할 수 있습니다
    • redirect_uri에서 지정한 URL인지 확인합니다. 매개변수의 형식은 다음과 같습니다.
      https://oauth-redirect.googleusercontent.com/r/YOUR_PROJECT_ID
      드림 YOUR_PROJECT_ID프로젝트 설정 페이지에 있는 ID입니다. 기능을 살펴보겠습니다
  2. 사용자가 서비스에 로그인했는지 확인합니다. 사용자가 로그인하지 않은 경우 서비스의 로그인 또는 가입 절차를 완료합니다.

  3. Google에서 API에 액세스하는 데 사용할 액세스 토큰을 생성합니다. 이 액세스 토큰은 임의의 문자열 값이 될 수 있지만 클라이언트와 클라이언트에게 전달하며 추측할 수 없어야 합니다.

  4. 사용자의 브라우저를 URL로 리디렉션하는 HTTP 응답 전송 redirect_uri 매개변수로 지정됩니다. 다음을 모두 포함 다음 매개변수를 포함합니다.

    • access_token: 방금 생성한 액세스 토큰입니다.
    • token_type: 문자열 bearer
    • state: 원본의 수정되지 않은 상태 값입니다. 요청 다음은 결과 URL의 예입니다.
      https://oauth-redirect.googleusercontent.com/r/YOUR_PROJECT_ID#access_token=ACCESS_TOKEN&token_type=bearer&state=STATE_STRING

Google의 OAuth 2.0 리디렉션 핸들러가 액세스 토큰을 수신하고 state 값이 변경되지 않았음을 확인합니다. Google이 Google에서 후속 호출에 토큰을 첨부합니다. 작업을 AppRequest의 일부로 추가해야 합니다.

인증 흐름 시작

계정 로그인 도우미 인텐트 사용 인증 흐름을 시작합니다. 다음 코드 스니펫은 Dialogflow 및 Actions SDK에서 응답을 보내 이 도우미를 사용합니다.

Dialogflow:

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph>
Node.js
const {dialogflow, SignIn} = require('actions-on-google');
const app = dialogflow({
  // REPLACE THE PLACEHOLDER WITH THE CLIENT_ID OF YOUR ACTIONS PROJECT
  clientId: CLIENT_ID,
});
// Intent that starts the account linking flow.
app.intent('Start Signin', (conv) => {
  conv.ask(new SignIn('To get your account details'));
});
드림
<ph type="x-smartling-placeholder">
</ph>
자바
@ForIntent("Start Signin")
public ActionResponse text(ActionRequest request) {
  ResponseBuilder rb = getResponseBuilder(request);
  return rb.add(new SignIn().setContext("To get your account details")).build();
}
드림
<ph type="x-smartling-placeholder">
</ph>
JSON
{
  "payload": {
    "google": {
      "expectUserResponse": true,
      "richResponse": {
        "items": [
          {
            "simpleResponse": {
              "textToSpeech": "PLACEHOLDER"
            }
          }
        ]
      },
      "userStorage": "{\"data\":{}}",
      "systemIntent": {
        "intent": "actions.intent.SIGN_IN",
        "data": {
          "@type": "type.googleapis.com/google.actions.v2.SignInValueSpec",
          "optContext": "To get your account details"
        }
      }
    }
  },
  "outputContexts": [
    {
      "name": "/contexts/_actions_on_google",
      "lifespanCount": 99,
      "parameters": {
        "data": "{}"
      }
    }
  ]
}

Actions SDK:

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph>
Node.js
const {actionssdk, SignIn} = require('actions-on-google');
const app = actionssdk({
  // REPLACE THE PLACEHOLDER WITH THE CLIENT_ID OF YOUR ACTIONS PROJECT
  clientId: CLIENT_ID,
});
// Intent that starts the account linking flow.
app.intent('actions.intent.TEXT', (conv) => {
  conv.ask(new SignIn('To get your account details'));
});
드림
<ph type="x-smartling-placeholder">
</ph>
자바
@ForIntent("actions.intent.TEXT")
public ActionResponse text(ActionRequest request) {
  ResponseBuilder rb = getResponseBuilder(request);
  return rb.add(new SignIn().setContext("To get your account details")).build();
}
드림
<ph type="x-smartling-placeholder">
</ph>
JSON
{
  "expectUserResponse": true,
  "expectedInputs": [
    {
      "inputPrompt": {
        "richInitialPrompt": {
          "items": [
            {
              "simpleResponse": {
                "textToSpeech": "PLACEHOLDER"
              }
            }
          ]
        }
      },
      "possibleIntents": [
        {
          "intent": "actions.intent.SIGN_IN",
          "inputValueData": {
            "@type": "type.googleapis.com/google.actions.v2.SignInValueSpec",
            "optContext": "To get your account details"
          }
        }
      ]
    }
  ],
  "conversationToken": "{\"data\":{}}",
  "userStorage": "{\"data\":{}}"
}

데이터 액세스 요청 처리

어시스턴트 요청에 액세스 토큰이 포함된 경우, 먼저 액세스 토큰이 유효하고 만료되지 않았는지 확인한 다음 데이터베이스에서 연결된 사용자 계정을 검색합니다.