

 AWS SDK untuk JavaScript V2 telah mencapai end-of-support. Kami menyarankan Anda bermigrasi ke [AWS SDK untuk JavaScript v3](https://docs.aws.amazon.com//sdk-for-javascript/v3/developer-guide/). Untuk detail dan informasi tambahan tentang cara bermigrasi, silakan lihat [pengumuman](https://aws.amazon.com/blogs//developer/announcing-end-of-support-for-aws-sdk-for-javascript-v2/) ini.

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

# Menyetel Kredensial di Browser Web
<a name="setting-credentials-browser"></a>

Ada beberapa cara untuk memasok kredensional Anda ke SDK dari skrip browser. Beberapa di antaranya lebih aman dan yang lain memberikan kenyamanan yang lebih besar saat mengembangkan skrip. Berikut adalah cara-cara Anda dapat memberikan kredensi Anda dalam urutan rekomendasi:

1. Menggunakan Identitas Amazon Cognito untuk mengautentikasi pengguna dan menyediakan kredensional

1. Menggunakan identitas federasi web

1. Hard code dalam script

**Awas**  
Kami tidak menyarankan hard coding AWS kredensional Anda dalam skrip Anda. Kredensi pengkodean keras menimbulkan risiko mengekspos ID kunci akses dan kunci akses rahasia Anda.

**Topics**
+ [Menggunakan Identitas Amazon Cognito untuk Mengautentikasi Pengguna](loading-browser-credentials-cognito.md)
+ [Menggunakan Identitas Federasi Web untuk Mengautentikasi Pengguna](loading-browser-credentials-federated-id.md)
+ [Contoh Identitas Federasi Web](config-web-identity-examples.md)

# Menggunakan Identitas Amazon Cognito untuk Mengautentikasi Pengguna
<a name="loading-browser-credentials-cognito"></a>

Cara yang disarankan untuk mendapatkan AWS kredensi untuk skrip browser Anda adalah dengan menggunakan objek kredensi Identitas Amazon Cognito,. `AWS.CognitoIdentityCredentials` Amazon Cognito memungkinkan otentikasi pengguna melalui penyedia identitas pihak ketiga.

Untuk menggunakan Identitas Amazon Cognito, Anda harus terlebih dahulu membuat kumpulan identitas di konsol Amazon Cognito. Kumpulan identitas mewakili grup identitas yang disediakan aplikasi Anda kepada pengguna Anda. Identitas yang diberikan kepada pengguna secara unik mengidentifikasi setiap akun pengguna. Identitas Amazon Cognito identitas bukan kredensial. Mereka ditukar dengan kredensi menggunakan dukungan federasi identitas web di AWS Security Token Service ().AWS STS

Amazon Cognito membantu Anda mengelola abstraksi identitas di beberapa penyedia identitas dengan objek. `AWS.CognitoIdentityCredentials` Identitas yang dimuat kemudian ditukar dengan kredensi di. AWS STS

## Mengonfigurasi Objek Kredensial Identitas Amazon Cognito
<a name="browser-cognito-configuration"></a>

Jika Anda belum membuatnya, buat kumpulan identitas untuk digunakan dengan skrip browser Anda di konsol [Amazon Cognito](https://console.aws.amazon.com/cognito) sebelum Anda mengonfigurasi. `AWS.CognitoIdentityCredentials` Buat dan kaitkan peran IAM yang diautentikasi dan tidak diautentikasi untuk kumpulan identitas Anda.

Pengguna yang tidak diautentikasi tidak meminta agar identitas mereka diverifikasi, sehingga peran ini sesuai untuk pengguna tamu aplikasi Anda atau jika pengguna meminta agar identitas mereka diverifikasi dan itu tidak dipermasalahkan. Pengguna yang diautentikasi masuk ke aplikasi Anda melalui penyedia identitas pihak ketiga yang memverifikasi identitas mereka. Pastikan Anda menjangkau izin sumber daya dengan tepat sehingga Anda tidak memberikan akses kepada mereka dari pengguna yang tidak terautentikasi.

Setelah mengonfigurasi kumpulan identitas dengan penyedia identitas yang dilampirkan, Anda dapat menggunakannya `AWS.CognitoIdentityCredentials` untuk mengautentikasi pengguna. Untuk mengkonfigurasi kredensial aplikasi Anda agar dapat menggunakan `AWS.CognitoIdentityCredentials`, atur properti `credentials` baik `AWS.Config` atau konfigurasi per layanan. Contoh berikut menggunakan `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'
  }
});
```

Properti opsional `Logins` adalah peta nama penyedia identitas untuk token identitas bagi penyedia tersebut. Bagaimana Anda bisa mendapatkan token dari penyedia identitas Anda tergantung pada penyedia yang Anda gunakan. Misalnya, jika Facebook adalah salah satu penyedia identitas Anda, Anda dapat menggunakan fungsi `FB.login` dari [SDK Facebook](https://developers.facebook.com/docs/facebook-login/web) untuk mendapatkan token penyedia identitas:

```
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.');
  }
});
```

## Mengalihkan Pengguna yang Tidak Diautentikasi ke Pengguna yang Diautentikasi
<a name="browser-switching-unauthenticated-users"></a>

Amazon Cognito mendukung pengguna yang diautentikasi dan tidak diautentikasi. Pengguna yang tidak diautentikasi menerima akses ke sumber daya Anda meskipun mereka tidak masuk dengan penyedia identitas Anda. Tingkat akses ini berguna untuk menampilkan konten kepada pengguna sebelum masuk. Setiap pengguna yang tidak diautentikasi memiliki identitas unik di Amazon Cognito meskipun mereka belum masuk dan diautentikasi secara individual.

### Pengguna Awalnya Tidak Diautentikasi
<a name="browser-switching-initially-unauthenticated-user"></a>

Pengguna biasanya memulai dengan peran yang tidak diautentikasi, di mana Anda menetapkan properti kredensial objek konfigurasi Anda tanpa properti. `Logins` Dalam kasus ini, konfigurasi default Anda mungkin terlihat seperti berikut ini:

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

### Beralih ke Pengguna Terautentikasi
<a name="switch-to-authenticated"></a>

Ketika pengguna yang tidak diautentikasi masuk ke penyedia identitas dan Anda memiliki token, Anda dapat mengalihkan pengguna dari yang tidak diautentikasi ke otentikasi dengan memanggil fungsi kustom yang memperbarui objek kredensi dan menambahkan token: `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;
}
```

Anda juga dapat membuat `CognitoIdentityCredentials` objek. Jika ya, Anda harus mengatur ulang properti kredensial dari objek layanan yang ada yang Anda buat. Objek layanan dibaca dari konfigurasi global hanya pada inisialisasi objek. 

Untuk informasi selengkapnya tentang `CognitoIdentityCredentials` objek, lihat [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CognitoIdentityCredentials.html](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CognitoIdentityCredentials.html)di Referensi AWS SDK untuk JavaScript API. 

# Menggunakan Identitas Federasi Web untuk Mengautentikasi Pengguna
<a name="loading-browser-credentials-federated-id"></a>

Anda dapat langsung mengkonfigurasi penyedia identitas individu untuk mengakses AWS sumber daya menggunakan federasi identitas web. AWS saat ini mendukung otentikasi pengguna menggunakan federasi identitas web melalui beberapa penyedia identitas:
+ [Login with Amazon](https://login.amazon.com)
+ [Login Facebook](https://www.facebook.com/about/login)
+ [Masuk Google](https://developers.google.com/identity/)

Anda harus terlebih dahulu mendaftarkan aplikasi Anda ke penyedia yang didukung aplikasi Anda. Selanjutnya, buat peran IAM dan atur izin untuk itu. Peran IAM yang Anda buat kemudian digunakan untuk memberikan izin yang Anda konfigurasikan untuk itu melalui penyedia identitas masing-masing. Misalnya, Anda dapat mengatur peran yang memungkinkan pengguna yang masuk melalui Facebook memiliki akses baca ke bucket Amazon S3 tertentu yang Anda kontrol.

Setelah Anda memiliki peran IAM dengan hak istimewa yang dikonfigurasi dan aplikasi yang terdaftar dengan penyedia identitas pilihan Anda, Anda dapat mengatur SDK untuk mendapatkan kredensi untuk peran IAM menggunakan kode pembantu, sebagai berikut:

```
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
});
```

Nilai dalam `ProviderId` parameter tergantung pada penyedia identitas yang ditentukan. Nilai dalam `WebIdentityToken` parameter adalah token akses yang diambil dari login yang berhasil dengan penyedia identitas. Untuk informasi selengkapnya tentang cara mengonfigurasi dan mengambil token akses untuk setiap penyedia identitas, lihat dokumentasi untuk penyedia identitas.

## Langkah 1: Mendaftar dengan Penyedia Identitas
<a name="config-web-identity-register"></a>

Untuk memulai, daftarkan aplikasi dengan penyedia identitas yang Anda pilih untuk didukung. Anda akan diminta untuk memberikan informasi yang mengidentifikasi aplikasi Anda dan mungkin penulisnya. Ini memastikan bahwa penyedia identitas tahu siapa yang menerima informasi pengguna mereka. Dalam setiap kasus, penyedia identitas akan mengeluarkan ID aplikasi yang Anda gunakan untuk mengonfigurasi peran pengguna.

## Langkah 2: Membuat Peran IAM untuk Penyedia Identitas
<a name="config-web-identity-role"></a>

Setelah Anda mendapatkan ID aplikasi dari penyedia identitas, buka konsol IAM di [https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/)untuk membuat peran IAM baru.

**Untuk membuat peran IAM untuk penyedia identitas**

1. Buka bagian **Peran** konsol dan kemudian pilih **Buat Peran Baru**.

1. Ketik nama untuk peran baru yang membantu Anda melacak penggunaannya, seperti**facebookIdentity**, lalu pilih **Langkah Berikutnya**.

1. Di **Pilih Jenis Peran**, pilih **Peran untuk Akses Penyedia Identitas**.

1. Untuk **memberikan akses ke penyedia identitas web**, pilih **Pilih**.

1. Dari daftar **Penyedia Identitas**, pilih penyedia identitas yang ingin Anda gunakan untuk peran IAM ini.  
![\[Memilih Peran untuk Akses Penyedia Identitas\]](http://docs.aws.amazon.com/id_id/sdk-for-javascript/v2/developer-guide/images/iam-provider-select.png)

1. Ketik ID aplikasi yang disediakan oleh penyedia identitas di **ID Aplikasi** dan kemudian pilih **Langkah Berikutnya**.

1. Konfigurasikan izin untuk sumber daya yang ingin Anda paparkan, yang memungkinkan akses ke operasi tertentu pada sumber daya tertentu. *Untuk informasi selengkapnya tentang izin IAM, lihat [Ringkasan Izin AWS IAM di Panduan Pengguna](https://docs.aws.amazon.com/IAM/latest/UserGuide/access_permissions.html) IAM.* Tinjau dan, jika perlu, sesuaikan hubungan kepercayaan peran, lalu pilih **Langkah Berikutnya**.

1. Lampirkan kebijakan tambahan yang Anda butuhkan dan kemudian pilih **Langkah Berikutnya**. Untuk informasi lebih lanjut tentang kebijakan IAM, lihat [Gambaran umum Kebijakan IAM](https://docs.aws.amazon.com/IAM/latest/UserGuide/access_policies.html) dalam *Panduan Pengguna IAM*.

1. Tinjau peran baru dan kemudian pilih **Buat Peran**.

Anda dapat memberikan batasan lain untuk peran tersebut, seperti melingkupinya ke pengguna tertentu. IDs Jika peran memberikan izin menulis ke sumber daya Anda, pastikan Anda mencakupkan peran dengan benar kepada pengguna dengan hak istimewa yang benar, jika tidak, setiap pengguna dengan identitas Amazon, Facebook, atau Google akan dapat memodifikasi sumber daya dalam aplikasi Anda.

Untuk informasi selengkapnya tentang penggunaan federasi identitas web di IAM, lihat [Tentang Federasi Identitas Web](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_providers_oidc.html) di *Panduan Pengguna IAM*.

## Langkah 3: Mendapatkan Token Akses Penyedia Setelah Login
<a name="config-web-identity-obtain-token"></a>

Siapkan tindakan login untuk aplikasi Anda dengan menggunakan SDK penyedia identitas. Anda dapat mengunduh dan menginstal JavaScript SDK dari penyedia identitas yang memungkinkan login pengguna, menggunakan salah satu OAuth atau OpenID. Untuk informasi tentang cara mengunduh dan menyiapkan kode SDK di aplikasi Anda, lihat dokumentasi SDK untuk penyedia identitas Anda:
+ [Login with Amazon](https://login.amazon.com/website)
+ [Login Facebook](https://developers.facebook.com/docs/javascript)
+ [Masuk Google](https://developers.google.com/identity/)

## Langkah 4: Memperoleh Kredensi Sementara
<a name="config-web-identity-get-credentials"></a>

Setelah aplikasi, peran, dan izin sumber daya dikonfigurasi, tambahkan kode ke aplikasi Anda untuk mendapatkan kredensi sementara. Kredensi ini disediakan melalui federasi identitas web yang AWS Security Token Service menggunakan. Pengguna masuk ke penyedia identitas, yang mengembalikan token akses. Siapkan `AWS.WebIdentityCredentials` objek menggunakan ARN untuk peran IAM yang Anda buat untuk penyedia identitas ini:

```
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
});
```

Objek layanan yang dibuat selanjutnya akan memiliki kredensional yang tepat. Objek yang dibuat sebelum menyetel `AWS.config.credentials` properti tidak akan memiliki kredensi saat ini.

Anda juga dapat membuat `AWS.WebIdentityCredentials` sebelum mengambil token akses. Ini memungkinkan Anda untuk membuat objek layanan yang bergantung pada kredensi sebelum memuat token akses. Untuk melakukan ini, buat objek kredensial tanpa parameter: `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;
```

Kemudian atur `WebIdentityToken` callback dari SDK penyedia identitas yang berisi token akses:

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

# Contoh Identitas Federasi Web
<a name="config-web-identity-examples"></a>

Berikut adalah beberapa contoh menggunakan identitas federasi web untuk mendapatkan kredensi di browser. JavaScript Contoh-contoh ini harus dijalankan dari skema host http://atau https://untuk memastikan penyedia identitas dapat mengarahkan ulang ke aplikasi Anda. 

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

Kode berikut menunjukkan cara menggunakan Login with Amazon sebagai penyedia identitas. 

```
<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>
```

## Contoh Login Facebook
<a name="config-web-identity-facebook-login-example"></a>

Kode berikut menunjukkan cara menggunakan Facebook Login sebagai penyedia identitas:

```
<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>
```

## Contoh Masuk Google\$1
<a name="config-web-identity-google-login-example"></a>

Kode berikut menunjukkan cara menggunakan Google\$1 Sign-in sebagai penyedia identitas. Token akses yang digunakan untuk federasi identitas web dari Google disimpan `response.id_token` bukan `access_token` seperti penyedia identitas lainnya. 

```
<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>
```