適用於 JavaScript 的 AWS SDK v2 已end-of-support。我們建議您遷移至 [適用於 JavaScript 的 AWS SDK 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/)。

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 在 Web 瀏覽器中設定登入資料
<a name="setting-credentials-browser"></a>

透過瀏覽器指令碼將登入資料提供給軟體開發套件有幾種方法。有些方法比較安全，有些在開發指令碼時更方便。以下是您可以提供登入資料的方法，依建議順序列出：

1. 使用 Amazon Cognito Identity 驗證使用者並提供登入資料

1. 使用 Web 聯合身分

1. 在指令碼中將程式碼寫死

**警告**  
我們不建議硬式編碼指令碼中的 AWS 登入資料。將登入資料寫死會造成存取金鑰 ID 和私密存取金鑰遭暴露的風險。

**Topics**
+ [使用 Amazon Cognito Identity 驗證使用者](loading-browser-credentials-cognito.md)
+ [使用 Web 聯合身分來驗證使用者](loading-browser-credentials-federated-id.md)
+ [Web 聯合身分範例](config-web-identity-examples.md)

# 使用 Amazon Cognito Identity 驗證使用者
<a name="loading-browser-credentials-cognito"></a>

為瀏覽器指令碼取得 AWS 登入資料的建議方法是使用 Amazon Cognito Identity 登入資料物件 `AWS.CognitoIdentityCredentials`。Amazon Cognito 透過第三方身分提供者啟用使用者身分驗證。

若要使用 Amazon Cognito Identity，您必須先在 Amazon Cognito 主控台中建立身分集區。身分集區代表應用程式提供給使用者的身分群組。提供給使用者的身分可唯一識別每個使用者帳戶。Amazon Cognito 身分不是憑證。在 AWS Security Token Service () 中使用 Web 聯合身分支援交換憑證AWS STS。

Amazon Cognito 可協助您使用 `AWS.CognitoIdentityCredentials` 物件管理多個身分提供者的身分抽象。接著，會將載入的身分交換為在 AWS STS中的登入資料。

## 設定 Amazon Cognito 身分登入資料物件
<a name="browser-cognito-configuration"></a>

如果您尚未建立身分集區，請在設定 之前，在 [Amazon Cognito 主控台](https://console.aws.amazon.com/cognito)中建立身分集區以與瀏覽器指令碼搭配使用`AWS.CognitoIdentityCredentials`。建立身分集區的已驗證和未驗證 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 是您的身分提供者之一，您可以使用 `FB.login`Facebook 開發套件[的 ](https://developers.facebook.com/docs/facebook-login/web) 函數來取得身分提供者權杖：

```
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`物件的詳細資訊，請參閱《 適用於 JavaScript 的 AWS SDK API 參考[https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CognitoIdentityCredentials.html](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CognitoIdentityCredentials.html)》中的 。

# 使用 Web 聯合身分來驗證使用者
<a name="loading-browser-credentials-federated-id"></a>

您可以直接設定個別身分提供者，以使用 Web 聯合身分存取 AWS 資源。 AWS 目前支援透過數個身分提供者使用 Web 聯合身分驗證使用者：
+ [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 角色，以及向您選擇的身分提供者註冊的應用程式之後，您可以設定 SDK，以使用協助程式程式碼取得 IAM 角色的登入資料，如下所示：

```
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 之後，請前往 IAM 主控台，網址為 [https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/)：//www.healthnet.com，以建立新的 IAM 角色。

**為身分提供者建立 IAM 角色**

1. 前往主控台的 **Roles (角色)** 區段，然後選擇 **Create New Role (新建角色)**。

1. 為新角色輸入可協助您追蹤其用量的名稱，例如 **facebookIdentity**，然後選擇 **Next Step (下一步)**。

1. 在 **Select Role Type (選擇角色類型)** 中，選擇 **Role for Identity Provider Access (身分提供者存取的角色)**。

1. 針對 **Grant access to web identity providers (將存取授予 web 身分提供者)**，選擇 **Select (選取)**。

1. 從**身分提供者**清單中，選擇您要用於此 IAM 角色的身分提供者。  
![\[選取適用於身分提供者存取的角色\]](http://docs.aws.amazon.com/zh_tw/sdk-for-javascript/v2/developer-guide/images/iam-provider-select.png)

1. 輸入在 **Application ID (應用程式 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 身分的任何使用者都能夠修改您應用程式中的資源。

如需在 IAM 中使用 Web 聯合身分的詳細資訊，請參閱《*IAM 使用者指南*》中的[關於 Web 聯合身分](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_providers_oidc.html)。

## 步驟 3：在登入後取得供應商存取字符
<a name="config-web-identity-obtain-token"></a>

使用身分提供者的軟體開發套件來為應用程式設定登入動作。您可以透過啟用使用者登入 (使用 OAuth 或 OpenID) 的身分提供者，來下載和安裝 JavaScript 軟體開發套件。如需如何在應用程式中下載和設定軟體開發套件程式碼的詳細資訊，請參閱身分提供者的軟體開發套件文件
+ [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 使用 Web 聯合身分的 提供。使用者登入身分提供者，而傳回存取字符。針對您為此身分提供者建立的 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;
```

接著會透過包含該存取字符的身分提供者軟體開發套件，在回呼中設定 `WebIdentityToken`：

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

# Web 聯合身分範例
<a name="config-web-identity-examples"></a>

這裡有一些使用 web 聯合身分來在瀏覽器 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 Login 範例
<a name="config-web-identity-facebook-login-example"></a>

以下程式碼說明如何使用 Facebook Login 做為身分提供者：

```
<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 做為身分提供者。透過 Google 用於 web 聯合身分的存取字符會存放在 `response.id_token`，而不是與其他身分提供者一樣放在 `access_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>
```