> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.com/llms.txt
> Use this file to discover all available pages before exploring further.

# GDPR：Lockで同意を追跡する

> Lockをカスタマイズして同意情報を取得する方法について説明します。

このチュートリアルでは、Lockを使用して同意情報を求め、その入力をユーザーのメタデータに保存する方法を説明します。詳細については、「[ユーザープロファイルでのメタデータの使い方](/docs/ja-jp/manage-users/user-accounts/metadata)」をお読みください。

カスタムUIを使用して同意を追跡したい場合には、「[GDPR：カスタムUIで同意を追跡する](https://auth0.com/docs/secure/data-privacy-and-compliance/gdpr/gdpr-track-consent-with-custom-ui)」をご覧ください。

これらの文書の内容は、法的な助言を意図したものでは**なく** 、法的支援の代替と見なされるべきではありません。GDPRを理解し順守することの最終責任はお客様にあり、Auth0は可能な限りにおいて、お客様がGDPR要件を満たすことを支援します。

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  これらの文書の内容は、法的な助言を意図したものではなく、法的支援の代替と見なされるべきではありません。 GDPRを理解し順守することの最終責任はお客様にあり、Auth0は可能な限りにおいて、お客様がGDPR要件を満たすことを支援します。
</Callout>

## 概要

簡素なJavaScriptのシングルページアプリケーションとデータベース接続を構成します（独自のデータベースをセットアップするのではなく、Auth0のインフラストラクチャを使用します）。

アプリをゼロから構築するのではなく、[Auth0のJavaScriptのクイックスタートにあるサンプルを使用](/docs/ja-jp/quickstart/spa/vanillajs)します。また、アプリにログインを組み込むのではなく、Auth0のユニバーサルログインページを使用して、ユニバーサルログインエクスペリエンスを実装できるようにします。ユニバーサルログインの詳細については、「[Auth0のユニバーサルログイン](/docs/ja-jp/authenticate/login/auth0-universal-login)」をお読みください。ユニバーサルログインと埋め込みログインの違いについては、「[中央集中型ユニバーサルログインと埋め込みログイン](/docs/ja-jp/authenticate/login/universal-vs-embedded-login)」をお読みください。

さまざまなシナリオで同意情報を取得して、ユーザーのメタデータに保存します。

以下のプロパティはすべてのシナリオでユーザーのメタデータに保存されます。

* `consentGiven`プロパティはtrueまたはfalseの値を持ち、ユーザーが同意した（true）か、同意しなかった（false）かを示します
* `consentTimestamp`プロパティはユーザーが同意を提供した日時を示すUnixタイムスタンプを保持します

例：

```json lines theme={null}
{
  "consentGiven": "true"
  "consentTimestamp": "1525101183"
}
```

これには3つの異なる実装があります。

* 他のページへのリンクを表示して、利用規約やプライベートポリシーの情報を確認できるようにする
* サインアップウィジェットでカスタムフィールドを追加して、データベース接続で動作させる
* ユーザーが同意できるように別のページにリダイレクトして、ソーシャル接続で動作させる

## アプリケーションを構成する

1. [［Auth0 Dashboard］>［Applications（アプリケーション）］>［Applications（アプリケーション）］](https://manage.auth0.com/#/applications)に移動して、アプリケーションを作成します。種類には［`Single Web Page Applications`（シングルWebページアプリケーション）］を選択します。
2. **［Settings（設定）］** に移動して、**［Allowed Callback URLs（許可されているCallback URL）］** を`http://localhost:3000`に設定します。

   このフィールドには、Auth0が認証後にユーザーをリダイレクトできるURLのセットを入力します。サンプルアプリは`http://localhost:3000`で実行されるため、この値を設定します。
3. **［Client Id（クライアントID）］** と\*\*［Domain（ドメイン）］\*\* の値をコピーします。これらは後で必要になります。
4. [［Auth0 Dashboard］>［Authentication（認証）］>［Database（データベース）］](https://manage.auth0.com/#/connections/database)に移動して、新しい接続を作成します。**［Create DB Connection（データベース接続を作成する）］** をクリックし、新しい接続の名前を設定して\*\*［Save（保存）］\*\* をクリックします。[［Auth0 Dashboard］>［Authentication（認証）］>［Social（ソーシャル）］](https://manage.auth0.com/#/connections/social)に移動してソーシャル接続を有効化することもできます（このチュートリアルではGoogleログインを有効化します）。
5. 接続の\*\*［Applications（アプリケーション）］\*\* タブに移動して、新たに作成したアプリケーションが有効になっていることを確認します。
6. [JavaScript SPAのサンプルをダウンロード](/docs/ja-jp/quickstart/spa/vanillajs)します。

## オプション1：利用規約へのリンクを表示する

このセクションでは、ログインウィジェットをカスタマイズして、ユーザーがサインアップで選択しなければならないフラグを追加します。フラグのラベルには、利用規約とプライバシーポリシーを表示するページへのリンクを含めます。

これはデータベース接続とソーシャル接続の両方で動作します。

1. [［Auth0 Dashboard］>［Branding（ブランディング）］>［Universal Login（ユニバーサルログイン）］](https://manage.auth0.com/#/login_page)に移動します。

2. **［Login（ログイン）］** を選択して、**［Customize Login Page（ログインページをカスタマイズ）］** トグルを有効にします。

3. **［Default Templates（デフォルトのテンプレート）］** ドロップダウンから［`Lock`］を選択します。コードブロックが自動的に入力されます。

4. `consentGiven`メタデータのフィールドを追加するには、`mustAcceptTerms`オプションを使用します。利用規約やプライバシーポリシーへのリンクを含めるには、`languageDictionary`オプションを使用します。詳細については、「[Lock構成オプション](/docs/ja-jp/libraries/lock/lock-configuration)」をお読みください。以下の例では、フラグの横に［`I agree to the terms of service and privacy policy`（利用規約およびプライバシーポリシーに同意します）］というテキスト（両方のページへのリンクを含む）が表示されます。

   ```javascript lines theme={null}
   //code reducted for simplicity
       var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
         auth: {
           //code reducted for simplicity
         },
         languageDictionary: {
           signUpTerms: "I agree to the <a href='https://my-app-url.com/terms' target='_blank'>terms of service</a> and <a href='https://my-app-url.com/privacy' target='_blank'>privacy policy</a>."
         },
         mustAcceptTerms: true,
         //code reducted for simplicity
       });
   ```

5. このフラグは、ユーザーがサインアップする前に規約に同意することを強制しますが、メタデータは一切設定しません。ユーザーの選択を`consentGiven`メタデータプロパティに保存するには、[新しいアクションを作成](/docs/ja-jp/customize/actions/write-your-first-action)します。アクションに分かりやすい**名前** （「`Set consent flag upon signup`（サインアップ時に同意フラグを設定）」など）を入力し、［`Login / Post Login`（ログイン/ログイン後）］トリガーを選択（アクションをログインフローに追加することになるため）してから、**［Create（作成）］** を選択します。

6. 以下はアクションコードエディターの画面です。以下のJavaScriptコードをコピーし、アクションコードエディターに貼り付けてから、**［Save Draft（下書きを保存）］** を選択して変更内容を保存します。

   ```lines theme={null}
   exports.onExecutePostLogin = async (event, api) => {
     const { consentGiven } = event.user.user_metadata || {};

     // short-circuit if the user signed up already
     if ( consentGiven ) {
       return;
     }

     // first time login/signup
     api.user.setUserMetadata("consentGiven", true);
     api.user.setUserMetadata("consentTimestamp", Date.now());
     return;
   }
   ```

   まだ設定されていない（サインアップ後の初回のログインの）場合、このコードは`consentGiven`メタデータを`true`に設定します。

7. アクションコードエディタのサイドバーから、［Test（テスト）］（再生アイコン）、**［Run（実行）］** の順にクリックし、[コードをテスト](/docs/ja-jp/customize/actions/test-actions)します。

8. アクションを稼働する準備ができたら、**［Deploy（導入）］** を選択します。

そして、作成したアクションを[［Login Flow（ログインフロー）］](https://manage.auth0.com/#/actions/flows/login/)に追加します。アクションをフローにアタッチする方法については、「[初めてアクションを作成する](/docs/ja-jp/customize/actions/write-your-first-action)」の「アクションをフローにアタッチする」セクションをお読みください。

## オプション2：データベース接続のカスタムフィールドを追加する

このセクションでは、ログインウィジェットをカスタマイズして、ユーザーが個人情報の処理に同意するために選択するフラグを追加します。

これはデータベース接続でのみ動作します（ソーシャルログインを使用する場合は、次の段落を参照してください）。

1. [［Auth0 Dashboard］>［Branding（ブランディング）］>［Universal Login（ユニバーサルログイン）］](https://manage.auth0.com/#/login_page)に移動します。

2. **［Login（ログイン）］** を選択して、**［Customize Login Page（ログインページをカスタマイズ）］** トグルを有効にします。

3. **［Default Templates（デフォルトのテンプレート）］** ドロップダウンから［`Lock`］を選択します。コードブロックが自動的に入力されます。

4. `consentGiven`メタデータのフィールドを追加するには、`additionalSignUpFields`オプションを使用します。詳細については、「[Lock構成オプション](/docs/ja-jp/libraries/lock/lock-configuration)」をお読みください。以下の例では、種類を`checkbox`（ラベルあり）、ラベルを［`I consent to data processing`（データーの処理に同意します）］、デフォルト値を`checked`に設定します。

   ```javascript lines theme={null}
   //code reducted for simplicity
       var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
         auth: {
           //code reducted for simplicity
         },
         additionalSignUpFields: [{
           type: "checkbox",
           name: "consentGiven",
           prefill: "true",
           placeholder: "I consent to data processing"
         }],
         //code reducted for simplicity
       });
   ```

5. 外観を確認するには、**［Preview（プレビュー）］** ビューを選択し、Lockが読み込まれたら\*\*［Sign Up（サインアップ）］\*\* を選択します。

このオプションはフラグのみを設定し、タイムスタンプは設定しないことに注意してください。ログインウィジェットで現在の時間を表示することは任意であるため、この例では追加のサインアップフィールドを追加していません。タイムスタンプは背景で設定することをお勧めします。これを行うには、`consentGiven`を確認して、追加の`consentTimestamp`メタデータを現在のタイムスタンプに設定するルールを使用します。

## オプション3：別のページへリダイレクトする

ソーシャルログインを使用している場合は、カスタムフィールドを追加できませんが、同意と追加情報を求める別のページにユーザーをリダイレクトし、その後認証処理を終わらせるために再びリダイレクトして戻すことができます。これには、リダイレクトアクションを使用することができます。詳細については、「[アクションを使用してリダイレクトする](/docs/ja-jp/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/redirect-with-actions)」をお読みください。この同じアクションを使用して、同意情報をユーザーのメタデータに保存します。そうすれば、この情報を追跡できるため、次回のログインで同意を求めなくて済みます。

分かりやすくするために、ここでは[同意フォームのサンプル](https://github.com/auth0/rules/blob/master/redirect-rules/simple/webtask.js#L31)を使用します。このフォームはホストする必要があります。また、フォームのURLは一般からのアクセスに公開されていなければなりません。手順2でフォームからAuth0にアクセス可能なURLを提供する必要があります。保護者の同意など、特別な同意プロンプトが必要な場合は、独自のカスタム同意フォームを作成する必要があります。国によって法律が異なるのでご注意ください。

1. [新しいアクションを作成](/docs/ja-jp/customize/actions/write-your-first-action)します。アクションに分かりやすい**名前** （「`Redirect to consent form`（同意フォームへのリダイレクト）」など）を入力し、［`Login / Post Login`（ログイン/ログイン後）］トリガーを選択（アクションをログインフローに追加することになるため）してから、**［Create（作成）］** を選択します。

2. アクションコードエディターのサイドバーにある **［Secrets（シークレット）］** （鍵）アイコンを選択します。キーと値のペアを作成し、同意フォームのURLをシークレットとして追加します。

   * **キー** ：`CONSENT_FORM_URL`
   * **値**：`your-consent-form-url.com`（同意フォームのURLが一般からのアクセスに公開されていることを確認してください）

3. 以下のJavaScriptコードをコピーし、アクションコードエディターに貼り付けてから、**［Save Draft（下書きを保存）］** を選択して変更内容を保存します。

   ```lines theme={null}
   exports.onExecutePostLogin = async (event, api) => {
       const { consentGiven } = event.user.user_metadata || {};

       // redirect to consent form if user has not yet consented
       if (!consentGiven && api.redirect.canRedirect()) {
         const options = {
           query: {
             auth0_domain: `${event.tenant.id}.auth0.com`,
           },
         };
         api.redirect.sendUserTo(event.secrets.CONSENT_FORM_URL, options);
       }
   };

   // if user clicks 'I agree' on the consent form, save it to their profile so they don't get prompted again
   exports.onContinuePostLogin = async (event, api) => {
     if (event.request.body.confirm === "yes") {
       api.user.setUserMetadata("consentGiven", true);
       api.user.setUserMetadata("consentTimestamp", Date.now());
       return;
     } else {
       return api.access.deny("User did not consent");
     }
   };
   ```

4. アクションコードエディタのサイドバーから、［Test（テスト）］（再生アイコン）、**［Run（実行）］** の順にクリックし、[コードをテスト](/docs/ja-jp/customize/actions/test-actions)します。

5. アクションを稼働する準備ができたら、**［Deploy（導入）］** を選択します。

そして、作成したアクションを[［Login Flow（ログインフロー）］](https://manage.auth0.com/#/actions/flows/login/)に追加します。アクションをフローにアタッチする方法については、「[初めてアクションを作成する](/docs/ja-jp/customize/actions/write-your-first-action)」の「アクションをフローにアタッチする」セクションをお読みください。

運用環境での使用に同時フォームへのリダイレクトをセットアップする際には、「[信頼済みのCallback URL](https://github.com/auth0/rules/tree/master/redirect-rules/simple#trusted-callback-urls)」と「[データの整合性](https://github.com/auth0/rules/tree/master/redirect-rules/simple#data-integrity)」でセキュリティ上の懸念事項を確認してください。

これで構成の部分は終わりです。次にテストを行います。

## 構成をテストする

1. アプリケーションをダウンロードしたフォルダーに移動して、以下を実行します。

   ```lines theme={null}
   npm install
       npm run
   ```

2. `http://localhost:3000`にアクセスします。**［Login（ログイン）］** をクリックします。Lockが表示されたら、**［Sign Up（サインアップ）］** をクリックします。ログインページはデフォルトで`YOUR_DOMAIN/login`になります。独自のドメインを使用する方法については、「[カスタムドメイン](/docs/ja-jp/customize/custom-domains)」をお読みください。

3. 実装オプション1の手順に従った場合には、サービスの利用規約とプライバシーポリシーに同意するフラグが表示されるはずです。フラグを選択するまで、**［Sign up（サインアップ）］** ボタンが無効のままになることに注意してください。リンクに従って、動作を確認します。メールとパスワードを設定して利用規約に同意し、**［Sign Up（サインアップ）］** をクリックします。または、ソーシャル接続を使用している場合には、利用規約に同意して **［Sign Up with Google（Googleで登録）］** を選択します。

4. 実装オプション2の手順に従った場合には、追加した新規フィールドが表示されるはずです。メールとパスワードを設定し、［`I consent to data processing`（データーの処理に同意します）］フラグを選択したままにします。**［Sign Up（サインアップ）］** をクリックします。

5. 実装オプション3の手順に従った場合には、**［Sign Up with Google（Googleで登録）］** を選択します。同意フォームに送られます。**［I agree（同意する）］** フラグを選択して、**［Submit（送信）］** をクリックします。

   **［I agree（同意する）］** フラグを選択しないで **［Submit（送信）］** をクリックすると、「`Unauthorized.Check the console for details.`（許可されていません。コンソールで詳細を確認してください。）」というエラーが表示されます。コンソールには以下のJSONが表示されます。

   ```json lines theme={null}
   {
         error: "unauthorized", 
         errorDescription: "User did not consent!", 
         state: "q0GjMwzZN_q5r8XPHvfakkMYcYM2q1N3"
       }
   ```

   ユーザーは作成されますが、ログインできないことに注意してください。ログインしようとすると、同意を促すプロンプトが再び表示されます。

6. [［Auth0 Dashboard］>［User Management（ユーザー管理）］>［Users（ユーザー）］](https://manage.auth0.com/#/users)に移動し、新規ユーザを検索します。

7. **［User Details（ユーザーの詳細）］** に移動して、**［Metadata（メタデータ）］** セクションまでスクロールします。**［user\_metadata］** テキスト領域に以下が表示されるはずです。

   ```json lines theme={null}
   {
         "consentGiven": "true"
         "consentTimestamp": "1525101183"
       }
   ```

これで完了です！