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. ウェブフェデレーテッド ID を使用する

1. スクリプトにハードコードする

**警告**  
スクリプトに AWS 認証情報をハードコーディングすることはお勧めしません。認証情報をハードコーディングすると、アクセスキー ID とシークレットアクセスキーが公開される危険があります。

**Topics**
+ [Amazon Cognito アイデンティティを使用してユーザーを認証する](loading-browser-credentials-cognito.md)
+ [ユーザー認証のためのウェブフェデレーテッド ID の使用](loading-browser-credentials-federated-id.md)
+ [ウェブフェデレーティッド ID の例](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 コンソールでアイデンティティプールを作成する必要があります。ID プールは、アプリケーションがユーザーに提供する ID のグループを表します。ユーザーに与えられたアイデンティティは、各ユーザーアカウントを一意に識別します。Amazon Cognito ID は認証情報ではありません。これらは AWS Security Token Service (AWS STS) のウェブ ID フェデレーションサポートを使用して認証情報と交換されます。

Amazon Cognito は、`AWS.CognitoIdentityCredentials` オブジェクトを使用して、複数のアイデンティティプロバイダーにわたるアイデンティティの抽象化を管理するのに役立ちます。ロードされた ID は AWS STS の認証情報と交換されます。

## Amazon Cognito アイデンティティ認証情報オブジェクトの設定
<a name="browser-cognito-configuration"></a>

まだ作成していない場合は、`AWS.CognitoIdentityCredentials` を設定する前に [Amazon Cognito コンソール](https://console.aws.amazon.com/cognito)でブラウザスクリプトによりアイデンティティプールを作成してください。アイデンティティプール用の認証済み IAM ロールと未認証 IAM ロールの両方を作成して関連付けます。

認証されていないユーザーは ID が検証されないため、このロールはアプリケーションのゲストユーザーに適切です。または、ユーザーの ID が検証されているかどうかが重要ではない場合に適切です。認証されているユーザーは、自分の ID を確認するサードパーティーの ID プロバイダーを介してアプリケーションにログインします。リソースの許可の範囲を適切に設定し、認証されていないユーザーからのアクセスを許可しないようにします。

アタッチ済みの ID プロバイダーで ID プールを設定すると、`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` プロパティは、ID プロバイダー名の ID トークンへのマッピングです。ID プロバイダーからのトークンの取得方法は、使用するプロバイダーによって異なります。たとえば、Facebook を ID プロバイダーとして使用する場合は、`FB.login`Facebook SDK[ の ](https://developers.facebook.com/docs/facebook-login/web) 関数を使用して ID プロバイダートークンを取得します。

```
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 は、認証されたユーザーと認証されていないユーザーの両方をサポートします。認証されていないユーザーは、ID プロバイダーのいずれにもログインしていない場合でも、リソースにアクセスできます。このレベルのアクセスは、ログインする前にユーザーにコンテンツを表示するのに便利です。認証されていない各ユーザーは、個別にログインして認証していない場合でも 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>

認証されていないユーザーが ID プロバイダーにログインしたときに、トークンがあれば、カスタム関数を呼び出して認証情報オブジェクトを更新し `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) を参照してください。

# ユーザー認証のためのウェブフェデレーテッド ID の使用
<a name="loading-browser-credentials-federated-id"></a>

ウェブ ID フェデレーションを使用して AWS リソースにアクセスするように個々のアイデンティティプロバイダーを直接設定できます。AWS は現在、複数のアイデンティティプロバイダーによるウェブ ID フェデレーションを使用したユーザー認証をサポートしています。
+ [Login with Amazon](https://login.amazon.com)
+ [Facebook Login](https://www.facebook.com/about/login)
+ [Google Sign-in](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` パラメータの値は、指定された ID プロバイダーによって異なります。`WebIdentityToken` パラメータの値は、ID プロバイダーへの正常なログインから取得されたアクセストークンです。各 ID プロバイダーのアクセストークンの設定方法および取得方法の詳細については、ID プロバイダーのドキュメントを参照してください。

## ステップ 1: ID プロバイダーへの登録
<a name="config-web-identity-register"></a>

開始するには、サポートを選択した ID プロバイダーにアプリケーションを登録します。アプリケーションと、場合によってはその作者を識別する情報を提供するように求められます。これにより、ID プロバイダーは、誰が自分のユーザー情報を受信しているのかを把握することができます。いずれの場合も、ID プロバイダーは、ユーザーロールを設定するために使用するアプリケーション ID を発行します。

## ステップ 2: Iアイデンティティプロバイダー用の IAM ロールを作成する
<a name="config-web-identity-role"></a>

アイデンティティプロバイダーからアプリケーション ID を取得したら、IAM コンソール ([https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/)) に移動し、新しい IAM ロールを作成します。

**アイデンティティプロバイダー用の IAM ロールを作成するには**

1. コンソールの [**ロール**] セクションに移動し、[**新しいロールの作成**] を選択します。

1. **facebookIdentity** など、新しいロールの使用状況を追跡するのに役立つ名前を入力し、[**次のステップ**] を選択します。

1. [**ロールタイプの選択**] で、[**ID プロバイダーアクセス用のロール**] を選択します。

1. [**ウェブ ID プロバイダーにアクセスを付与**] で、[**選択**] を選択します。

1. [**アイデンティティプロバイダー**] リストから、この IAM ロールに使用するアイデンティティプロバイダーを選択します。  
![\[ID プロバイダーアクセス用のロールの選択\]](http://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v2/developer-guide/images/iam-provider-select.png)

1. ID プロバイダーによって提供されたアプリケーション ID を [**アプリケーション ID**] に入力してから、[**次のステップ**] を選択します。

1. 公開するリソースに対するアクセス許可を設定し、特定のリソースに対して特定のオペレーションへのアクセスを許可します。IAM の許可に関する詳細については、*IAM ユーザーガイド*の [AWS IAM ユーザーの許可の概要](https://docs.aws.amazon.com/IAM/latest/UserGuide/access_permissions.html)を参照してください。ロールの信頼関係を確認し、必要に応じてカスタマイズしてから、[**次のステップ**] を選択します。

1. 必要な追加のポリシーをアタッチしてから、[**次のステップ**] を選択します。IAM ポリシーの詳細については、*IAM ユーザーガイド*の [IAM ポリシーの概要](https://docs.aws.amazon.com/IAM/latest/UserGuide/access_policies.html)を参照してください。

1. 新しいロール情報を確認してから、[**ロールの作成**] を選択します。

特定のユーザー 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>

ID プロバイダーの SDK を使用して、アプリケーションのログインアクションを設定します。OAuth または OpenID を使用してユーザーログインを可能にする JavaScript SDK を、ID プロバイダーからダウンロードしてインストールできます。SDK コードをダウンロードしてアプリケーションに設定する方法については、ID プロバイダーの SDK ドキュメントを参照してください。
+ [Login with Amazon](https://login.amazon.com/website)
+ [Facebook Login](https://developers.facebook.com/docs/javascript)
+ [Google Sign-in](https://developers.google.com/identity/)

## ステップ 4: 一時的な認証情報を取得する
<a name="config-web-identity-get-credentials"></a>

アプリケーション、ロール、およびリソースに対するアクセス許可を設定したら、一時的な認証情報を取得するためのコードをアプリケーションに追加します。これらの認証情報は、ウェブ ID フェデレーションを使用して AWS Security Token Service 経由で提供されます。ユーザーは ID プロバイダーにログインし、ID プロバイダーはアクセストークンを返します。このアイデンティティプロバイダー用に作成した 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;
```

次に、アクセストークンを含む ID プロバイダー SDK からのコールバックで `WebIdentityToken` を設定します。

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

# ウェブフェデレーティッド ID の例
<a name="config-web-identity-examples"></a>

ブラウザの JavaScript で認証情報を取得するためにウェブフェデレーテッド ID を使用する例をいくつか示します。これらの例は、ID プロバイダーがアプリケーションにリダイレクトできるように、http:// または https:// ホストスキームから実行する必要があります。

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

次のコードは、Login with Amazon を ID プロバイダーとして使用する方法を示しています。

```
<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 Login の例
<a name="config-web-identity-facebook-login-example"></a>

次のコードは、Facebook Login を ID プロバイダーとして使用する方法を示しています。

```
<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 Sign-in の例
<a name="config-web-identity-google-login-example"></a>

次のコードは、Google\$1 Sign-in を ID プロバイダーとして使用する方法を示しています。Google からのウェブ ID フェデレーションに使用されるアクセストークンは、他の ID プロバイダーのように `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>
```