AWS SDK for JavaScript v2가 지원 종료에 도달했습니다. [AWS SDK for JavaScript v3](https://docs.aws.amazon.com//sdk-for-javascript/v3/developer-guide/)로 마이그레이션하실 것을 권장합니다. 마이그레이션 방법에 대한 자세한 내용은 해당 [공지 사항](https://aws.amazon.com/blogs//developer/announcing-end-of-support-for-aws-sdk-for-javascript-v2/)을 참조하세요.

# 웹 브라우저에서 자격 증명 설정
<a name="setting-credentials-browser"></a>

브라우저 스크립트에서 SDK에 인증 자격 증명을 제공하는 방법에는 여러 가지가 있습니다. 그 가운데는 더 안전한 방법도 있고 스크립트 개발 시에 더 편리한 방법도 있습니다. 다음은 권장 순서로 인증 자격 증명을 제공할 수 있는 방법입니다.

1. Amazon Cognito 자격 증명을 사용하여 사용자를 인증하고 자격 증명 제공

1. 웹 연동 자격 증명 사용

1. 스크립트에서 하드 코딩

**주의**  
스크립트에서 AWS 자격 증명을 하드 코딩하지 않는 것이 좋습니다. 인증 자격 증명을 하드 코딩하면 액세스 키 ID 및 보안 액세스 키가 노출될 위험이 있습니다.

**Topics**
+ [Amazon Cognito 자격 증명을 사용하여 사용자 인증](loading-browser-credentials-cognito.md)
+ [웹 연동 자격 증명을 사용하여 사용자 인증](loading-browser-credentials-federated-id.md)
+ [웹 연동 자격 증명 예제](config-web-identity-examples.md)

# Amazon Cognito 자격 증명을 사용하여 사용자 인증
<a name="loading-browser-credentials-cognito"></a>

브라우저 스크립트에 대한 AWS 보안 인증을 얻는 권장 방법은 Amazon Cognito 자격 증명 보안 인증 객체인 `AWS.CognitoIdentityCredentials`를 사용하는 것입니다. Amazon Cognito를 사용하면 타사 자격 증명 공급자를 통해 사용자를 인증할 수 있습니다.

Amazon Cognito 자격 증명을 사용하려면 먼저, Amazon Cognito 콘솔에서 자격 증명 풀을 생성해야 합니다. 자격 증명 풀은 애플리케이션이 사용자에게 제공하는 자격 증명 그룹을 나타냅니다. 사용자에게 제공되는 자격 증명은 각 사용자 계정을 고유하게 식별합니다. Amazon Cognito 자격 증명(identity)은 자격 증명(credential)이 아닙니다. AWS Security Token Service(AWS STS)에서 웹 자격 증명 연동 지원을 사용하여 인증 자격 증명으로 교환됩니다.

Amazon Cognito는 `AWS.CognitoIdentityCredentials` 객체를 사용하여 여러 자격 증명 공급자의 자격 증명 추상화를 관리할 수 있습니다. 그러면 로드되는 자격 증명이 AWS STS의 인증 자격 증명과 교환됩니다.

## Amazon Cognito 자격 증명 보안 인증 객체 구성
<a name="browser-cognito-configuration"></a>

아직 자격 증명 풀을 생성하지 않은 경우 `AWS.CognitoIdentityCredentials`를 구성하기 전에 [Amazon Cognito 콘솔](https://console.aws.amazon.com/cognito)에서 브라우저 스크립트와 함께 사용할 자격 증명 풀을 생성합니다. 자격 증명 풀에 대한 인증 IAM 역할과 미인증 IAM 역할을 모두 생성하고 연결합니다.

미인증 사용자는 자격 증명이 인증되지 않았으므로 앱 혹은 자격 증명의 인증이 중요하지 않은 경우 게스트 사용자 역할에 적합합니다. 인증받은 사용자는 자격 증명을 확인하는 타사 자격 증명 공급자를 통해 애플리케이션에 로그인합니다. 미인증 사용자의 액세스 권한을 허용하지 않도록 리소스 권한 범위를 충분히 정했는지 확인하세요.

연결된 자격 증명 공급자로 자격 증명 풀을 구성한 후 `AWS.CognitoIdentityCredentials`를 사용하여 사용자를 인증할 수 있습니다. `AWS.CognitoIdentityCredentials`를 사용하도록 애플리케이션 자격 증명을 구성하려면, `credentials` 또는 서비스당 구성의 `AWS.Config` 속성을 설정하세요. 다음 예에는 `AWS.Config`가 사용됩니다.

```
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
  IdentityPoolId: 'us-east-1:1699ebc0-7900-4099-b910-2df94f52a030',
  Logins: { // optional tokens, used for authenticated login
    'graph.facebook.com': 'FBTOKEN',
    'www.amazon.com': 'AMAZONTOKEN',
    'accounts.google.com': 'GOOGLETOKEN'
  }
});
```

선택 사항인 `Logins` 속성은 공급자의 자격 증명 토큰에 대한 자격 증명 공급자 이름의 맵입니다. 자격 증명 공급자에게서 토큰을 받는 방법은 어떤 공급자를 사용하느냐에 따라 다릅니다. 예를 들어 Facebook이 자격 증명 공급자 중 하나인 경우 [Facebook SDK](https://developers.facebook.com/docs/facebook-login/web)의 `FB.login` 함수를 사용하여 자격 증명 공급자 토큰을 얻을 수 있습니다.

```
FB.login(function (response) {
  if (response.authResponse) { // logged in
    AWS.config.credentials = new AWS.CognitoIdentityCredentials({
      IdentityPoolId: 'us-east-1:1699ebc0-7900-4099-b910-2df94f52a030',
      Logins: {
        'graph.facebook.com': response.authResponse.accessToken
      }
    });

    s3 = new AWS.S3; // we can now create our service object

    console.log('You are now logged in.');
  } else {
    console.log('There was a problem logging you in.');
  }
});
```

## 인증되지 않은 사용자를 인증된 사용자로 전환
<a name="browser-switching-unauthenticated-users"></a>

Amazon Cognito는 인증된 사용자와 인증되지 않은 사용자를 모두 지원합니다. 인증되지 않은 사용자는 자격 증명 공급자로 로그인하지 않았더라도 리소스에 대한 액세스 권한을 받습니다. 이 액세스 권한 등급은 로그인하기 전에 사용자에게 콘텐츠를 표시하는 데 유용합니다. 각 미인증 사용자는 개별적으로 로그인되지 않고 인증되지 않았더라도 Amazon Cognito에 고유한 자격 증명이 있습니다.

### 처음에 인증되지 않은 사용자
<a name="browser-switching-initially-unauthenticated-user"></a>

사용자는 일반적으로 `Logins` 속성 없이 구성 객체의 인증 자격 증명 속성을 설정한 인증되지 않은 역할로 시작합니다. 이 경우, 기본 구성은 다음과 같을 수 있습니다.

```
// set the default config object
var creds = new AWS.CognitoIdentityCredentials({
 IdentityPoolId: 'us-east-1:1699ebc0-7900-4099-b910-2df94f52a030'
});
AWS.config.credentials = creds;
```

### 인증된 사용자로 전환
<a name="switch-to-authenticated"></a>

인증되지 않은 사용자가 자격 증명 공급자에 로그인한 상태에서 현재 사용자가 토큰을 갖고 있다면, 인증 자격 증명 객체를 업데이트하고 `Logins` 토큰을 추가하는 사용자 지정 함수를 호출하여 인증되지 않은 사용자를 인증된 사용자로 전환할 수 있습니다.

```
// Called when an identity provider has a token for a logged in user
function userLoggedIn(providerName, token) {
  creds.params.Logins = creds.params.Logins || {};
  creds.params.Logins[providerName] = token;
                    
  // Expire credentials to refresh them on the next request
  creds.expired = true;
}
```

또한 `CognitoIdentityCredentials` 객체를 생성할 수 있습니다. 이 경우 생성한 기존 서비스 객체의 인증 자격 증명 속성을 재설정해야 합니다. 서비스 객체는 객체 초기화 시 글로벌 구성에서만 읽습니다.

`CognitoIdentityCredentials` 객체에 대한 자세한 내용은 AWS SDK for JavaScript API 참조의 [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CognitoIdentityCredentials.html](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CognitoIdentityCredentials.html) 섹션을 참조하세요.

# 웹 연동 자격 증명을 사용하여 사용자 인증
<a name="loading-browser-credentials-federated-id"></a>

웹 ID 페더레이션을 사용하여 AWS 리소스에 액세스하도록 개별 자격 증명 공급자를 직접 구성할 수 있습니다. AWS는 현재 여러 자격 증명 공급자를 통해 웹 ID 페더레이션을 사용한 사용자 인증을 지원합니다.
+ [Login with Amazon](https://login.amazon.com)
+ [Facebook 로그인](https://www.facebook.com/about/login)
+ [Google 로그인](https://developers.google.com/identity/)

먼저 애플리케이션이 지원하는 공급자에 애플리케이션을 등록해야 합니다. 다음으로 IAM 역할을 생성하고 이 역할의 권한을 설정합니다. 그런 다음 생성한 IAM 역할을 사용하여 각 자격 증명 공급자를 통해 이 역할에 대해 구성한 권한을 부여합니다. 예를 들어 Facebook을 통해 로그인한 사용자가 관리 중인 특정 Amazon S3 버킷에 대한 읽기 액세스 권한을 갖도록 허용하는 역할을 설정할 수 있습니다.

구성된 권한이 있는 IAM 역할과 선택한 자격 증명 공급자에 등록된 애플리케이션이 모두 있으면, 다음과 같이 헬퍼 코드를 사용하여 IAM 역할의 인증 자격 증명을 얻도록 SDK를 설정할 수 있습니다.

```
AWS.config.credentials = new AWS.WebIdentityCredentials({
   RoleArn: 'arn:aws:iam::<AWS_ACCOUNT_ID>/:role/<WEB_IDENTITY_ROLE_NAME>',
   ProviderId: 'graph.facebook.com|www.amazon.com', // this is null for Google
   WebIdentityToken: ACCESS_TOKEN
});
```

`ProviderId` 파라미터의 값은 지정한 자격 증명 공급자에 따라 다릅니다. `WebIdentityToken` 파라미터의 값은 해당 자격 증명 공급자에 로그인하여 검색한 액세스 토큰입니다. 각 자격 증명 공급자의 액세스 토큰을 구성 및 검색하는 방법에 대한 자세한 내용은 해당 자격 증명 공급자의 설명서를 참조하세요.

## 1단계: 자격 증명 공급자에 등록
<a name="config-web-identity-register"></a>

시작하려면 지원하기로 선택한 자격 증명 공급자에 애플리케이션을 등록합니다. 애플리케이션과 애플리케이션 작성자를 식별하는 정보를 제공하라는 메시지가 표시됩니다. 이를 통해 자격 증명 공급자는 사용자 정보를 받는 사람을 알 수 있습니다. 각각의 경우에 자격 증명 공급자는 사용자 역할을 구성하는 데 사용하는 애플리케이션 ID를 발급합니다.

## 2단계: 자격 증명 공급자의 IAM 역할 생성
<a name="config-web-identity-role"></a>

자격 증명 공급자로부터 애플리케이션 ID를 얻은 후, [https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/)에서 IAM 콘솔로 이동하여 새 IAM 역할을 생성합니다.

**자격 증명 공급자의 IAM 역할을 생성하는 방법**

1. 콘솔의 **역할** 섹션으로 이동한 후 **Create New Role(새 역할 생성)**을 선택합니다.

1. 사용을 추적하는 데 도움이 되는 새 역할의 이름을 입력한 후(예: **facebookIdentity**) **Next Step(다음 단계)**를 선택합니다.

1. **Select Role Type(역할 유형 선택)**에서 **Role for Identity Provider Access(자격 증명 공급자 액세스 역할)**를 선택합니다.

1. **Grant access to web identity providers(웹 자격 증명 공급자에게 액세스 부여)**에서 **Select(선택)**를 선택합니다.

1. **자격 증명 공급자** 목록에서 이 IAM 역할에 사용할 자격 증명 공급자를 선택합니다.  
![\[자격 증명 공급자 액세스 역할 선택\]](http://docs.aws.amazon.com/ko_kr/sdk-for-javascript/v2/developer-guide/images/iam-provider-select.png)

1. **애플리케이션 ID**에 자격 증명 공급자가 제공한 애플리케이션 ID를 입력한 후 **Next Step(다음 단계)**를 선택합니다.

1. 표시하려는 리소스에 대한 권한을 구성하여 특정 리소스의 특정 작업에 대한 액세스를 허용합니다. IAM 권한에 대한 자세한 내용은 *IAM 사용 설명서*의 [AWS IAM 권한 개요](https://docs.aws.amazon.com/IAM/latest/UserGuide/access_permissions.html)를 참조하세요. 역할의 신뢰 관계를 검토하고 필요한 경우 사용자 지정한 후, **Next Step(다음 단계)**를 선택합니다.

1. 필요한 추가 정책을 연결한 후 **Next Step(다음 단계)**를 선택합니다. IAM 정책 작성에 대한 자세한 내용은 *IAM 사용 설명서*의 [IAM 정책 개요](https://docs.aws.amazon.com/IAM/latest/UserGuide/access_policies.html)를 참조하세요.

1. 새 역할을 검토한 후 **Create Role(역할 생성)**을 선택합니다.

역할에 여러 제약 조건을 제공할 수 있습니다(예: 특정 사용자 ID로 범위 지정). 역할이 리소스에 대한 쓰기 권한을 부여하는 경우, 역할의 범위를 올바른 권한이 있는 사용자로 올바르게 지정해야 합니다. 그렇지 않으면 Amazon, Facebook 또는 Google ID를 가진 모든 사용자가 애플리케이션의 리소스를 수정할 수 있습니다.

웹 ID 페더레이션에 대한 자세한 내용은 *IAM 사용 설명서*의 [웹 ID 페더레이션 정보](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_providers_oidc.html)를 참조하세요.

## 3단계: 로그인 후 공급자 액세스 토큰 얻기
<a name="config-web-identity-obtain-token"></a>

자격 증명 공급자의 SDK를 사용하여 애플리케이션의 로그인 작업을 설정합니다. OAuth 또는 OpenID를 사용하여 사용자 로그인을 지원하는 자격 증명 공급자에서 JavaScript SDK를 다운로드하고 설치할 수 있습니다. 애플리케이션에 SDK 코드를 다운로드하고 설정하는 방법은 해당 자격 증명 공급자의 SDK 설명서를 참조하세요.
+ [Login with Amazon](https://login.amazon.com/website)
+ [Facebook 로그인](https://developers.facebook.com/docs/javascript)
+ [Google 로그인](https://developers.google.com/identity/)

## 4단계: 임시 인증 자격 증명 얻기
<a name="config-web-identity-get-credentials"></a>

애플리케이션, 역할 및 리소스 권한을 구성한 후, 애플리케이션에 코드를 추가하여 임시 인증 자격 증명을 얻습니다. 이러한 인증 자격 증명은 웹 자격 증명 연동을 사용하여 AWS Security Token Service를 통해 제공됩니다. 사용자가 자격 증명 공급자에 로그인하면 액세스 토큰이 반환됩니다. 이 자격 증명 공급자에 대해 생성한 IAM 역할의 ARN을 사용하여 `AWS.WebIdentityCredentials` 객체를 설정합니다.

```
AWS.config.credentials = new AWS.WebIdentityCredentials({
    RoleArn: 'arn:aws:iam::<AWS_ACCOUNT_ID>:role/<WEB_IDENTITY_ROLE_NAME>',
    ProviderId: 'graph.facebook.com|www.amazon.com', // Omit this for Google
    WebIdentityToken: ACCESS_TOKEN // Access token from identity provider
});
```

이후 생성되는 서비스 객체에 적절한 인증 자격 증명이 생깁니다. `AWS.config.credentials` 속성을 설정하기 전에 생성된 객체에는 현재 인증 자격 증명이 없습니다.

액세스 토큰을 검색하기 전에 `AWS.WebIdentityCredentials`를 생성할 수도 있습니다. 이렇게 하면 액세스 토큰을 로드하기 전에 인증 자격 증명을 사용하는 서비스 객체를 생성할 수 있습니다. 이를 수행하려면 `WebIdentityToken` 파라미터 없이 인증 자격 증명 객체를 생성합니다.

```
AWS.config.credentials = new AWS.WebIdentityCredentials({
  RoleArn: 'arn:aws:iam::<AWS_ACCOUNT_ID>:role/<WEB_IDENTITY_ROLE_NAME>',
  ProviderId: 'graph.facebook.com|www.amazon.com' // Omit this for Google
});

// Create a service object
var s3 = new AWS.S3;
```

그런 다음 액세스 토큰이 포함된 자격 증명 공급자 SDK의 콜백에서 `WebIdentityToken`을 설정합니다.

```
AWS.config.credentials.params.WebIdentityToken = accessToken;
```

# 웹 연동 자격 증명 예제
<a name="config-web-identity-examples"></a>

다음은 웹 연동 자격 증명을 사용하여 브라우저 JavaScript에서 인증 자격 증명을 얻는 몇 가지 예제입니다. 이러한 예제는 자격 증명 공급자가 애플리케이션으로 리디렉션할 수 있도록 http:// 또는 https:// 호스트 체계에서 실행해야 합니다.

## Login with Amazon 예제
<a name="config-web-identity-amazon-login-example"></a>

다음 코드에서는 Login with Amazon을 자격 증명 공급자로 사용하는 방법을 보여 줍니다.

```
<a href="#" id="login">
  <img border="0" alt="Login with Amazon"
    src="https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_156x32.png"
    width="156" height="32" />
</a>
<div id="amazon-root"></div>
<script type="text/javascript">
  var s3 = null;
  var clientId = 'amzn1.application-oa2-client.1234567890abcdef'; // client ID
  var roleArn = 'arn:aws:iam::<AWS_ACCOUNT_ID>:role/<WEB_IDENTITY_ROLE_NAME>';

  window.onAmazonLoginReady = function() {
    amazon.Login.setClientId(clientId); // set client ID

    document.getElementById('login').onclick = function() {
      amazon.Login.authorize({scope: 'profile'}, function(response) {
        if (!response.error) { // logged in
          AWS.config.credentials = new AWS.WebIdentityCredentials({
            RoleArn: roleArn,
            ProviderId: 'www.amazon.com',
            WebIdentityToken: response.access_token
          });

          s3 = new AWS.S3();

          console.log('You are now logged in.');
        } else {
          console.log('There was a problem logging you in.');
        }
      });
    };
  };

  (function(d) {
    var a = d.createElement('script'); a.type = 'text/javascript';
    a.async = true; a.id = 'amazon-login-sdk';
    a.src = 'https://api-cdn.amazon.com/sdk/login1.js';
    d.getElementById('amazon-root').appendChild(a);
  })(document);
</script>
```

## Facebook 로그인 예제
<a name="config-web-identity-facebook-login-example"></a>

다음 코드에서는 Facebook 로그인을 자격 증명 공급자로 사용하는 방법을 보여 줍니다.

```
<button id="login">Login</button>
<div id="fb-root"></div>
<script type="text/javascript">
var s3 = null;
var appId = '1234567890'; // Facebook app ID
var roleArn = 'arn:aws:iam::<AWS_ACCOUNT_ID>:role/<WEB_IDENTITY_ROLE_NAME>';

window.fbAsyncInit = function() {
  // init the FB JS SDK
  FB.init({appId: appId});

  document.getElementById('login').onclick = function() {
    FB.login(function (response) {
      if (response.authResponse) { // logged in
        AWS.config.credentials = new AWS.WebIdentityCredentials({
          RoleArn: roleArn,
          ProviderId: 'graph.facebook.com',
          WebIdentityToken: response.authResponse.accessToken
        });

        s3 = new AWS.S3;

        console.log('You are now logged in.');
      } else {
        console.log('There was a problem logging you in.');
      }
    });
  };
};

// Load the FB JS SDK asynchronously
(function(d, s, id){
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) {return;}
   js = d.createElement(s); js.id = id;
   js.src = "//connect.facebook.net/en_US/all.js";
   fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));
</script>
```

## Google\$1 로그인 예제
<a name="config-web-identity-google-login-example"></a>

다음 코드에서는 Google\$1 로그인을 자격 증명 공급자로 사용하는 방법을 보여 줍니다. Google의 웹 자격 증명 연동에 사용되는 액세스 토큰은 다른 자격 증명 공급자와 마찬가지로 `access_token` 대신에 `response.id_token`에 저장됩니다.

```
<span
  id="login"
  class="g-signin"
  data-height="short"
  data-callback="loginToGoogle"
  data-cookiepolicy="single_host_origin"
  data-requestvisibleactions="http://schemas.google.com/AddActivity"
  data-scope="https://www.googleapis.com/auth/plus.login">
</span>
<script type="text/javascript">
  var s3 = null;
  var clientID = '1234567890.apps.googleusercontent.com'; // Google client ID
  var roleArn = 'arn:aws:iam::<AWS_ACCOUNT_ID>:role/<WEB_IDENTITY_ROLE_NAME>';

  document.getElementById('login').setAttribute('data-clientid', clientID);
  function loginToGoogle(response) {
    if (!response.error) {
      AWS.config.credentials = new AWS.WebIdentityCredentials({
        RoleArn: roleArn, WebIdentityToken: response.id_token
      });

      s3 = new AWS.S3();

      console.log('You are now logged in.');
    } else {
      console.log('There was a problem logging you in.');
    }
  }

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/client:plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
 </script>
```